Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
laboratoare:laborator03 [2015/03/09 09:25]
Andrei Roșu-Cojocaru
laboratoare:laborator03 [2017/02/20 20:54] (current)
Line 1: Line 1:
-====== Laborator 03. Proiectarea Interfețelor Grafice ​(I) ======+====== Laborator 03. Proiectarea Interfețelor Grafice ======
  
 ===== Clase Android utilizate pentru definirea unei interfețe grafice ===== ===== Clase Android utilizate pentru definirea unei interfețe grafice =====
Line 9: Line 9:
 Clasa ''​android.view.View''​ reprezintă baza pentru construirea oricărei interfețe grafice dintr-o aplicație Android. Ea definește o zonă rectangulară a dispozitivului de afișare (ecran), majoritatea controalelor grafice și a mecanismelor de dispunere a conținutului fiind derivate din aceasta. Clasa ''​android.view.View''​ reprezintă baza pentru construirea oricărei interfețe grafice dintr-o aplicație Android. Ea definește o zonă rectangulară a dispozitivului de afișare (ecran), majoritatea controalelor grafice și a mecanismelor de dispunere a conținutului fiind derivate din aceasta.
  
-{{ :​laboratoare:​laborator03:​tipuri_de_controale_grafice.png?​nolink&​300 }}+{{ :​laboratoare:​laborator03:​tipuri_de_controale_grafice.png?​nolink&​500 }}
  
 **1.** Cele mai multe **elemente grafice** sunt definite în pachetul ''​android.widget'',​ fiind implementate controale care implementează cele mai multe dintre funcționalitățile uzuale (etichete, câmpuri text, controale pentru redarea de conținut multimediat - imagini, filme -, butoane, elemente pentru gestiunea datei calendaristice și a timpului). **1.** Cele mai multe **elemente grafice** sunt definite în pachetul ''​android.widget'',​ fiind implementate controale care implementează cele mai multe dintre funcționalitățile uzuale (etichete, câmpuri text, controale pentru redarea de conținut multimediat - imagini, filme -, butoane, elemente pentru gestiunea datei calendaristice și a timpului).
Line 45: Line 45:
 </​code>​ </​code>​
  
