Proiectarea interfeței cu utilizatorul Android layout-uri de cadre

Amenajările de cadre sunt una dintre cele mai simple tipuri de structuri utilizate pentru a organiza comenzile în interfața utilizator a unei aplicații Android.
Înțelegerea aspectului este importantă pentru un design bun al aplicațiilor Android. În acest tutorial, învățați totul despre machetele de cadre, care sunt folosite în principal pentru a organiza controale de vizualizare individuale sau suprapuse pe ecran. Atunci când este utilizat corect, layout-urile de cadre pot fi aspectul fundamental pe care pot fi proiectate multe interfețe interesante pentru utilizatorii de aplicații Android.

Ce este un aspect cadru?

Amenajările de cadre sunt una dintre cele mai simple și mai eficiente tipuri de layout-uri utilizate de dezvoltatorii Android pentru a organiza controale de vizualizare. Acestea sunt folosite mai rar decât alte layout-uri, pur și simplu pentru că ele sunt în general utilizate pentru a afișa doar o vizualizare sau pentru viziuni care se suprapun. Amplasarea cadrului este adesea folosită ca un aspect de container, deoarece în general are doar o vizualizare unică (adesea un alt aspect, utilizat pentru a organiza mai multe vizualizări).

SFAT: De fapt, un loc pe care veți vedea planurile utilizate este ca aspectul părinte al oricărei resurse de structură pe care o proiectați. Dacă trageți aplicația în instrumentul Viewer Hierarchy (un instrument util pentru depanarea aplicațiilor dvs. de aplicație), veți vedea că toate resursele de structură pe care le proiectați sunt afișate într-o vizualizare părinte - un aspect cadru.

Amplasările de cadre sunt foarte simple, ceea ce le face foarte eficiente. Ele pot fi definite în cadrul resurselor XML layout sau programate în codul Java al aplicației. O vizualizare a copilului într-un aspect cadru este întotdeauna trasă în raport cu colțul din stânga sus al ecranului. Dacă există mai multe viziuni asupra copilului, atunci ele sunt desenate, în ordine, una peste alta. Aceasta înseamnă că prima vizualizare adăugată la aspectul cadrului va fi afișată în partea de jos a stivei, iar ultima vizualizare adăugată va fi afișată în partea de sus.

Să ne uităm la un exemplu simplu. Să presupunem că avem un aspect de cadru care este dimensionat pentru a controla întregul ecran (cu alte cuvinte atributele layout_width și layout_height sunt ambele setate la match_parent). Am putut apoi adăuga trei controale pentru copii la acest aspect cadru:

  • Un Imagine cu o imagine a unui lac.
  • Un TextView cu un text care să fie afișat în partea de sus a ecranului.
  • Un TextView cu un text care să fie afișat spre partea de jos a ecranului (Pur și simplu utilizați atributul layout_gravity pentru a avea chiuveta TextView în partea de jos a părintelui).

Figura următoare arată cum ar arăta acest aspect pe ecran.

Definirea unei resurse XML Layout with a Layout Frame

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 simplu al cadrului introdus în secțiunea anterioară. Din nou, acest ecran este în esență un aspect de cadru cu trei vizualizări pentru copii: o imagine care umple întregul ecran, pe care sunt desenate două controale de text, fiecare având fundalul transparent, implicit. Acest fișier de resurse de dispunere, numit /res/layout/framed.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/framed.xml, acel rând de cod ar fi:

 setContentView (R.layout.framed); 

Definirea programată a unui plan cadru

De asemenea, puteți crea și configura programatic machetele de cadre. Acest lucru se face folosind clasa FrameLayout (android.widget.FrameLayout). Veți găsi parametrii specifici cadrului în clasa FrameLayout.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 FrameLayout.
Î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 cadrului.
De exemplu, codul următor ilustrează modul de reproducere a aceluiași aspect descris anterior programabil. În mod specific, avem o activitate de instanțiere a unui FrameLayout și plasăm un control ImageView urmat de două controale TextView în cadrul acestuia în metoda onCreate ():

public void onCreate (bundle savedInstanceState) super.onCreate (savedInstanceState); TextView tv1 = TextView nou (acest); tv1.setText (R.string.top_text); tv1.setTextSize (40); tv1.setTextColor (Color.BLACK); TextView tv2 = TextView nou (acest); tv2.setLayoutParams (layoutParams noi (LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM)); tv2.setTextSize (50); tv2.setGravity (Gravity.RIGHT); tv2.setText (R.string.bottom_text); tv2.setTextColor (Color.WHITE); ImageView iv1 = noul ImageView (acest lucru); iv1.setImageResource (R.drawable.lake); iv1.setLayoutParams (noua LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); iv1.setScaleType (ScaleType.MATRIX); FrameLayout fl = nou FrameLayout (acest lucru); fl.setLayoutParams (noi LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); fl.addView (IV1); fl.addView (TV1); fl.addView (TV2); setContentView (fl);  

Ecranul rezultat arată exact la fel ca în figura afișată anterior.

Când să utilizați opțiunile de cadru

Cu alte tipuri de layout puternice, cum ar fi layout-uri liniare, layout-uri relative și layouts de tabel la dispoziția dumneavoastră, este ușor să uitați de aspectul cadrului. Eficiența unui aspect al cadrului face ca acesta să fie o alegere bună pentru ecrane care conțin câteva controale de vizualizare (ecrane de acasă, ecrane de jocuri cu o singură pânză și altele asemenea). Uneori, alte modele ineficiente de aspect pot fi reduse la un design de aspect cadru care este mai eficient, în timp ce alteori un tip de aspect mai specializat este adecvat. Amplasările de cadre sunt aspectul normal de alegere atunci când doriți să suprapuneți vizualizările.

Privind la controalele similare

FrameLayout este relativ simplu. Din acest motiv, numeroase alte tipuri de layout și controale de vizualizare se bazează pe aceasta. De exemplu, ScrollView este pur și simplu un FrameLayout care are bare de derulare când conținutul copilului este prea mare pentru a desena în limitele aspectului. Toate widgeturile pentru aplicațiile de pe ecranul de întâmpinare se află într-un FrameLayout.
Un plus de notorietate pentru toate cadrele FrameLayouts este că pot lua o prim plan în plus față de fundalul normal. Acest lucru se face prin intermediul atributului android: foreground XML. Acest lucru ar putea fi folosit pentru, literalmente, un cadru în jurul punctelor de vedere.

Concluzie

Interfețele utilizatorilor de interfețe Android sunt definite utilizând layouts, iar layout-urile de cadre sunt unul dintre cele mai simple și mai eficiente tipuri de layout disponibile. Comenzile pentru copii ale unui aspect al cadrului sunt desenate în raport cu colțul din stânga sus al planului. În cazul în care există mai multe vizualizări ale copiilor în aspectul cadrului, acestea sunt desenate în ordine, cu ultimul ecran copil în partea de sus.

Cod