Proiectarea interfeței utilizator Android Aspecte relative

Înțelegerea aspectului este importantă pentru un design bun al aplicațiilor Android. În acest tutorial, veți afla totul despre aspecte relative, care organizează controale ale interfeței utilizator sau widget-uri, pe ecran în relație unul cu celălalt sau cu aspectul părintelui lor. Atunci când este folosit corect, layout-urile relative pot fi structura puternică și flexibilă pe care pot fi proiectate multe interfețe utilizator interesante pentru aplicații Android.

Ce este un aspect relativ?

După aranjamentele liniare, care afișează controalele într-un singur rând sau coloană, layout-urile relative sunt unul dintre cele mai comune tipuri de layout-uri utilizate de designerii de interfață cu utilizatorii Android. La fel ca și alte layout-uri, layouts relative pot fi definite în resurse XML layout sau programmatic în codul Java al aplicației. Aspectul relativ funcționează la fel de mult ca și numele său: acesta organizează controale relative unul față de celălalt sau cu controlul parental propriu-zis.

Ce inseamna asta? Aceasta înseamnă că comenzile pentru copii, cum ar fi butoanele ImageView, TextView și Button, pot fi plasate deasupra, dedesubt, la stânga sau la dreapta, una de cealaltă. Comenzile pentru copii pot fi, de asemenea, plasate în raport cu părintele (containerul de aspect relevant), inclusiv plasarea comenzilor aliniate la marginile de sus, de jos, stânga sau dreapta ale aspectului.

Poziția relativă pentru planificarea copilului este definită folosind reguli. Aceste reguli definesc modul în care sunt afișate comenzile din cadrul planului relativ. Pentru lista completă a regulilor pentru aspecte relative, consultați documentația Android SDK pentru clasa RelativeLayout. Atribuiile XML asociate pentru utilizarea în resursele XML sunt, de asemenea, definite în documentație.

NOTĂ: Regulile impun ca fiecare element de control al copilului să aibă atributul id setat corespunzător.

Un aspect simplu relativ

Aspectele relative sunt cel mai bine explicate folosind un exemplu. Să presupunem că vrem să proiectăm un ecran cu un control EditText și un buton de control. Vrem butonul să apară în partea dreaptă a butonului EditText. Prin urmare, am putea defini o structură relativă cu două comenzi pentru copii: EditText și Button. Controlul EditText poate avea o regulă care spune: aliniați acest control în partea stângă a controlului părinte (aspectul) și în partea stângă a unui al doilea control - un buton de control. Între timp, comanda Button poate avea o regulă care spune: aliniați acest control la partea dreaptă a controlului părinte (aspectul).

Următoarele figuri arată doar un astfel de aspect relativ, afișat în modul portret sau peisaj. Aspectul relativ are două comenzi pentru copii: un control EditText și un buton de control.

Definirea unei resurse XML Layout cu un aspect relativ

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 relativ introdus în secțiunea anterioară. Acest fișier de resurse de dispunere, desemnat corespunzător /res/layout/relative.xml, este definit în XML după cum urmează:

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/relative.xml, acea linie de cod ar fi:

 setContentView (R.layout.relative); 

Această dispunere relativă are lățimea și înălțimea setată pentru a umple ecranul și trei reguli configurate pe comenzile sale pentru copii:

• EditText01: Aliniați la partea stângă a aspectului
• EditText01: Afișați la stânga butonului01
• Buton01: Aliniați la partea dreaptă a aspectului

Definirea programată a unui aspect relativ

De asemenea, puteți crea și configura programatic machete relative. Acest lucru se face folosind clasa RelativeLayout (android.widget.Relative). Veți găsi parametrii specifici copiilor în clasa RelativeLayout.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ă încă obiectelor RelativeLayout.
Î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 părintelui dvs. ar fi aspectul relativ.
De exemplu, următorul cod ilustrează modul în care trebuie să creați în mod programatic o activitate de instanțiere a unui raport relativ și să plasați un control TextView și un buton în el în metoda onCreate (), la fel ca cel prezentat în secțiunea anterioară:

public void onCreate (bundle savedInstanceState) super.onCreate (savedInstanceState); // setContentView (R.layout.relative); EditareText ed = new EditText (this); RelativeLayout.LayoutParams params = noi RelativeLayout.LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT); params.addRule (RelativeLayout.ALIGN_PARENT_LEFT); // utilizați același id definat la adăugarea butonului params.addRule (RelativeLayout.LEFT_OF, 1001); ed.setLayoutParams (params); ed.setHint ("Introduceți un text ..."); Buton but1 = Buton nou (acest); RelativeLayout.LayoutParams params2 = noi relativeLayout.LayoutParams (LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params2.addRule (RelativeLayout.ALIGN_PARENT_RIGHT); but1.setLayoutParams (params2); but1.setText ("Apăsați aici!"); // da butonul un ID pe care îl știm but1.setId (1001); Suprafața relativăLayout1 = noua valoare relativă (aceasta); layout1.setLayoutParams (noua LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); layout1.addView (ed); layout1.addView (but1); setContentView (layout1);  

Să aruncăm o privire mai atentă la lista de cod Java de mai sus. Mai intai creem un control EditText ca normal. Îi oferim niște parametri RelativeLayout și apoi stabilim regulile. În acest caz, vom crea două reguli pentru controlul EditText.

Apoi, vom crea un buton de control și vom stabili regula lui (aliniați la marginea din dreapta a aspectului părinte). În cele din urmă, vom crea un obiect RelativeLayout, vom seta parametrii, vom adăuga cele două controale child folosind metoda addView () și vom încărca aspectul relativ pentru a fi afișat folosind metoda setContentView ().

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 relevante de aspect relativ

