Proiectarea interfeței utilizator Android Aspecte liniare

Înțelegerea aspectului este importantă pentru un design bun al aplicațiilor Android. În acest tutorial, veți afla totul despre layout-urile liniare, care organizează comenzile interfeței utilizator sau widget-uri, pe verticală sau orizontală pe ecran. Atunci când este utilizat corect, layout-urile liniare pot fi aspectul fundamental pe care pot fi proiectate multe interfețe interesante pentru utilizatorii de aplicații Android.

Ce este un layout liniar?

Modelele liniare sunt unul dintre cele mai simple și mai frecvente tipuri de layout-uri utilizate de dezvoltatorii Android pentru a organiza controale în cadrul interfețelor lor de utilizator. Layout-ul liniar funcționează la fel de mult ca și numele său: acesta organizează controalele liniare fie în mod vertical, fie pe orizontală. Când orientarea layout-ului este setată pe verticală, toate comenzile copilului din cadrul acestuia sunt organizate într-o singură coloană; când orientarea layout-ului este setată pe orizontală, toate comenzile copilului din cadrul acestuia sunt organizate într-un singur rând.

Modelele liniare pot fi definite în cadrul resurselor XML layout sau programatic în codul Java al aplicației.

Figura următoare prezintă un aspect liniar cu șapte controale TextView. Această orientare a aspectului liniar este setată pe verticală, determinând fiecare dintre comenzile TextView să fie afișate într-o singură coloană. Fiecare control TextView are atributul său text setat la o culoare, cu același set de culori ca fundalul pentru control; fiecare control este întins lățimea ecranului prin setarea atributului layout_width al controalelor la fill_parent.

Definirea unei resurse XML Layout cu un layout liniar

Modul cel mai convenabil și mai ușor de întreținut pentru a proiecta interfețele utilizatorilor de aplicații este crearea de resurse XML de aspect. Această metodă simplifică foarte mult procesul de proiectare UI, deplasând o mare parte din crearea și structura statică a controalelor interfeței utilizator și definirea atributelor de control, în XML, în loc de a aluneca codul.

Resursele de aspect XML trebuie să fie stocate în ierarhia directorului / res / layout project. Să aruncăm o privire la aspectul liniar curcubeu introdus în secțiunea anterioară. Din nou, acest ecran este în principiu un layout liniar vertical pentru a umple întregul ecran, obținut prin setarea atributelor lui layout_width și layout_height la fill_parent. Acest fișier cu resurse, bine numit /res/layout/rainbow.xml, este definit în XML după cum urmează:

          

Poate că ați observat că fiecare dintre controalele pentru copii ale layoutului liniar are un număr de atribute interesante, inclusiv unul numit layout_weight. Vom vorbi mai multe despre asta în câteva momente.

Următoarele două cifre arată cum ar putea arăta acest aspect pe un dispozitiv în mod portret și peisaj:

Amintiți-vă că, din cadrul activității, este necesară numai o singură linie de cod în cadrul metodei onCreate () pentru a încărca și a afișa o resursă de aspect pe ecran. Dacă resursa de dispunere a fost stocată în fișierul /res/layout/rainbow.xml, acea linie de cod ar fi:

 setContentView (R.layout.rainbow); 

Definirea programată a unei planificări liniare

De asemenea, puteți să creați și să configurați programatic liniile layout-urilor. Acest lucru se face folosind clasa LinearLayout (android.widget.LinearLayout). Veți găsi parametrii specifici copiilor în clasa LinearLayout.LayoutParams. De asemenea, parametrii tipici de aspect (android.view.ViewGroup.LayoutParams), cum ar fi layout_height și layout_width, precum și parametrii de margine (ViewGroup.MarginLayoutParams), se aplică în continuare obiectelor LinearLayout.
În loc să încărcați o resursă de aspect direct utilizând metoda setContentView () așa cum este arătat mai devreme, trebuie să construiți conținutul ecranului în Java și apoi să furnizați un obiect de aspect părinte care conține toate conținutul de control care să fie afișat ca vizualizări copil la setContentView metodă. În acest caz, aspectul dvs. parental ar fi aspectul liniar.
De exemplu, codul următor ilustrează modul în care trebuie să creați în mod programatic o activitate și să localizați trei obiecte TextView în metoda onCreate ():

 public void onCreate (bundle savedInstanceState) super.onCreate (savedInstanceState); // setContentView (R.layout.rainbow); TextView tv1 = TextView nou (acest); tv1.setText ( "PRIMUL"); tv1.setTextSize (100); tv1.setGravity (Gravity.CENTER); TextView tv2 = TextView nou (acest); tv2.setTextSize (100); tv2.setGravity (Gravity.CENTER); tv2.setText ( "MIJLOC"); TextView tv3 = TextView nou (acest lucru); tv3.setTextSize (100); tv3.setGravity (Gravity.CENTER); tv3.setText ( "LAST"); LinearLayout ll = nou LinearLayout (acest lucru); ll.setOrientation (LinearLayout.VERTICAL); ll.setLayoutParams (noi LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); ll.setGravity (Gravity.CENTER); ll.addView (TV1); ll.addView (TV2); ll.addView (TV3); setContentView (ll);  

Următoarele două cifre arată cum ar putea arăta acest aspect pe un dispozitiv în mod portret și peisaj:

