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 [2015/03/10 13:41] (current)
Andrei Roșu-Cojocaru [Resurse Utile]
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 211: Line 211:
 |< 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 649: Line 649:
 ==== 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 841:
 </​code>​ </​code>​
  
-{{ :​laboratoare:​laborator03:​table_layout_sample.png?​nolink&​600 }}+{{ :​laboratoare:​laborator03:​table_layout_sample.png?​nolink&​300 }}
  
 ==== GridLayout ==== ==== GridLayout ====
Line 896: Line 896:
 ===== 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:​phone_dialer_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@pdsd2015:~$ 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.pdsd.lab03.phonedialer''​ 
 +  * **Minimum Required SDK** - API 16: Android 4.1 (Jelly Bean) 
 +  * **Target SDK** - API 16: Android 4.1 (Jelly Bean) 
 +  * **Compile With** - API 16: Android 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 butoanelor, folosind 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ăsare, astfel î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 telefon, prin 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 telefon, respectiv 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.pdsd.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:​phone_dialer_landscape.png?​nolink&​600 }} 
 + 
 +În Eclipse Luna SR1a (4.4.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@pdsd2015:​~/​Laborator03$ git add PhoneDialer/​* 
 +student@pdsd2015:​~/​Laborator03$ git commit -m "​implemented taks for laboratory 03" 
 +student@pdsd2015:​~/​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: 2015/03/09 09:25 by Andrei Roșu-Cojocaru
CC Attribution-Share Alike 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0