Proiectarea interfeței cu utilizatorul Android Elementele de bază ale planului

Înțelegerea aspectului este importantă pentru un design bun al aplicațiilor Android. În acest tutorial, oferim o imagine de ansamblu asupra modului în care machetele se încadrează în arhitectura aplicațiilor Android. Examinăm, de asemenea, unele dintre controalele de aspect specifice disponibile pentru organizarea conținutului ecranului aplicației într-o varietate de moduri interesante.

Ce este un aspect?

Dezvoltatorii Android folosesc termenul de aspect pentru a însemna unul din cele două lucruri. Ambele definiții se aplică acestui tutorial și, din păcate, sunt utilizate interschimbabil în comunitatea de dezvoltare Android. Cele două definiții ale aspectului sunt:

  • Un tip de resursă care definește ce este desenat pe ecran. Resursele de resurse sunt stocate ca fișiere XML în directorul de resurse / res / layout pentru aplicație. O resursă de aspect este pur și simplu un șablon pentru ecranul unei interfețe de utilizator sau o porțiune a unui ecran și conține.
  • Un tip de clasă View, al cărei scop principal este de a organiza alte controale. Aceste clase de aspect (LinearLayout, RelativeLayout, TableLayout, etc.) sunt utilizate pentru afișarea comenzilor copil, cum ar fi comenzile de text sau butoanele sau imaginile de pe ecran.

Interfețele utilizatorilor Android pot fi definite ca resurse de structură în XML sau create în mod programat.

Folosirea Eclipse pentru a proiecta resurse de planificare

Pluginul de dezvoltare Android pentru Eclipse include un designer rezonabil pentru proiectarea și previzualizarea resurselor de aspect. Instrumentul include două vizualizări ale filelor: vizualizarea Layout vă permite să previzualizați cum vor apărea comenzile pe diferite ecrane și pentru fiecare orientare, iar vizualizarea XML vă arată definiția XML a resurselor. Designerul de resurse al planului este prezentat în această figură:

Iată câteva sfaturi pentru a lucra cu designerul de resurse pentru layout în Eclipse:

  • Utilizați panoul Schiță pentru a adăuga și elimina controalele la resursa de aspect.
  • Selectați un control specific (fie în Previzualizare, fie în Schiță) și utilizați panoul Proprietăți pentru a ajusta atributele unui anumit control.
  • Utilizați fila XML pentru a edita direct definiția XML.

Este important să rețineți că previzualizarea designerului resurselor Eclipse nu poate replica exact modul în care aspectul va apărea utilizatorilor finali. Pentru aceasta, trebuie să testați aplicația pe un emulator configurat corespunzător și, mai important, pe dispozitivele țintă. De asemenea, anumite controale "complexe", inclusiv filtre sau vizualizatoare video, nu pot fi previzualizate în Eclipse.

Definirea unei resurse XML Layout

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ă în mare măsură 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 alunecare a codului. Creează o distincție potențială între designerii UI (care se preocupă mai mult de layout-ul) și dezvoltatorii (care cunosc Java și implementează funcționalitatea aplicațiilor). Dezvoltatorii pot modifica în continuare conținutul unui ecran, când este necesar. Comenzile complexe, cum ar fi ListView sau GridView, sunt de obicei populate cu date programate.

Resursele de aspect XML trebuie să fie stocate în directorul / res / layout project (sau, în cazul resurselor alternative, într-un sub-director special). Este o practică obișnuită să creați o resursă de aspect XML pentru fiecare ecran din aplicația dvs. (strâns legată de o anumită activitate), dar acest lucru nu este necesar. Ar putea, teoretic, să creați o resursă de aspect XML și să o utilizați pentru activități diferite, furnizând date diferite pe ecran. Puteți, de asemenea, să puteți componentiza resursele de aspect și să le includeți unul în celălalt, dacă este necesar.

Următoarea este o resursă simplificată pentru aspect XML, un șablon cu un LinearLayout care conține un TextView și un ImageView, definite în XML:

     

Acest aspect reprezintă un ecran simplu cu două comenzi: mai întâi un text și apoi o imagine sub el. Aceste controale sunt organizate în cadrul unui LinearLayout orientat vertical. Următoarele două cifre arată cum ar putea arăta acest aspect pe un dispozitiv în mod portret și peisaj:

În 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/main.xml, aceasta ar fi:

 setContentView (R.layout.main); 

Definirea unei planificări programate

De asemenea, puteți crea în mod programabil componente ale interfeței utilizator. Pentru organizare și întreținere, acest lucru este mai bine lăsat pentru caz ciudat decât pentru normă. În loc să încărcați o resursă de aspect direct utilizând metoda setContentView (), trebuie să construiți conținutul ecranului și apoi să furnizați un obiect de aspect parental care conține tot conținutul de control care să fie afișat ca vizualizări copil la metoda setContentView ().

