Liniar, relativ, constrângere, tabel, cadru și așa mai departe și așa mai departe. Aplicațiile Android au o mulțime de machete între care puteți alege atunci când doriți să vă proiectați aplicația. Întrebarea este, care este cea mai bună?

Înainte de a intra în detaliile diferitelor aspecte, vom analiza mai întâi ierarhia obiectelor de vizualizare și procesul de desenare al Android.

Vizualizați și ViewGroup

Gândiți-vă la ViewGroup ca la clasa părinte a oricărei vizualizări și, de asemenea, la clasa de bază pentru machete. Reprezintă un obiect care este containerul pentru alte vizualizări. De exemplu, a LinearLayout este o ViewGroup deoarece poate conține și vizualizări și alte machete.

Vizualizarea, pe de altă parte, este elementul de bază al elementelor UI. Vizualizările pot face parte dintr-un ViewGroup. De exemplu, a TextView este o Vedere.

Cum sa intelegeti numeroasele machete Android
O ierarhie a ViewGroup și View

Măsurați -> Aspect -> Desenați -> Repetați

Aspectele sunt salvate ca XML fișiere în Android. Dar cum se convertesc la obiectele pe care le vedem pe ecran? Fiecare fișier XML este instanțiat (citește: umflat) și se formează un arbore de ierarhizare a vizualizărilor. Aceasta înseamnă că, dacă aveți aspectul B care este cuibărit în interiorul aspectului A, acestea vor avea o relație copil – părinte (aspectul A este părintele aspectului B). Odată ce arborele este format, există 3 faze care se vor întâmpla: Măsurați, dispuneți și desenați. Fiecare dintre aceste faze traversează arborele într-un Căutare în adâncime Ordin.

Măsura

În prima fază, fiecare nod părinte își dă seama de anumite constrângeri ale copiilor săi cu privire la dimensiunea lor. Transmite aceste limitări în jos copiilor săi, unde fiecare copil își va evalua propria dimensiune (cât de mare vrea să fie) și va lua în considerare limitările care i-au fost date și limitările copiilor săi.

Aspect

Aici, fiecare nod va decide dimensiunea finală și poziția fiecăruia dintre copiii săi pe ecran.

A desena

Pornind de la nodul rădăcină, care se atrage singur, le spune copiilor să se deseneze singuri. În acest mod, ceea ce se întâmplă este că un părinte va fi desenat și copiii acestuia vor fi atrași deasupra acestuia.

Ținând cont de procesul de mai sus, ar trebui să încercați să păstrați aspectul aplicației dvs. cât mai superficial posibil, astfel încât să reduceți timpul necesar trecerii ierarhiei de vizualizare

0*avZ1dpBsBuTW36Xt
„Lot de rame foto cu culori asortate” de Markus Spiske pe Unsplash

Defalcarea aspectelor

Liniar

Organizează copiii ei într-un rând cu o orientare verticală sau orizontală. Adică, vizualizările vor fi fie într-un singur rând, fie într-o singură coloană. Puteți specifica direcția folosind android: orientare atribut.

O caracteristică interesantă pe care o are un aspect liniar este layout_weight atribut. Aceasta este utilizată pentru a spune Linear Layout cum să împartă spațiul între vizualizările copilului. Este util atunci când doriți ca aspectul dvs. să fie consecvent între dispozitive și orientări.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        />

</LinearLayout>
Un aspect liniar simplu

Să presupunem că ați dorit primul TextView, care conține cuvântul Buna ziua, pentru a prelua întotdeauna 3/4 din lățimea ecranului. Pentru a face acest lucru, putem folosi atributul layout_weight.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="4"        // <-- We added a total weight for our layout (4)
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3"   // <-- Will have a weight of 3 out of 4 (3/4)
        android:text="Hello" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:layout_weight="1"   // <-- Will have a weight of 1 out of 4 (1/4)
        />

</LinearLayout>
layout_weight

Relativ

După cum sugerează și numele, acest aspect își va seta vizualizările interioare copil în poziție relativă. Acest lucru vă poate menține ierarhia de aspect plană fără grupuri de vizualizare imbricate. În același timp, totuși, fiecare aspect relativ trebuie să fie supus unui proces de două treceri de măsurare, care pot avea un impact asupra performanței.

O caracteristică utilă a unui RelativeLayout este capacitatea de a centra o vizualizare pentru copii folosind centerInParent atribut.

1612108687 438 Cum sa intelegeti numeroasele machete Android
layout_centerInParent centrează TextView

Constrângere

A constrângere este o conexiune sau o aliniere la elementul de care este legată constrângerea. Definiți diverse constrângeri pentru fiecare vizualizare copil în raport cu alte vizualizări prezente. Acest lucru vă oferă posibilitatea de a construi machete complexe cu o ierarhie de vizualizare plană (fără ViewGroups imbricate). Similar cu RelativeLayout, acest aspect necesită și două treceri de măsurare.

1612108687 633 Cum sa intelegeti numeroasele machete Android
Observați constrângerile de pe TextView

Cadru

Acest aspect este utilizat doar pentru a menține o singură vizualizare copil, blocând astfel orice altă vizualizare din aspect. Aspectul în sine va fi la fel de mare ca cea mai mare vizualizare pentru copil (vizibilă sau nu), plus niște umplutură.

Evitați să aveți mai multe vizualizări copil în interiorul unui FrameLayout, deoarece va fi dificil să evitați vizualizările copilului să se suprapună. Puteți controla pozițiile acestor vizualizări copil atribuind fișierul layout_gravity atribut fiecărui copil.

1612108688 750 Cum sa intelegeti numeroasele machete Android

Vizualizare listă / Vizualizare grilă

Utilizați atunci când aveți nevoie să prezentați mai multe articole pe ecran (cum ar fi într-un meniu de restaurant). Vizualizarea listei este o listă cu o singură coloană prin care utilizatorul poate derula. Vă puteți gândi la Vizualizarea grilă ca la o Vizualizare listă cu mai multe coloane.

Ceea ce este important de știut despre aceste aspecte este că vizualizările sunt dinamice și sunt create în timpul rulării. Pentru ca elementele să fie populate în timpul rulării, trebuie să utilizați un AdapterView.

1612108688 22 Cum sa intelegeti numeroasele machete Android
Puteți specifica locația fiecărui element din aspect folosind layout_column și layout_row

TableLayout

Foarte similar cu Grid View, acest aspect își aranjează copiii în rânduri și coloane. Fiecare aspect va conține mai multe obiecte TableRow, fiecare definind un rând.

1612108689 97 Cum sa intelegeti numeroasele machete Android
Avem două elemente TableRow

Nu vă fie teamă să încercați diferite machete până nu o găsiți pe cea care funcționează cel mai bine pentru dvs. Simțiți-vă liber să mă anunțați în comentariile de mai jos ce aspect vă este cel mai util și de ce.