Differences
This shows you the differences between two versions of the page.
|
eim:laboratoare:laborator03 [2020/03/02 00:01] vlad_andrei.badoiu [Controale de tip buton] |
eim:laboratoare:laborator03 [2020/03/04 20:54] (current) andrei.bolojan Change mimumum API level when creating project |
||
|---|---|---|---|
| Line 51: | Line 51: | ||
| Astfel, 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. | Astfel, 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. | ||
| + | <spoiler> | ||
| Î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: | ||
| * forme de bază (//Widgets//); | * forme de bază (//Widgets//); | ||
| Line 126: | Line 127: | ||
| Elementele interfeței grafice sunt caracterizate prin anumite proprietăți, cum ar fi poziționarea, dimensiunile, conținutul pe care îl afișează, tipurile de date acceptate de la utilizator, informațiile ajutătoare. Fiecare parametru va fi indicat prin sintaxa ''android:proprietate="valoare"'' unde ''proprietate'' și ''valoare'' trebuie să respecte restricțiile definite în clasa ce descrie controlul respectiv. | Elementele interfeței grafice sunt caracterizate prin anumite proprietăți, cum ar fi poziționarea, dimensiunile, conținutul pe care îl afișează, tipurile de date acceptate de la utilizator, informațiile ajutătoare. Fiecare parametru va fi indicat prin sintaxa ''android:proprietate="valoare"'' unde ''proprietate'' și ''valoare'' trebuie să respecte restricțiile definite în clasa ce descrie controlul respectiv. | ||
| + | </spoiler> | ||
| ==== Dezvoltarea programatică a unei interfețe grafice ==== | ==== Dezvoltarea programatică a unei interfețe grafice ==== | ||
| O interfață grafică poate fi definită și în codul sursă, într-un mod similar. Se creează inițial un obiect container (de tip ''Layout'', derivat din ''android.view.ViewGroup'') care va cuprinde toate controalele, acesta fiind argumentul cu care va fi apelată metoda ''setContentView()''. | O interfață grafică poate fi definită și în codul sursă, într-un mod similar. Se creează inițial un obiect container (de tip ''Layout'', derivat din ''android.view.ViewGroup'') care va cuprinde toate controalele, acesta fiind argumentul cu care va fi apelată metoda ''setContentView()''. | ||
| + | <spoiler> | ||
| Pentru fiecare control vor fi specificate (manual, prin apelul metodei corespunzătoare) diferitele caracteristici, asociindu-i-se și un identificator (uzual, acesta poate fi orice număr întreg). Pentru fiecare proprietate a unui control grafic, sunt definite programatic metodele de tip getter și setter corespunzătoare. | Pentru fiecare control vor fi specificate (manual, prin apelul metodei corespunzătoare) diferitele caracteristici, asociindu-i-se și un identificator (uzual, acesta poate fi orice număr întreg). Pentru fiecare proprietate a unui control grafic, sunt definite programatic metodele de tip getter și setter corespunzătoare. | ||
| Line 207: | Line 209: | ||
| } | } | ||
| </file> | </file> | ||
| + | </spoiler> | ||
| ===== Controale în Android (widget-uri) ===== | ===== Controale în Android (widget-uri) ===== | ||
| Line 470: | Line 472: | ||
| * programatic, folosind una din metodele | * programatic, folosind una din metodele | ||
| * ''setImageResource()'', care primește ca parametru identificatorul resursei din clasa ''R.drawable'' | * ''setImageResource()'', care primește ca parametru identificatorul resursei din clasa ''R.drawable'' | ||
| - | * ''setImageBitmap()'', ce primește un parametru de tip ''Bitmap'' încărcat din resursa respectivă, ulterior putând fi realizate și unele modificări <code java> | + | * ''setImageBitmap()'', ce primește un parametru de tip ''Bitmap'' încărcat din resursa respectivă, ulterior putând fi realizate și unele modificări |
| + | <spoiler> | ||
| + | <code java> | ||
| ImageView someImageView = (ImageView)findViewById(R.id.some_image_view); | ImageView someImageView = (ImageView)findViewById(R.id.some_image_view); | ||
| Bitmap someBitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.some_image); | Bitmap someBitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.some_image); | ||
| Line 485: | Line 489: | ||
| Pentru un astfel de obiect pot fi precizate parametrii precum lățimea și înălțimea maximă (''maxWidth'', respectiv ''maxHeight''), precum și mecanismul folosit pentru scalarea conținutului în situația în care suprafața pe care se realizează afișarea este diferită de dimensiunile reale ale resursei (''scaleType''). | Pentru un astfel de obiect pot fi precizate parametrii precum lățimea și înălțimea maximă (''maxWidth'', respectiv ''maxHeight''), precum și mecanismul folosit pentru scalarea conținutului în situația în care suprafața pe care se realizează afișarea este diferită de dimensiunile reale ale resursei (''scaleType''). | ||
| + | </spoiler> | ||
| === VideoView === | === VideoView === | ||
| Controlul de tip ''VideoView'' este utilizat pentru redarea de conținut video, într-unul din formatele ''H.263'', ''H.264 AVC'', ''MPEG-4 SP'' sau ''VP8''. | Controlul de tip ''VideoView'' este utilizat pentru redarea de conținut video, într-unul din formatele ''H.263'', ''H.264 AVC'', ''MPEG-4 SP'' sau ''VP8''. | ||
| + | <spoiler> | ||
| Conținutul acestui control poate fi specificat prin una din metodele ''setVideoPath(String)'' sau ''setVideoUri(Uri)'', prin care se indică locația unui fișier stocat pe dispozitiv sau aflat la distanță, pe un server. | Conținutul acestui control poate fi specificat prin una din metodele ''setVideoPath(String)'' sau ''setVideoUri(Uri)'', prin care se indică locația unui fișier stocat pe dispozitiv sau aflat la distanță, pe un server. | ||
| Line 536: | Line 541: | ||
| Controalele obiectului ''MediaController'' pot fi afișate sau nu prin metodele ''show(int timeout)'' respectiv ''hide()''. | Controalele obiectului ''MediaController'' pot fi afișate sau nu prin metodele ''show(int timeout)'' respectiv ''hide()''. | ||
| + | |||
| + | </spoiler> | ||
| <spoiler Controale pentru gestiunea datei calendaristice și a timpului -- facultativ> | <spoiler Controale pentru gestiunea datei calendaristice și a timpului -- facultativ> | ||
| Line 689: | Line 696: | ||
| </spoiler> | </spoiler> | ||
| - | === Mecanisme pentru dispunerea controalelor (layout) -- obligatoriu === | + | ==== Mecanisme pentru dispunerea controalelor (layout) -- obligatoriu ==== |
| Controalele Android fac parte din cadrul unui grup (obiect de tip ''android.view.ViewGroup'') care definește și modul în care acestea sunt dispuse în cadrul interfeței grafice precum și dimensiunile pe care le pot lua, motiv pentru care o astfel de componentă este referită și sub denumirea de layout. Acest element nu vizează însă tratarea evenimentelor legate de interacțiunea cu utilizatorul. | Controalele Android fac parte din cadrul unui grup (obiect de tip ''android.view.ViewGroup'') care definește și modul în care acestea sunt dispuse în cadrul interfeței grafice precum și dimensiunile pe care le pot lua, motiv pentru care o astfel de componentă este referită și sub denumirea de layout. Acest element nu vizează însă tratarea evenimentelor legate de interacțiunea cu utilizatorul. | ||
| Line 727: | Line 734: | ||
| * ''background'' poate specifica o culoare sau o imagine care vor fi afișate pe fundal; | * ''background'' poate specifica o culoare sau o imagine care vor fi afișate pe fundal; | ||
| * ''textColor'' indică culoarea textului în format ''#rrggbb'' (sau ''#aarrggbb''), putând fi referită și o culoare definită anterior într-un fișier ''colors.xml'' (sau cu orice altă denumire) din directorul ''/res/values'' în care elementul rădăcină este ''<resources>'' (elementele de aici fiind referite prin ''@color/...''). | * ''textColor'' indică culoarea textului în format ''#rrggbb'' (sau ''#aarrggbb''), putând fi referită și o culoare definită anterior într-un fișier ''colors.xml'' (sau cu orice altă denumire) din directorul ''/res/values'' în care elementul rădăcină este ''<resources>'' (elementele de aici fiind referite prin ''@color/...''). | ||
| - | |||
| ==== LinearLayout (obligatoriu) ==== | ==== LinearLayout (obligatoriu) ==== | ||
| Line 733: | Line 739: | ||
| În cadrul unui grup de tip ''LinearLayout'', componentele sunt dispuse fie pe orizontală, fie pe verticală, în funcție de proprietatea ''orientation'' (putând lua valorile ''horizontal'' - implicită sau ''vertical''). | În cadrul unui grup de tip ''LinearLayout'', componentele sunt dispuse fie pe orizontală, fie pe verticală, în funcție de proprietatea ''orientation'' (putând lua valorile ''horizontal'' - implicită sau ''vertical''). | ||
| + | <spoiler> | ||
| <code xml> | <code xml> | ||
| <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" | <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" | ||
| Line 753: | Line 760: | ||
| {{ :eim:laboratoare:laborator03:linear_layout_vertical_sample.png?nolink&300 }} | {{ :eim:laboratoare:laborator03:linear_layout_vertical_sample.png?nolink&300 }} | ||
| + | </spoiler> | ||
| ==== AbsoluteLayout ==== | ==== AbsoluteLayout ==== | ||
| Line 777: | Line 784: | ||
| ''FrameLayout'' reprezintă o strategie de poziționare folosită pentru afișarea unei singure componente la un moment dat. Totuși, aceasta poate fi populată cu mai multe elemente grafice, recomandându-se ca doar una singură să fie vizibilă. Vizibilitatea poate fi specificată în fișierul XML prin proprietatea ''android:visibility'' care poate lua valorile ''visible'' sau ''gone'', respectiv programatic, folosind metoda ''setVisibility()'' ce primește ca parametru constantele ''View.VISIBLE'' sau ''View.GONE''. De regulă, afișarea unei componente este realizată în mod dinamic, ca rezultat al unei metode de tratare a unui eveniment. | ''FrameLayout'' reprezintă o strategie de poziționare folosită pentru afișarea unei singure componente la un moment dat. Totuși, aceasta poate fi populată cu mai multe elemente grafice, recomandându-se ca doar una singură să fie vizibilă. Vizibilitatea poate fi specificată în fișierul XML prin proprietatea ''android:visibility'' care poate lua valorile ''visible'' sau ''gone'', respectiv programatic, folosind metoda ''setVisibility()'' ce primește ca parametru constantele ''View.VISIBLE'' sau ''View.GONE''. De regulă, afișarea unei componente este realizată în mod dinamic, ca rezultat al unei metode de tratare a unui eveniment. | ||
| + | <spoiler> | ||
| <note tip>Dimensiunea obiectului de tip ''FrameLayout'' ar trebui să fie preluată de la controlul cel mai voluminos, riscându-se altfel ca pe măsură ce se afișează elemente de dimensiuni mai mari, acestea să nu fie vizibile în totalitate. În acest scop, se va folosi proprietatea XML ''android:measureAllChildren="true"'' sau se va apela metoda ''setMeasureAllChildren(true)'', astfel încât să se realizeze redimensionarea continer-ului la toate elementele conținute, nu doar la cele vizibile la un moment dat.</note> | <note tip>Dimensiunea obiectului de tip ''FrameLayout'' ar trebui să fie preluată de la controlul cel mai voluminos, riscându-se altfel ca pe măsură ce se afișează elemente de dimensiuni mai mari, acestea să nu fie vizibile în totalitate. În acest scop, se va folosi proprietatea XML ''android:measureAllChildren="true"'' sau se va apela metoda ''setMeasureAllChildren(true)'', astfel încât să se realizeze redimensionarea continer-ului la toate elementele conținute, nu doar la cele vizibile la un moment dat.</note> | ||
| Line 788: | Line 796: | ||
| {{ :eim:laboratoare:laborator03:frame_layout_sample.png?nolink&300 }} | {{ :eim:laboratoare:laborator03:frame_layout_sample.png?nolink&300 }} | ||
| + | </spoiler> | ||
| ==== TableLayout ==== | ==== TableLayout ==== | ||
| Line 869: | Line 877: | ||
| Layout-ul de tip ''GridLayout'' este utilizat tot pentru dispunerea componentelor într-un format tabelar, folosind însă o sintaxă mult mai flexibilă. Totodată, acest mecanism este și mult mai eficient din punctul de vedere al randării. | Layout-ul de tip ''GridLayout'' este utilizat tot pentru dispunerea componentelor într-un format tabelar, folosind însă o sintaxă mult mai flexibilă. Totodată, acest mecanism este și mult mai eficient din punctul de vedere al randării. | ||
| + | <spoiler> | ||
| Astfel, pentru specificarea numărului de rânduri și de coloane se vor utiliza proprietățile ''rowCount'' și ''columnCount'', indicându-se pentru fiecare element grafic în parte poziția la care va fi plasat, prin atributele ''layout_row'' și ''layout_column''. În cazul în care pentru o componentă grafică nu se specifică linia sau coloana din care face parte, atributul ''orientation'' (având va valori posibile ''horizontal'' sau ''vertical'' indică dacă elementul următor va fi plasat pe linia sau pe coloana succesivă). | Astfel, pentru specificarea numărului de rânduri și de coloane se vor utiliza proprietățile ''rowCount'' și ''columnCount'', indicându-se pentru fiecare element grafic în parte poziția la care va fi plasat, prin atributele ''layout_row'' și ''layout_column''. În cazul în care pentru o componentă grafică nu se specifică linia sau coloana din care face parte, atributul ''orientation'' (având va valori posibile ''horizontal'' sau ''vertical'' indică dacă elementul următor va fi plasat pe linia sau pe coloana succesivă). | ||
| Line 878: | Line 887: | ||
| {{ :eim:laboratoare:laborator03:grid_layout_sample.png?nolink&600 }} | {{ :eim:laboratoare:laborator03:grid_layout_sample.png?nolink&600 }} | ||
| + | </spoiler> | ||
| ==== ScrollView ==== | ==== ScrollView ==== | ||
| Line 885: | Line 894: | ||
| ===== Adaptarea interfeței grafice în funcție de orientarea ecranului ===== | ===== Adaptarea interfeței grafice în funcție de orientarea ecranului ===== | ||
| - | Dispozitivele Android suportă două moduri de orientare a ecranului: ''portrait'' și ''landscape''. În momentul în care se produce o modificare a orientării dispozitivului de afișare, activitatea care rulează în mod curent este distrusă și apoi recreată. Aplicațiile trebuie să gestioneze astfel de situații, adaptând interfața grafică în funcție de suprafața de care dispun. În acest scop, poate fi adoptată una din următoarele abordări: | + | Dispozitivele Android suportă două moduri de orientare a ecranului: ''portrait'' și ''landscape''. În momentul în care se produce o modificare a orientării dispozitivului de afișare, activitatea care rulează în mod curent este distrusă și apoi recreată. Aplicațiile trebuie să gestioneze astfel de situații, adaptând interfața grafică în funcție de suprafața de care dispun. |
| + | |||
| + | <spoiler> | ||
| + | În acest scop, poate fi adoptată una din următoarele abordări: | ||
| - **ancorarea** elementelor grafice (de regulă, de cele patru colțuri ale ecranului), folosind o dispunere de tip ''RelativeLayout'' împreună cu o combinație a proprietăților ''layout_alignParentTop'', ''layout_alignParentBottom'', ''layout_alignParentLeft'', ''layout_alignParentRight'', ''layout_centerHorizontal'', ''layout_centerVertical'' | - **ancorarea** elementelor grafice (de regulă, de cele patru colțuri ale ecranului), folosind o dispunere de tip ''RelativeLayout'' împreună cu o combinație a proprietăților ''layout_alignParentTop'', ''layout_alignParentBottom'', ''layout_alignParentLeft'', ''layout_alignParentRight'', ''layout_centerHorizontal'', ''layout_centerVertical'' | ||
| - **redimensionarea și repoziționarea** | - **redimensionarea și repoziționarea** | ||
| Line 915: | Line 927: | ||
| Pentru optimizarea unei interfețe grafice pot fi utilizate și alte utilitare cum ar fi //Hierarchy View// sau [[http://developer.android.com/tools/debugging/improving-w-lint.html|Lint]]. | Pentru optimizarea unei interfețe grafice pot fi utilizate și alte utilitare cum ar fi //Hierarchy View// sau [[http://developer.android.com/tools/debugging/improving-w-lint.html|Lint]]. | ||
| + | </spoiler> | ||
| ===== Activitate de Laborator ===== | ===== Activitate de Laborator ===== | ||
| Line 943: | Line 955: | ||
| {{ :eim:laboratoare:laborator03:androidstudio02.png?nolink&600 }} | {{ :eim:laboratoare:laborator03:androidstudio02.png?nolink&600 }} | ||
| - | Se indică platforma pentru care se dezvoltă aplicația Android (se bifează doar //Phone and Tablet//), iar SDK-ul Android (minim) pentru care se garantează funcționarea este API 16 (Jelly Bean, 4.1). | + | Se indică platforma pentru care se dezvoltă aplicația Android (se bifează doar //Phone and Tablet//), iar SDK-ul Android (minim) pentru care se garantează funcționarea este API 24 (Nougat, 7.0). |
| {{ :eim:laboratoare:laborator03:androidstudio03.png?nolink&600 }} | {{ :eim:laboratoare:laborator03:androidstudio03.png?nolink&600 }} | ||