Să aruncăm o privire mai atentă la lista de cod Java de mai sus. Mai întâi, trei controale TextView sunt create și configurate. Fiecare are o dimensiune a textului (dimensiunea fontului), o aliniere a textului (gravitatea) și textul în sine. Apoi, este creat un aspect liniar cu o orientare verticală. Parametrii layout-ului îi permit să umple întregul părinte (în acest caz întregul ecran), iar gravitatea lui determină ca toate controalele copilului să fie centrate pe ecran, în loc să fie din colțul din stânga sus. Fiecare dintre cele trei controale TextView este adăugat ca vizualizare copil folosind metoda addView (). În cele din urmă, aspectul liniar este trecut în metoda setContentView () ca control parental pentru a fi afișat pe ecran.
După cum puteți vedea, codul poate crește rapid în mărime deoarece se adaugă mai multe controale pe ecran. Pentru organizare și mentenabilitate, definirea și folosirea planurilor este cel mai bine lăsată pentru caz ciudat decât pentru normă.

Explorarea proprietăților și atributelor importante pentru aspectul liniar

Acum, să vorbim puțin despre atributele care ajută la configurarea unui aspect liniar și a controalelor copilului acestuia.

Unele atribute specifice se aplică planurilor liniare. Unele dintre cele mai importante atribute pe care le veți folosi cu layout-uri liniare includ:

  • Atributul de orientare (necesar), care poate fi setat vertical sau orizontal (clasa: LinearLayout)
  • Atributul de gravitate (opțional), care controlează modul în care toate comenzile pentru copii sunt aliniate și afișate în cadrul planului liniar (clasa: LinearLayout)
  • Atributul layout_weight (opțional, aplicat fiecărui control de tip copil) specifică importanța relativă a fiecărui copil în cadrul liniei părinte liniare (clasa: LinearLayout.LayoutParams)

De asemenea, atributele generale de tip ViewGroup se aplică layout-urilor liniare. Acestea includ:

  • Parametrii generali de aspect, cum ar fi layout_height (necesar) și layout_width (necesar) (clasa: ViewGroup.LayoutParams)
  • Parametrii de dispunere a marginii, cum ar fi margin_top, margin_left, margin_right și margin_bottom (clasă: ViewGroup. MarginLayoutParams)
  • Layout Parameters, cum ar fi layout_height și layout_width (class: ViewGroup.LayoutParams)

Cântărirea controalelor pentru copii

Majoritatea atributelor layoutului liniar sunt destul de explicative. Cu toate acestea, atributul layout_weight merită o discuție suplimentară. Spre deosebire de alte atribute de aspect liniar, care se aplică vizualizării layout-ului liniar în sine, acest atribut se aplică controalelor copilului său. Numerele de greutate în sine ar trebui să fie numere (de ex. .50, .25, .10, .10, .05,), unde suma totală a valorilor greutăților tuturor copiilor este egală cu 1 (100%).

Greutatea unui copil controlează cât de mult "importanță" sau "spațiu" este dată în structura liniei părinte. Acest lucru este cel mai bine ilustrat folosind un exemplu. Să ne întoarcem la layout-ul liniar curcubeu pe care l-am folosit mai devreme. Pentru a permite tuturor comenzilor pentru copii să se "extinde" pentru a umple aspectul liniar în mod egal, indiferent de dimensiunea ecranului, am folosit layout_weight pentru a atribui greutăți relative la fiecare TextView. Deoarece există șapte culori pe care vrem să le acordăm merite egale, am împărțit 1 la 7 și am venit cu aproximativ 0,143. Cu toate acestea, deoarece am dorit ca greutatea să fie egală cu 1, cinci dintre greutățile controalelor au primit o valoare de .14, iar două au o valoare de .15 - o diferență subtilă care face suma noastră exact 1, dar este destul de vizibilă pentru primul și ultimul control.

Acest truc de greutate funcționează bine atunci când pe ecran există spațiu suficient pentru afișarea corectă a tuturor comenzilor. Acestea fiind spuse, atunci când spațiul se strânge, atributul de greutate poate fi suprasolicitat de alți factori, cum ar fi tăierea vizuală sau, în cazul unui TextView, încercarea de a nu împacheta textul. Acest lucru devine evident atunci când modificăm fișierul de aspectul curcubeu.xml pentru a conține un aspect orizontal similar (layout_height este de asemenea setat la fill_parent).
Următoarele două figuri arată ce același aspect (modificat numai la o orientare orizontală) așa cum ar putea apărea pe un dispozitiv în moduri portret și peisaj:

Ceea ce ne așteptăm este că zonele roșii și violete (greutatea 0.15) vor fi puțin mai mari decât celelalte culori (greutate 0.14), dar nu așa arată. Dacă vă uitați atent la RED TextView, ar trebui să necesitați mai mult spațiu decât vecinul ORANGE TextView. Cu toate acestea, deoarece "roșu" este un cuvânt scurt, iar "Orange" nu este, unele jostling se face automat pentru a încerca să păstreze toate cuvintele din ambalaj. Rezultatul este mai plăcut, dar poate fi un pic enervant să lucrați dacă acest lucru nu este efectul dorit.

Concluzie

Interfețele utilizatorilor de aplicații Android sunt definite utilizând layout-uri, iar layout-urile liniare sunt unul dintre tipurile de layout fundamentale utilizate. Modulul liniar permite controalelor copilului să fie organizate într-un singur rând (orizontal) sau într-o singură coloană (verticală). Poziția de control a copilului poate fi ajustată în continuare folosind atributele de greutate și greutate.

despre autori

Dezvoltatorii mobili Lauren Darcey și Shane Conder au coautorizat mai multe cărți despre dezvoltarea Android: o carte de programare în profunzime intitulată Dezvoltarea aplicațiilor fără fir Android și Sams TeachYourself Dezvoltarea de aplicații Android în 24 de ore. Când nu scriu, își petrec timpul dezvoltând software-ul mobil la compania lor și oferind servicii de consultanță. Acestea pot fi obținute prin e-mail la androidwirelessdev@[email protected], prin intermediul blogului lor la androidbook.blogspot.com, și pe Twitter @ androidwireless.

!

   

Cod