-Mediul ​de dezvoltare Eclipse ​pune la dispoziția programatorilor atât un utilitar conținând biblioteci de controale, în care interfața grafică poate fi definită prin operații de tip drag-and-drop,​ cât și un editor text în care proprietățile acestor elemente pot fi specificate manual. Schimbările realizate într-una dintre aceste ferestre sunt transpuse automat și în cealaltă, astfel încât modificările din mediul vizual generează etichetele XML corespunzătoare,​ în timp ce efectul unor proprietăți stabilite în fișierul XML poate fi vizualizat imediat în editorul grafic.+Atât mediul integrat de dezvoltare Android Studio cât și mediul integrat ​de dezvoltare Eclipse ​pun la dispoziția programatorilor atât un utilitar conținând biblioteci de controale, în care interfața grafică poate fi definită prin operații de tip drag-and-drop,​ cât și un editor text în care proprietățile acestor elemente pot fi specificate manual. Schimbările realizate într-una dintre aceste ferestre sunt transpuse automat și în cealaltă, astfel încât modificările din mediul vizual generează etichetele XML corespunzătoare,​ în timp ce efectul unor proprietăți stabilite în fișierul XML poate fi vizualizat imediat în editorul grafic
 + 
 +{{ :​laboratoare:​laborator03:​androidstudio_graphical_layout.png?​nolink&​650 }} 
 + 
 +În **Android Studio**, utilitarul vizual poate fi accesat din panoul //Design//, putând fi specificate (prin selecția dintr-o listă) dispozitivul mobil pentru care se proiectează interfața grafică, orientarea ecranului (precum și alte moduri în care se poate găsi acesta), tema aplicației (stilul folosit), activitatea căreia îi este asociat, localizarea precum și nivelul de API. 
 + 
 +În cadrul bibliotecii de controale, organizarea elementelor grafice se face prin împărțirea lor în mai multe categorii:​ 
 +  * mecanisme de dispunere a conținutului (//​Layouts//​);​ 
 +  * forme de bază (//​Widgets//​);​ 
 +  * câmpuri text (//Text Fields//​);​ 
 +  * controale grafice ce pot conține alte componente(//​Containers//​);​ 
 +  * elemente pentru gestiunea datei calendaristice și a timpului (//Date & Time//); 
 +  * componente complexe de interacțiune cu utilizatorul (//​Expert//​);​ 
 +  * obiecte definite de utilizator (//​Custom//​);​ 
 + 
 +Structura interfeței grafice (ierarhia de controale grafice) poate fi (pre)vizualizată,​ pentru fiecare obiect în parte indicându-se identificatorul său (dacă este definit) și tipul (între paranteze rotunde), în secțiunea //Component Tree//. 
 + 
 +Pentru fiecare control grafic, atributele sale pot fi gestionate în secțiunea //​Properties//,​ fiind afișate toate proprietățile pe care le poate avea (proprii sau moștenite de la părinte), împreună cu valorile pe care le poate lua, utilizatorul putând alege dintre acestea.
  
 {{ :​laboratoare:​laborator03:​eclipse_graphical_layout.png?​nolink&​650 }} {{ :​laboratoare:​laborator03:​eclipse_graphical_layout.png?​nolink&​650 }}
  
-Utilitarul ​vizual poate fi accesat din panoul //Graphical Layout//, putând fi specificate (prin selecția dintr-o listă) dispozitivul mobil pentru care se proiectează interfața grafică, orientarea ecranului (precum și alte moduri în care se poate găsi acesta), tema aplicației (stilul folosit), activitatea căreia îî este asociat, localizarea precum și nivelul de API.+În **Eclipse**,​ utilitarul ​vizual poate fi accesat din panoul //Graphical Layout//, putând fi specificate (prin selecția dintr-o listă) dispozitivul mobil pentru care se proiectează interfața grafică, orientarea ecranului (precum și alte moduri în care se poate găsi acesta), tema aplicației (stilul folosit), activitatea căreia îî este asociat, localizarea precum și nivelul de API.
  
 În cadrul bibliotecii de controale, organizarea elementelor grafice se face prin împărțirea lor în mai multe categorii: În cadrul bibliotecii de controale, organizarea elementelor grafice se face prin împărțirea lor în mai multe categorii:
Line 75: Line 92:
   android:​paddingRight="​@dimen/​activity_horizontal_margin"​   android:​paddingRight="​@dimen/​activity_horizontal_margin"​
   android:​paddingTop="​@dimen/​activity_vertical_margin"​   android:​paddingTop="​@dimen/​activity_vertical_margin"​
-  tools:​context="​ro.pub.cs.systems.pdsd.lab03.examples.layoutsample1.LayoutSample1Activity"​ >+  tools:​context="​ro.pub.cs.systems.eim.lab03.examples.layoutsample1.LayoutSample1Activity"​ >
  
   <​EditText   <​EditText
Line 211: Line 228:
 |< 100% 25% 20% 55% >| |< 100% 25% 20% 55% >|
 ^       ​**ATRIBUT** ​      ​^ ​ **TIP OBIECT** ​ ^                                **DESCRIERE** ​                                      ^ ^       ​**ATRIBUT** ​      ​^ ​ **TIP OBIECT** ​ ^                                **DESCRIERE** ​                                      ^
-| ''​layout_width'' ​       | View / ViewGroup | lățimea obiectului ​                                                                | +| ''​layout_width'' ​       | ''​View'' ​''​ViewGroup'' ​| lățimea obiectului ​                                                                | 
-| ''​layout_height'' ​      | View / ViewGroup | înălțimea obiectului ​                                                              | +| ''​layout_height'' ​      ​| ​''​View'' ​''​ViewGroup'' ​| înălțimea obiectului ​                                                              | 
-| ''​layout_marginTop'' ​   | View / ViewGroup | spațiu suplimentar ce trebuie alocat în partea de sus a obiectului ​                | +| ''​layout_marginTop'' ​   | ''​View'' ​''​ViewGroup'' ​| spațiu suplimentar ce trebuie alocat în partea de sus a obiectului ​                | 
-| ''​layout_marginBottom''​ | View / ViewGroup | spațiu suplimentar ce trebuie alocat în partea de jos a obiectului ​                | +| ''​layout_marginBottom''​ | ''​View'' ​''​ViewGroup'' ​| spațiu suplimentar ce trebuie alocat în partea de jos a obiectului ​                | 
-| ''​layout_marginLeft'' ​  | View / ViewGroup | spațiu suplimentar ce trebuie alocat în partea din stânga a obiectului ​            | +| ''​layout_marginLeft'' ​  ​| ​''​View'' ​''​ViewGroup'' ​| spațiu suplimentar ce trebuie alocat în partea din stânga a obiectului ​            | 
-| ''​layout_marginRight'' ​ | View / ViewGroup | spațiu suplimentar ce trebuie alocat în partea din dreapta a obiectului ​           | +| ''​layout_marginRight'' ​ | ''​View'' ​''​ViewGroup'' ​| spațiu suplimentar ce trebuie alocat în partea din dreapta a obiectului ​           | 
-| ''​layout_gravity'' ​     | View             | modul de poziționare a elementelor componente în cadrul unui container ​            | +| ''​layout_gravity'' ​     | ''​View'' ​            | modul de poziționare a elementelor componente în cadrul unui container ​            | 
-| ''​layout_weight'' ​      | View             | proporția pe care o are controlul, raportată la întregul conținut al containerului | +| ''​layout_weight'' ​      ​| ​''​View'' ​            | proporția pe care o are controlul, raportată la întregul conținut al containerului | 
-| ''​layout_x'' ​           | View / ViewGroup | poziția pe coordonata x                                                            | +| ''​layout_x'' ​           | ''​View'' ​''​ViewGroup'' ​| poziția pe coordonata x                                                            | 
-| ''​layout_y'' ​           | View / ViewGroup | poziția pe coordonata y                                                             |+| ''​layout_y'' ​           | ''​View'' ​''​ViewGroup'' ​| poziția pe coordonata y                                                             |
 Unele dintre aceste proprietăți pot fi specificate și pentru containerele în care sunt cuprinse controalele,​ derivate din clasa ''​android.view.ViewGroup''​. Unele dintre aceste proprietăți pot fi specificate și pentru containerele în care sunt cuprinse controalele,​ derivate din clasa ''​android.view.ViewGroup''​.
  
Line 325: Line 342:
 AutoCompleteTextView coursesAutoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.courses_auto_complete_text_view);​ AutoCompleteTextView coursesAutoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.courses_auto_complete_text_view);​
  
-String[] suggestions = {"​vlsi",​ "pdsd", "​ts",​ "​std",​ "​so2",​ "​idp",​ "​ia",​ "​scad",​ "​pw",​ "​ecom"​};​+String[] suggestions = {"​vlsi",​ "eim", "​ts",​ "​std",​ "​so2",​ "​idp",​ "​ia",​ "​scad",​ "​pw",​ "​ecom"​};​
 ArrayAdapter<​String>​ coursesArrayAdapter = new ArrayAdapter<​String>​(this,​ android.R.layout.simple_dropdown_item_1line,​ suggestions);​ ArrayAdapter<​String>​ coursesArrayAdapter = new ArrayAdapter<​String>​(this,​ android.R.layout.simple_dropdown_item_1line,​ suggestions);​
  
Line 649: Line 666:
 ==== Alte Tipuri de Controale Grafice ==== ==== Alte Tipuri de Controale Grafice ====
  
-{{ :​laboratoare:​laborator03:​other_control_samples.png?​nolink&​300 }}+{{ :​laboratoare:​laborator03:​other_controls_samples.png?​nolink&​300 }}
  
 === NumberPicker === === NumberPicker ===
Line 841: Line 858:
 </​code>​ </​code>​
  
-{{ :​laboratoare:​laborator03:​table_layout_sample.png?​nolink&​600 }}+{{ :​laboratoare:​laborator03:​table_layout_sample.png?​nolink&​300 }}
  
 ==== GridLayout ==== ==== GridLayout ====
Line 896: Line 913:
 ===== Activitate de Laborator ===== ===== Activitate de Laborator =====
  
 +Se dorește implementarea unei aplicații Android, conținând o singură activitate, care să ofere utilizatorilor funcționalitatea necesară pentru formarea unui număr de telefon (PhoneDialer).
  
-{{ :​laboratoare:​laborator03:​phone_dialer_portrait.png?​nolink&​300 }}+{{ :​laboratoare:​laborator03:​phonedialer_portrait.png?​nolink&​300 }}
  
-{{ :​laboratoare:​laborator03:​phone_dialer_landscape.png?​nolink&​600 }}+**1.** În contul Github personal, să se creeze un depozit denumit '​Laborator03'​. Acesta trebuie să conțină unui fișier ''​README.md'',​ un fișier ''​.gitignore''​ specific unei aplicații Android și un fișier ''​LICENSE''​ care să descrie condițiile pentru utilizarea aplicației.
  
-{{ :​laboratoare:​laborator03:​github01.png?​nolink&​300 }}+{{ :​laboratoare:​laborator03:​github01.png?​nolink&​500 }}
  
-{{ :​laboratoare:​laborator03:​github02.png?​nolink&​300 }}+{{ :​laboratoare:​laborator03:​github02.png?​nolink&​500 }}
  
-{{ :laboratoare:laborator03:​eclipse01.png?​nolink&​300 }}+**2.** Să se cloneze într-un director de pe discul local conținutul depozitului la distanță astfel creat. În urma acestei operații, directorul Laborator03 va trebui să se conțină fișierele ''​README.md'',​ ''​.gitignore''​ care indică tipurile de fișiere (extensiile) ignorate și ''​LICENSE''​. <​code>​ 
 +student@eim2016:~$ git clone https://​www.github.com/​perfectstudent/​Laborator03 
 +</​code>​
  
-{{ :​laboratoare:​laborator03:​eclipse02.png?​nolink&​300 }}+**3.** În directorul Laborator03 de pe discul local, să se creeze un proiect Eclipse denumit //​PhoneDialer//​ (se selectează //File// → //New// → //​Project//,​ iar apoi //Android Application Project//).
  
-{{ :​laboratoare:​laborator03:​eclipse03.png?​nolink&​300 }}+{{ :​laboratoare:​laborator03:​eclipse01.png?​nolink&​400 }}
  
-{{ :laboratoare:laborator03:eclipse04.png?​nolink&​300 }}+Se indică detaliile proiectului: 
 +  * **Application Name** - //Phone Dialer// 
 +  * **Project Name** - //​PhoneDialer//​ 
 +  * **Package Name** - ''​ro.pub.cs.systems.eim.lab03.phonedialer''​ 
 +  * **Minimum Required SDK** - API 16Android 4.1 (Jelly Bean) 
 +  * **Target SDK** - API 16: Android 4.1 (Jelly Bean) 
 +  * **Compile With** - API 16Android 4.1 (Jelly Bean) 
 +  * **Theme** - Holo Light with Dark Action Bar
  
-{{ :​laboratoare:​laborator03:​eclipse05.png?​nolink&​300 }}+{{ :​laboratoare:​laborator03:​eclipse02.png?​nolink&​400 }}
  
-{{ :laboratoare:​laborator03:​eclipse06.png?​nolink&​300 }}+Vor fi precizate și alte detalii legate de configurare:
  
-{{ :laboratoare:​laborator03:​eclipse07.png?​nolink&​300 }}+Procesul de configurare a proiectului implică și precizarea următoarelor informații: 
 +  * necesitatea de a se crea o pictogramă implicită pentru aplicația aferentă proiectului;​ 
 +  * necesitatea de a se crea o activitate (corespunzătoare unei ferestre a aplicației aferente proiectului);​ 
 +  * caracterul de bibliotecă al proiectului;​ 
 +  * locația la care va fi plasat proiectul (în spațiul de lucru sau nu); 
 +  * atașarea proiectului la o zonă de lucru
  
-{{ :​laboratoare:​laborator03:​eclipse08.png?​nolink&​300 }}+{{ :​laboratoare:​laborator03:​eclipse03.png?​nolink&​400 }}
  
-  - Să se creeze o fereastră (activitate) care să aibă următoarea structură {{ :​laboratoare:​lab03-activitatedelaborator.jpg?nolink }} +În privința pictogramei asociate proiectului Android, ​se păstrează configurația implicită
-  ​- Să se insereze spații între butoane. + 
-  - Să se mărească dimensiunile butoanelorfolosind o valoare absolută, menținând ​textul din cadrul acestora centrat+{{ :​laboratoare:​laborator03:​eclipse04.png?​nolink&​400 }} 
-  Să se adauge un eveniment pe primul buton astfel încât la apăsare, ​acesta să primească o altă culoare+ 
-  ​Să se modifice ​evenimentul ​astfel încât butonul ​să dispară+Se creează o activitate care inițial nu va conține nimic: 
-  - Să se trateze pentru toate butoanele evenimentul de apăsareastfel încât pe ecran să se afișeze textul butonului ​care a fost apăsat cel mai recent.+ 
 +{{ :​laboratoare:​laborator03:​eclipse05.png?nolink&​400 ​}} 
 + 
 +pentru care se precizează:​ 
 + 
 +  ​* denumirea activității ​- ''​PhoneDialerActivity'';​ 
 +  ​* denumirea fișierului XML din ''​res/​layout''​ în care va fi construită interfața grafică ​''​activity_phone_dialer''​. 
 + 
 +{{ :​laboratoare:​laborator03:​eclipse06.png?​nolink&​400 }} 
 + 
 +**4.** În fișierul ''​activity_phone_dialer''​ din directorul ''​res/​layout''​ se construiește interfața grafică folosind: 
 +  * editorul vizual (//​Graphical Layout//) 
 +  * editorul XML (manual) 
 + 
 +Aceasta va conține: 
 +  * un obiect de tip ''​EditText'',​ care nu poate fi editat manual de utilizator, în care se va afișa numărul de telefon; 
 +  * 10 obiecte de tip ''​Button''​ corespunzătoare celor 10 cifre (0..9); 
 +  * 2 obiecte de tip ''​Button''​ corespunzătoare caracterelor speciale ''​*''​ și ''#'';​ 
 +  * un obiect de tip ''​ImageButton''​ pentru operaţia de editare a numărului de telefonprin revenirea la caracterul anterior, în cazul în care s-a greșit; 
 +  * 2 obiecte de tip ''​ImageButton''​ pentru operaţiile de formare a numărului de telefonrespectiv de închidere. 
 + 
 +Se pot folosi următoarea arhivă conținând ​resursele grafice necesare: {{ :​laboratoare:​laborator03:​graphical_resources.zip }}
 + 
 +Pentru dispunerea controalelor în cadrul interfeței grafice se va folosi un mecanism de tip ''​LinearLayout''​ cu orientare verticală, iar tastatura virtuală va fi realizată printr-un obiect de tip ''​GridLayout''​ cu 6 linii și 3 coloane. 
 + 
 +**5.** În clasa ''​PhoneDialerActivity''​ din pachetul ''​ro.pub.cs.systems.eim.lab03.phonedialer'',​ să se implementeze o clasă ascultător pentru tratarea evenimentelor de tip apăsare ​de buton. 
 +  * pentru butoanele ce conțin cifre sau caracterele ''​*''​ / ''#''​se va adăuga simbolul corespunzător la numărul de telefon care se dorește format; 
 +  * pentru butonul de corecție, se va șterge ultimul caracter (în cazul în care numărul de telefon nu este vid); 
 +  * pentru butonul de apel, se va invoca intenția care realizează legătura telefonică <code java> 
 +Intent intent = new Intent(Intent.ACTION_CALL);​ 
 +intent.setData(Uri.parse("​tel:"​+phoneNumber));​ 
 +startActivity(intent);​ 
 +</​code>​ 
 +  ​* pentru butonul de oprire, se va închide activitatea (se va apela metoda ''​finish()''​);​ 
 + 
 +<note tip>Se va defini o clasă internă cu nume, ce implementează interfața ''​View.OnClickListener''​ (implementează metoda ''​public void onClick(View view)''​. Instanța acesteia va fi utilizată pentru **toate** obiectele de tip buton din cadrul interfeței grafice.</​note>​ 
 + 
 +**6.** ​Să se gestioneze corespunzător ​evenimentul ​de tip rotire a ecranului;​ 
 +  - să se blocheze tranziția între modurile portrait și landscape:​ 
 +    - în fișierul AndroidManifest.xml <code xml> 
 +<​manifest ...> 
 +  ​<​application ... > 
 +    <​activity ... 
 +      android:​screenOrientation="​portrait"​  
 +      ... /> 
 +       
 +    <!-- ... --> 
 +  </​application>​ 
 +</​manifest>​ 
 +</​code>​ 
 +    - programatic <code java> 
 +@Override 
 +protected void onCreate(Bundle onCreateInstanceState) { 
 +  super.onCreate(onCreateInstanceState);​ 
 +  setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);​ 
 +  // .. 
 +
 +</​code>​ 
 +  - să se definească, în directorul ''​res/​layout-land''​ o interfață grafică adecvată acestei configurații a dispozitivului de afișare: 
 + 
 +{{ :​laboratoare:​laborator03:​phonedialer_landscape.png?​nolink&​600 }} 
 + 
 +În Eclipse Mars 1 (4.5.1), ​se creează un nou subdirector ''​layout-land''​ în directorul ''​res''​ (din meniul contextual ​afișat cu right click, se selectează //New// → //Folder//, indicându-se locația la care se dorește să fie plasat și denumirea sa): 
 + 
 +{{ :​laboratoare:​laborator03:​eclipse07.png?​nolink&​400 }} 
 + 
 +{{ :​laboratoare:​laborator03:​eclipse08.png?​nolink&​400 }} 
 + 
 +Ulterior se copiază conținutul fișierului ''​activity_phone.dialer.xml''​ prin operații de tip copy-paste și se realizează modificările necesare. 
 + 
 +**7.** ​ Să se încarce modificările realizate în cadrul depozitului '​Laborator03'​ de pe contul Github personal, folosind un mesaj sugestiv. <​code>​ 
 +student@eim2016:​~/​Laborator03$ git add PhoneDialer/​* 
 +student@eim2016:​~/​Laborator03$ git commit -m "​implemented taks for laboratory 03" 
 +student@eim2016:​~/​Laborator03$ git push origin master 
 +</​code>​
  
 ===== Resurse Utile ===== ===== Resurse Utile =====
  
 +[[https://​github.com/​pdsd2015/​Laborator03/​tree/​master/​samples|Cod Sursă Exemple]]\\ ​
 [[http://​ptgmedia.pearsoncmg.com/​images/​9780321940261/​samplepages/​0321940261.pdf|Joseph ANNUZZI, Jr, Lauren DARCEY, Shane CONDER, Introduction to Android Application Development - Developer'​s Library, 4th Edition, Addison-Wesley,​ 2013]] - capitolele 7, 8\\  [[http://​ptgmedia.pearsoncmg.com/​images/​9780321940261/​samplepages/​0321940261.pdf|Joseph ANNUZZI, Jr, Lauren DARCEY, Shane CONDER, Introduction to Android Application Development - Developer'​s Library, 4th Edition, Addison-Wesley,​ 2013]] - capitolele 7, 8\\ 
 [[http://​www.bignerdranch.com/​we-write/​android-programming/​|Bill PHILLIPS, Brian HARDY, Android Programming. The Big Nerd Ranch Guide, Pearson Technology Group, 2013]] - capitolul 8\\  [[http://​www.bignerdranch.com/​we-write/​android-programming/​|Bill PHILLIPS, Brian HARDY, Android Programming. The Big Nerd Ranch Guide, Pearson Technology Group, 2013]] - capitolul 8\\ 
laboratoare/laborator03.1425885903.txt.gz · Last modified: 2017/02/20 20:44 (external edit)
CC Attribution-Share Alike 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0