Acum, să vorbim puțin despre atributele care ajută la configurarea unui aspect relativ și a controalelor copilului acestuia. Unele atribute specifice se aplică aspectelor relative - și anume regulile copilului, inclusiv:

• Reguli pentru centrifugarea controlului copilului în cadrul planului părinte, inclusiv: centru orizontal, centru vertical sau ambele.
• Reguli pentru alinierea controlului copilului în aspectul părintelui, inclusiv: alinierea cu marginea de sus, de jos, de stânga sau de dreapta a altui control.
• Reguli pentru alinierea controlului copilului în raport cu alte controale pentru copii, inclusiv: alinierea cu marginile de sus, de jos, stânga sau dreapta.
• Reguli pentru plasarea în controlul copilului în raport cu alte controale ale copilului, inclusiv: plasarea în stânga sau la dreapta unui control specific sau peste sau sub alt control.

De asemenea, atributele generale de tip ViewGroup se aplică aspectelor relative. 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)

Acum, să punem în aplicare câteva dintre aceste reguli!

Lucrul cu regulile de aspect

Să ne uităm la un design mai complex al ecranului. În scopul acestui exercițiu, vom începe prin a privi designul final al ecranului și apoi vom lucra înapoi, discutând caracteristicile relative ale aspectului și regulile utilizate pentru a obține acest rezultat final.

Să presupunem că vrem să proiectăm un ecran care arată astfel:

Pentru a proiecta acest ecran folosind un aspect relativ, continuați cu pașii următori.

Pasul 1: Definiți un aspect relativ în fișierul dvs. de resurse XML

Mai întâi, definiți un aspect relativ în fișierul de resurse XML. Deoarece doriți ca acest aspect să controleze conținutul întregului ecran, setați atributele de înălțime și lățime pentru a completa funcția_parent. Fișierul de resurse XML ar trebui să pară acum astfel:

Pasul 2: Determinați controlul copiilor

Apoi, vom determina ce copil controlează de care avem nevoie. În acest caz, avem nevoie de șapte controale TextView (câte unul pentru fiecare culoare). Configurați-le ca în mod normal, setând atributele de text la șiruri de caractere, culori de fundal, dimensiuni de fonturi etc. Localizați fiecare dintre aceste controale în aspectul dvs. relativ.

Pasul 3: Definirea regulilor de aspect relativ

În continuare, definim regulile pentru fiecare control al copilului, pentru a le face să atragă în locurile potrivite:

• Controlul RED TextView nu are configurate setări specifice. Implicit, acest control va fi desenat în colțul din stânga sus al planului părinte.
• Controlul ORANGE TextView este centrat orizontal în aspectul părinte. Deoarece toate comenzile implicite în colțul din stânga sus al ecranului, aceasta ancoră în mod efectiv comanda la marginea superioară de mijloc a aspectului părinte.
• Controlul YELLOW TextView este aliniat la marginea din dreapta a aspectului părinte. Deoarece toate comenzile implicite în colțul din stânga sus al ecranului, aceasta ancoră în mod efectiv controlul în colțul din dreapta sus al aspectului părinte.
• Controlul GREEN TextView este centrat pe verticală în aspectul părintelui și configurat să se afișeze în stânga controlului BLUE TextView.
• Controlul BLUE TextView este aliniat la centru (orizontal și vertical) al comenzii părinte. Aceasta afișează imaginea în mijlocul ecranului.
• Controlul INDIGO TextView este centrat pe verticală în aspectul părintelui și configurat să se afișeze în partea dreaptă a controlului BLUE TextView.
• Controlul VIOLET TextView este aliniat la marginea de jos a aspectului părinte. Lățimea este, de asemenea, setată să umple părintele, permițându-i să se întindă pe marginea de jos a ecranului.

Dacă definiți aceste reguli în fișierul de resurse XML, ar trebui să pară acum ceva similar:

RelativeLayout Sfaturi de utilizare

Iată câteva sfaturi pentru a lucra cu aspecte relative.

• Dispozitivele de control pentru aspectul relativ trebuie să aibă atribute id unice pentru ca regulile să se aplice corect.
• Ferește-te de reguli circulare. Regulile circulare apar atunci când două controale au reguli care se îndreaptă unul către celălalt. Dacă includeți un set circular de reguli în designul de aspect, veți obține următoarea eroare:

  Excepția ilegală de stat: dependențele circulare nu pot exista într-un raport relativ 

  Poate fi util să reamintim că regulile relative de aspect sunt aplicate într-o singură trecere.

• Păstrați la minimum regulile relative de aspect. Acest lucru ajută la reducerea șanselor de reguli circulare și face ca aspectul dvs. să fie mai ușor de gestionat și flexibil.
• Ca de obicei, nu uitați să testați că aspectul dvs. de design funcționează așa cum era de așteptat atât în ​​moduri portret și peisaj, cât și pe diferite dimensiuni și rezoluții ale ecranului.
• Utilizați machete relative în loc de aranjați machete liniare pentru a îmbunătăți performanța și capacitatea de reacție a aplicațiilor.

Concluzie

Interfețele pentru utilizatorii de aplicații Android sunt definite folosind layout-uri, iar layout-urile relative sunt unul dintre tipurile de layout-uri folosite pentru a crea ecrane de aplicații care sunt atât flexibile, cât și puternice. Aspectul relativ permite controlului copilului să fie organizat relativ unul față de celălalt și relativ la părinte (marginile și centrat vertical și orizontal). Odată ce ați stăpânit regulile modului în care sunt structurate relativ, ele pot fi incredibil de versatile, permițându-vă să creați aspecte complexe fără a crește cheltuielile de amenajare a diferitelor aspecte, îmbunătățind astfel performanța.