Differences
This shows you the differences between two versions of the page.
|
eim:laboratoare:laborator03 [2018/03/19 13:27] radu.stoenescu [Activitate de Laborator] |
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 272: | Line 274: | ||
| Controlul de tip ''TextView'' este utilizat pentru afișarea unui text către utilizator, fără ca acesta să aibă posibilitatea de a-l modifica. | Controlul de tip ''TextView'' este utilizat pentru afișarea unui text către utilizator, fără ca acesta să aibă posibilitatea de a-l modifica. | ||
| + | |||
| + | <spoiler> | ||
| Conținutul pe care îl afișează un obiect ''TextView'' este indicat de proprietatea ''text''. De regulă, acesta referă o constantă definită în resursa care conține șirurile de caractere utilizate în cadrul aplicației. Gestiunea acestui atribut poate fi realizată prin metodele getter și setter respective. | Conținutul pe care îl afișează un obiect ''TextView'' este indicat de proprietatea ''text''. De regulă, acesta referă o constantă definită în resursa care conține șirurile de caractere utilizate în cadrul aplicației. Gestiunea acestui atribut poate fi realizată prin metodele getter și setter respective. | ||
| Line 303: | Line 307: | ||
| În situația în care se dorește ca informația să fie afișată într-un mod care să o evidențieze, însă fără a permite utilizatorului să lanseze în execuție o altă activitate prin intermediul ei, se poate utiliza atributul ''linksClickable'' (având valoarea ''false''). | În situația în care se dorește ca informația să fie afișată într-un mod care să o evidențieze, însă fără a permite utilizatorului să lanseze în execuție o altă activitate prin intermediul ei, se poate utiliza atributul ''linksClickable'' (având valoarea ''false''). | ||
| + | |||
| + | </spoiler> | ||
| === EditText === | === EditText === | ||
| Line 308: | Line 314: | ||
| ''EditText'' este o componentă utilizată pentru obținerea unui text de la utilizator. Implementarea sa pornește de la obiectul de tip ''TextView'', astfel încât sunt moștenite toate proprietățile sale. | ''EditText'' este o componentă utilizată pentru obținerea unui text de la utilizator. Implementarea sa pornește de la obiectul de tip ''TextView'', astfel încât sunt moștenite toate proprietățile sale. | ||
| + | <spoiler> | ||
| În mod obișnuit, valoarea introdusă va fi afișată doar pe o linie. Dacă se dorește redimensionarea controlului pe măsură ce este introdus un text de dimensiuni mai mari, va trebui specificată proprietatea ''inputType="textMultiLine"''. De asemenea, se poate specifica explicit numărul de linii prin intermediul proprietății ''lines'' (în cazul în care aceasta nu este specificată, câmpul va fi redimensionat în mod automat pentru ca textul introdus să poată fi afișat; totuși indicarea acestui atribut este util pentru că impune o dimensiune fixă, utilizatorul având posibilitatea de a naviga în cadrul textului prin operația de derulare). | În mod obișnuit, valoarea introdusă va fi afișată doar pe o linie. Dacă se dorește redimensionarea controlului pe măsură ce este introdus un text de dimensiuni mai mari, va trebui specificată proprietatea ''inputType="textMultiLine"''. De asemenea, se poate specifica explicit numărul de linii prin intermediul proprietății ''lines'' (în cazul în care aceasta nu este specificată, câmpul va fi redimensionat în mod automat pentru ca textul introdus să poată fi afișat; totuși indicarea acestui atribut este util pentru că impune o dimensiune fixă, utilizatorul având posibilitatea de a naviga în cadrul textului prin operația de derulare). | ||
| Line 319: | Line 326: | ||
| Operația de tip apăsare lungă în cadrul unui control de tip ''EditText'' invocă meniul contextual, care oferă facilități pentru copierea unui text într-o / dintr-o zonă de memorie tampon (//eng.// copy-cut-paste), schimbarea mecanismului de introducere a textului, modificarea dicționarului ce conține cele mai frecvent folosite cuvinte. De asemenea, poate fi selectată (evidențiată) un fragment din textul respectiv (programatic, această funcționalitate poate fi obținută prin metodele ''setSelection()'' / ''selectAll()''). | Operația de tip apăsare lungă în cadrul unui control de tip ''EditText'' invocă meniul contextual, care oferă facilități pentru copierea unui text într-o / dintr-o zonă de memorie tampon (//eng.// copy-cut-paste), schimbarea mecanismului de introducere a textului, modificarea dicționarului ce conține cele mai frecvent folosite cuvinte. De asemenea, poate fi selectată (evidențiată) un fragment din textul respectiv (programatic, această funcționalitate poate fi obținută prin metodele ''setSelection()'' / ''selectAll()''). | ||
| + | |||
| + | </spoiler> | ||
| === AutoCompleteTextView === | === AutoCompleteTextView === | ||
| Line 324: | Line 333: | ||
| Controlul de tip ''AutoCompleteTextView'' indică utilizatorului anumite valori cu care poate fi completat, în funcție de conținutul pe care acesta îl are acesta la un moment dat, pe baza unei liste de sugestii. Momentul la care sistemul de operare va oferi o sugestie este controlat prin intermediul proprietății ''completionThreshold'', care indică numărul (minim) de caractere pe baza căruia se face potrivirea între șirul de caractere introdus de utilizator și valorile existente în lista de propuneri. Se poate afișa și un text sugestiv în cadrul listei de sugestii, prin proprietatea ''completionHint''. | Controlul de tip ''AutoCompleteTextView'' indică utilizatorului anumite valori cu care poate fi completat, în funcție de conținutul pe care acesta îl are acesta la un moment dat, pe baza unei liste de sugestii. Momentul la care sistemul de operare va oferi o sugestie este controlat prin intermediul proprietății ''completionThreshold'', care indică numărul (minim) de caractere pe baza căruia se face potrivirea între șirul de caractere introdus de utilizator și valorile existente în lista de propuneri. Se poate afișa și un text sugestiv în cadrul listei de sugestii, prin proprietatea ''completionHint''. | ||
| + | <spoiler> | ||
| <code java> | <code java> | ||
| AutoCompleteTextView coursesAutoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.courses_auto_complete_text_view); | AutoCompleteTextView coursesAutoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.courses_auto_complete_text_view); | ||
| Line 336: | Line 346: | ||
| <note>Un astfel de control nu constrânge utilizatorul să introducă doar valori din lista de sugestii, conținutul controlului grafic putând fi oarecare.</note> | <note>Un astfel de control nu constrânge utilizatorul să introducă doar valori din lista de sugestii, conținutul controlului grafic putând fi oarecare.</note> | ||
| + | |||
| + | </spoiler> | ||
| === MultiAutoCompleteTextView === | === MultiAutoCompleteTextView === | ||
| Line 351: | Line 363: | ||
| O componentă de tip buton ce are atașat un text este definită de clasa ''android.widget.Button'', fiind caracterizată prin proprietatea ''text'', ce conține mesajul pe care acesta îl va afișa. | O componentă de tip buton ce are atașat un text este definită de clasa ''android.widget.Button'', fiind caracterizată prin proprietatea ''text'', ce conține mesajul pe care acesta îl va afișa. | ||
| + | <spoiler> | ||
| <note tip>În clasa ''android.R.string'' sunt definite mai multe constante care pot fi utilizate ca etichete pentru butoane (//OK//, //Cancel//, //Yes//, //No//).</note> | <note tip>În clasa ''android.R.string'' sunt definite mai multe constante care pot fi utilizate ca etichete pentru butoane (//OK//, //Cancel//, //Yes//, //No//).</note> | ||
| Line 366: | Line 379: | ||
| <note tip>În cazul folosirii de clase interne, membrii din clasa părinte ce se doresc a fi accesați trebuie să aibă imutabili (trebuie declarate cu atributul ''final'').</note> | <note tip>În cazul folosirii de clase interne, membrii din clasa părinte ce se doresc a fi accesați trebuie să aibă imutabili (trebuie declarate cu atributul ''final'').</note> | ||
| + | </spoiler> | ||
| === ImageButton === | === ImageButton === | ||
| Line 371: | Line 385: | ||
| Un obiect de tip ''ImageButton'' (definit de clasa ''android.widget.ImageButton'') este utilizat pentru afişarea unei imagini, specificată în fişierul XML prin proprietatea ''android:src'' sau programatic prin intermediul metodei ''setImageResource()''. | Un obiect de tip ''ImageButton'' (definit de clasa ''android.widget.ImageButton'') este utilizat pentru afişarea unei imagini, specificată în fişierul XML prin proprietatea ''android:src'' sau programatic prin intermediul metodei ''setImageResource()''. | ||
| + | <spoiler> | ||
| <note tip>Imaginea asociată unui buton de tip ''ImageButton'' este o resursă din directorul ''/res/drawable/'' (accesibilă în XML prin adnotarea ''@drawable/'' sau programatic prin referinţa sa din clasa ''R.drawable''. </note> | <note tip>Imaginea asociată unui buton de tip ''ImageButton'' este o resursă din directorul ''/res/drawable/'' (accesibilă în XML prin adnotarea ''@drawable/'' sau programatic prin referinţa sa din clasa ''R.drawable''. </note> | ||
| Line 402: | Line 417: | ||
| <note important>Ordinea elementelor în fișierul XML pentru realizarea selecției este important întrucât Android îl va verifica pe fiecare în parte pentru a vedea dacă acesta corespunde stării controlului. De aceea, imaginea pentru starea normală a controlului trebuie să se regăsească întotdeauna după toate celelalte cazuri particulare, în caz contrar aceasta fiind afișată întotdeauna de vreme ce nu impune nici o restricție asupra componentei.</note> | <note important>Ordinea elementelor în fișierul XML pentru realizarea selecției este important întrucât Android îl va verifica pe fiecare în parte pentru a vedea dacă acesta corespunde stării controlului. De aceea, imaginea pentru starea normală a controlului trebuie să se regăsească întotdeauna după toate celelalte cazuri particulare, în caz contrar aceasta fiind afișată întotdeauna de vreme ce nu impune nici o restricție asupra componentei.</note> | ||
| + | </spoiler> | ||
| === ToggleButton === | === ToggleButton === | ||
| Line 407: | Line 423: | ||
| Un obiect ''ToggleButton'' (definit de ''android.widget.ToggleButton'') este un tip de buton care are asociată o stare cu două valori (selectat și neselectat), asemenea unui checkbox sau radiobutton. Implicit, atunci când este selectat, acesta afișează o bară de culoare albastră în partea sa inferioară, iar atunci când nu este selectat, o bară de culoare gri. | Un obiect ''ToggleButton'' (definit de ''android.widget.ToggleButton'') este un tip de buton care are asociată o stare cu două valori (selectat și neselectat), asemenea unui checkbox sau radiobutton. Implicit, atunci când este selectat, acesta afișează o bară de culoare albastră în partea sa inferioară, iar atunci când nu este selectat, o bară de culoare gri. | ||
| + | <spoiler> | ||
| Textele afișate pentru valorile stărilor pot fi controlate în fișierul XML prin intermediul proprietăților ''android:textOn'' respectiv ''android:textOff'', iar programatic prin metodele ''setTextOn()'' și ''setTextOff()''. | Textele afișate pentru valorile stărilor pot fi controlate în fișierul XML prin intermediul proprietăților ''android:textOn'' respectiv ''android:textOff'', iar programatic prin metodele ''setTextOn()'' și ''setTextOff()''. | ||
| Line 412: | Line 429: | ||
| <note tip>Atributul ''text'', moștenit de la obiectul de tip ''Button'', nu este utilizat cu toate că poate fi definit.</note> | <note tip>Atributul ''text'', moștenit de la obiectul de tip ''Button'', nu este utilizat cu toate că poate fi definit.</note> | ||
| + | </spoiler> | ||
| === CheckBox === | === CheckBox === | ||
| Line 426: | Line 443: | ||
| Un element de tip ''android.widget.RadioButton'' este tot un buton cu două stări (selectat / neselectat), de obicei utilizat pentru selecția unei singure opțiuni dintr-o listă, excluderea mutuală fiind realizată prin includerea mai multor obiecte de acest tip într-o componentă de tip ''android.widget.RadioGropup''. | Un element de tip ''android.widget.RadioButton'' este tot un buton cu două stări (selectat / neselectat), de obicei utilizat pentru selecția unei singure opțiuni dintr-o listă, excluderea mutuală fiind realizată prin includerea mai multor obiecte de acest tip într-o componentă de tip ''android.widget.RadioGropup''. | ||
| + | <spoiler> | ||
| <note>Un obiect de tip ''RadioButton'' se poate afla și în afara unui grup la fel cum un obiect de tip ''RadioGroup'' poate conține și alte controale decât butoane.</note> | <note>Un obiect de tip ''RadioButton'' se poate afla și în afara unui grup la fel cum un obiect de tip ''RadioGroup'' poate conține și alte controale decât butoane.</note> | ||
| Line 440: | Line 457: | ||
| În situația în care nu se dorește generarea unui eveniment de fiecare dată când se realizează o selecție, ci preluarea acesteia la un moment dat de timp ulterior, va fi utilizată metoda ''getCheckedRadioButtonId()'' din clasa ''RadioGroup'' care întoarce identificatorul butonului (din clasa ''R.id'') care a fost selectat (sau -1 dacă nu este selectat nici un buton radio din cadrul grupului). | În situația în care nu se dorește generarea unui eveniment de fiecare dată când se realizează o selecție, ci preluarea acesteia la un moment dat de timp ulterior, va fi utilizată metoda ''getCheckedRadioButtonId()'' din clasa ''RadioGroup'' care întoarce identificatorul butonului (din clasa ''R.id'') care a fost selectat (sau -1 dacă nu este selectat nici un buton radio din cadrul grupului). | ||
| + | </spoiler> | ||
| ==== Controale de tip multimedia -- Opțional ==== | ==== Controale de tip multimedia -- Opțional ==== | ||
| Line 454: | 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 469: | 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 520: | 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 673: | 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 711: | 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 717: | 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 737: | 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 761: | 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 772: | Line 796: | ||
| {{ :eim:laboratoare:laborator03:frame_layout_sample.png?nolink&300 }} | {{ :eim:laboratoare:laborator03:frame_layout_sample.png?nolink&300 }} | ||
| + | </spoiler> | ||
| ==== TableLayout ==== | ==== TableLayout ==== | ||
| Într-un mecanism de poziționare de tip ''TableLayout'', elementele componente (layout-uri sau widget-uri) sunt plasate în cadrul unui tabel, fără ca marginile să fie afișate și fără a se specifica în mod explicit numărul de rânduri sau de coloane, acestea fiind determinate în mod automat (numărul de rânduri este determinat ca sumă a elementelor de tip ''TableRow'', iar numărul de coloane ca maximul numărului de componente de pe o linie; de asemenea, dimensiunea unei coloane este dată de componenta cea mai voluminoasă afișată în cadrul ei). | Într-un mecanism de poziționare de tip ''TableLayout'', elementele componente (layout-uri sau widget-uri) sunt plasate în cadrul unui tabel, fără ca marginile să fie afișate și fără a se specifica în mod explicit numărul de rânduri sau de coloane, acestea fiind determinate în mod automat (numărul de rânduri este determinat ca sumă a elementelor de tip ''TableRow'', iar numărul de coloane ca maximul numărului de componente de pe o linie; de asemenea, dimensiunea unei coloane este dată de componenta cea mai voluminoasă afișată în cadrul ei). | ||
| + | <spoiler> | ||
| Cele mai importante proprietăți ale unui layout de acest tip sunt: | Cele mai importante proprietăți ale unui layout de acest tip sunt: | ||
| * ''stretchColumns'' - specifică o listă de indecși indicând coloanele care ar trebui mărite în cazul în care tabelul este mai mic decât spațiul de afișare pe care îl pune la dispoziție; | * ''stretchColumns'' - specifică o listă de indecși indicând coloanele care ar trebui mărite în cazul în care tabelul este mai mic decât spațiul de afișare pe care îl pune la dispoziție; | ||
| Line 846: | Line 871: | ||
| {{ :eim:laboratoare:laborator03:table_layout_sample.png?nolink&300 }} | {{ :eim:laboratoare:laborator03:table_layout_sample.png?nolink&300 }} | ||
| + | </spoiler> | ||
| ==== GridLayout ==== | ==== GridLayout ==== | ||
| Line 851: | 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 860: | Line 887: | ||
| {{ :eim:laboratoare:laborator03:grid_layout_sample.png?nolink&600 }} | {{ :eim:laboratoare:laborator03:grid_layout_sample.png?nolink&600 }} | ||
| + | </spoiler> | ||
| ==== ScrollView ==== | ==== ScrollView ==== | ||
| Line 867: | 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 897: | 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 911: | Line 941: | ||
| **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> | **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@eim2017:~$ git clone https://www.github.com/eim2017/Laborator03.git | + | student@eg106:~$ git clone https://www.github.com/perfectstudent/Laborator03.git |
| </code> | </code> | ||
| Line 925: | 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 }} | ||
| Line 1017: | Line 1047: | ||
| **7.** Să se încarce modificările realizate în cadrul depozitului 'Laborator03' de pe contul Github personal, folosind un mesaj sugestiv. <code> | **7.** Să se încarce modificările realizate în cadrul depozitului 'Laborator03' de pe contul Github personal, folosind un mesaj sugestiv. <code> | ||
| - | student@eim2017:~/Laborator03$ git add PhoneDialer/* | + | student@eg106:~/Laborator03$ git add PhoneDialer/* |
| - | student@eim2017:~/Laborator03$ git commit -m "implemented taks for laboratory 03" | + | student@eg106:~/Laborator03$ git commit -m "implemented taks for laboratory 03" |
| - | student@eim2017:~/Laborator03$ git push origin master | + | student@eg106:~/Laborator03$ git push origin master |
| </code> | </code> | ||