De exemplu, codul următor ilustrează modul în care trebuie să creați în mod programatic o activitate de instanțiere a unei vizualizări LinearLayout și să plasați două obiecte TextView în ea. Nu sunt folosite niciun fel de resurse.

 public void onCreate (bundle savedInstanceState) super.onCreate (savedInstanceState); // setContentView (R.layout.main); TextView label = nou TextView (acest); label.setText (R.string.my_text_label); label.setTextSize (20); label.setGravity (Gravity.CENTER_HORIZONTAL); ImageView pic = nou ImageView (acest lucru); pic.setImageResource (R.drawable.matterhorn); pic.setLayoutParams (noua LayoutParams (LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); pic.setAdjustViewBounds (true); pic.setScaleType (ScaleType.FIT_XY); pic.setMaxHeight (250); pic.setMaxWidth (250); 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 (eticheta); ll.addView (pic); setContentView (ll);  

După cum puteți vedea, codul poate crește rapid în mărime deoarece sunt adăugate mai multe controale pe ecran, ceea ce face ca conținutul ecranului să fie mai dificil de întreținut sau de reutilizat.

Explorarea diferitelor tipuri de planuri

Acum, să ne îndreptăm atenția asupra acelor controale utile de aspect care organizează alte controale. Cele mai frecvent utilizate clase de aspect sunt:

  • FrameLayout - concepute pentru a afișa un teanc de vizualizare a copiilor. Se pot adăuga comenzi multiple de vizualizare la acest aspect. Acest lucru poate fi folosit pentru a afișa mai multe comenzi în același spațiu de pe ecran.
  • LinearLayout - concepute pentru afișarea copiilor Vizualizați comenzile într-un singur rând sau coloană. Aceasta este o metodă de aspect foarte utilă pentru crearea formularelor.
  • RelativeLayout - concepute pentru afișarea copilului Vizualizați comenzile în raport unul cu celălalt. De exemplu, puteți seta un control pentru a fi poziționat "deasupra" sau "de mai jos" sau "în partea stângă a" sau "din dreapta" altui control, la care se face referire prin identificatorul său unic. De asemenea, puteți alinia vizualizarea copilului de la controalele relative la marginile părinte.
  • TableLayout - concepute pentru a organiza copilul Vizualizați comenzile în rânduri și coloane. Vizualizarea individuală a controalelor se adaugă în fiecare rând al tabelului, utilizând un tabel de vizualizare TableRow (care este, în principiu, un LinearLayout orientat orizontal) pentru fiecare rând din tabel.

Combinarea planurilor pentru a organiza comenzile

Un aspect (LinearLayout, TableLayout, RelativeLayout, etc.) este un control ca oricare alta. Aceasta înseamnă că controalele de aspect pot fi imbricate. De exemplu, este posibil să utilizați o metodă RelativeLayout în cadrul unui LinearLayout sau invers, pentru a organiza comenzi pe un ecran. Figura următoare prezintă un ecran cu un LinearLayout (părinte), un TableLayout (copil de sus) și un FrameLayout (copil inferior).

Dar aveți grijă! Țineți ecrane relativ simplu; lucrările complexe se încarcă încet și provoacă probleme de performanță.

Furnizarea de resurse alternative de aranjare

Luați în considerare diferențele dintre dispozitive atunci când proiectați resursele pentru aspectul aplicației. Este adesea posibil să se proiecteze planuri flexibile care să arate bine pe o varietate de dispozitive diferite, atât în ​​modul portret, cât și în modul peisaj. Când este necesar, puteți include resurse alternative de aspect pentru a gestiona cazuri speciale. De exemplu, puteți furniza diferite machete care să se încarce în funcție de orientarea dispozitivului sau dacă dispozitivul are sau nu un ecran mare (de exemplu, un table Internet).

Pentru mai multe informații despre utilizarea resurselor alternative, consultați documentația Android SDK pentru resursele Android.

Instrumente de configurare și optimizare

SDK-ul Android include mai multe instrumente care pot ajuta la proiectarea, depanarea și optimizarea resurselor de aspect. În plus față de designerul de resurse de layout încorporat în plug-in-ul Android pentru Eclipse, puteți utiliza instrumentele Viewer și layoutopt furnizate împreună cu SDK-ul Android. Aceste instrumente sunt disponibile în directorul / tools al SDK-ului Android.

Puteți utiliza Vizualizatorul de ierarhii pentru a inspecta detaliile aspectului în timpul execuției. Aflați mai multe despre Vizualizatorul de ierarhii de pe site-ul Android Developer.

Puteți utiliza instrumentul de linie de comandă layoutopt pentru a optimiza fișierele de aspect. Optimizarea aspectului este importantă deoarece fișierele complicate de aspect sunt încărcate lent. Instrumentul layoutopt scanează fișiere XML și identifică controale inutile. Aflați mai multe despre instrumentul layoutopt de pe site-ul Android Developer.

Concluzie

Interfețele utilizatorilor de interfețe Android sunt definite folosind layout-uri. Există o serie de tipuri diferite de tipuri de layout care pot fi utilizate pentru a organiza comenzi pe un ecran sau o porțiune a unui ecran. Aspectul poate fi definit folosind resurse XML sau programabil la run-time în Java. Formate alternative pot fi încărcate în circumstanțe speciale, cum ar fi furnizarea unei interfețe de utilizator alternative în modul portret versus peisaj. În cele din urmă, proiectarea unor aspecte bune este importantă pentru performanța aplicațiilor; utilizați instrumente SDK Android precum Viewerul ierarhic și layoutopt pentru a depana și a optimiza planurile aplicației.

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