Layout Editor: mi ez, Android Studio és elrendezések készítése

Mi az a Layout Editor?

Layout Editor — az Android Studio-ba beépített eszköz Android-alkalmazások felhasználói felületeinek vizuális tervezéséhez. Dupla kattintással nyílik meg a res/layout/ mappában lévő XML elrendezési fájlon, és az alsó panelen érhető el a Code, Design és Split lapok közötti váltáshoz. A fejlesztő a komponenseket a palettáról a vászonra húzhatja, konfigurálhatja tulajdonságaikat és valós időben figyelheti a változásokat.

Az eszköz két megjelenítési módot támogat: Design (vizuális vászon a widgetek valós megjelenítésével) és Blueprint (sematikus ábrázolás korlátozásokkal és határokkal). A Split mód egyszerre mutatja az XML-kódot és a vizuális vásznat. A köztük lévő váltás a szerkesztő bal felső sarkában lévő gombokkal történik.

A Layout Editor automatikusan XML-kódot generál minden felhasználói művelethez: elem hozzáadása, margók konfigurálása, korlátozás létrehozása. Ez lehetővé teszi a fejlesztő számára, hogy ne kelljen megjegyeznie több tucat XML-attribútumot, és a vizuális eredményre összpontosíthasson. A generált kód mindig manuálisan szerkeszthető a Code lapon.

A Layout Editor fő zónái

A Layout Editor felülete négy zónára van osztva: Palette (komponenspaletta), Component Tree (komponensfa), Design Surface (tervezővászon) és Properties Panel (tulajdonságok panel). A Palette az összes elérhető Android SDK-widgetet tartalmazza, kategóriákba csoportosítva: Widgets, Text, Buttons, Containers és mások. A Component Tree az elrendezés hierarchiáját fa formájában jeleníti meg, lehetővé téve az elemek tárolók közötti húzását.

Design Surface — a szerkesztő központi része, ahol az elrendezés megjelenik. A vásznon elemek választhatók ki, mozgathatók, méretezhetők és korlátozások hozhatók létre. A vászon alsó részén eszköz- és tájolásváltó kapcsoló található az elrendezés különböző képernyőkön történő előnézetéhez. A Layout Editor több virtuális Nexus, Pixel és Samsung eszközön támogatja az előnézetet.

Properties Panel a kiválasztott elem attribútumait jeleníti meg: layout_width, layout_height, margók, padding, gravitáció és az összes specifikus attribútum, mint a textSize a TextView-hoz. Minden változtatás a Properties Panel-ben azonnal tükröződik a vásznon és létrehozza a megfelelő XML-kódot.

A szerkesztő bal felső sarkában találhatók a vezérlőgombok: a megjelenítési mód kiválasztása, a korlátozások automatikus csatlakoztatásának bekapcsolása (Autoconnect), a korlátozások vonalként való megjelenítése és a virtuális eszközök közötti váltás. A «Device for Preview» gomb lehetővé teszi okostelefon, tablet vagy Android TV modell kiválasztását az alkalmazkodóképesség ellenőrzéséhez.

ConstraintLayout: rugalmas pozícionálás

ConstraintLayout — az alap elrendezés, amelyet a Google ajánl minden új Android-projekthez. A beágyazott LinearLayout-okkal ellentétben a ConstraintLayout lapos hierarchiát hoz létre, ahol minden elem a szülőhöz, más elemekhez vagy vezetővonalakhoz (guidelines) van kötve. Ez csökkenti a beágyazás mélységét és javítja a megjelenítési teljesítményt.

Minden elem a ConstraintLayout-ban rendelkezik oldalsó korlátozásokkal: app:layout_constraintStart_toStartOf, app:layout_constraintEnd_toEndOf, app:layout_constraintTop_toTopOf, app:layout_constraintBottom_toBottomOf. A korlátozások köthetők a szülőhöz (parent) vagy egy másik elem azonosítójához. Az alap XML-sablon így néz ki:

Ebben a példában a TextView a szülő mind a négy oldalához képest középre van igazítva. A 0dp (match_constraint) méret azt jelenti, hogy a szélesség a bal és jobb korlátozás között feszül ki. Ez a megközelítés lehetővé teszi adaptív elrendezések létrehozását rögzített méretek nélkül.

A ConstraintLayout támogatja a Bias-t is — az elem középpontjának eltolását. A layout_constraintHorizontal_bias és layout_constraintVertical_bias attribútumok 0 és 1 közötti értékeket fogadnak el, ahol 0.5 a közép, 0 — a kezdethez nyomás, 1 — a véghez nyomás. A Bias lehetővé teszi az elem pontos pozícionálását két korlátozás között.

A ConstraintLayout további lehetőségei: Guidelines (vezetővonalak százalékban vagy dp-ben), Barriers (több elemet összefogó korlátok) és Chains (elemek láncai térbeli elosztással). Mindezek az elemek közvetlenül a Layout Editor-ban hozhatók létre a vászon helyi menüjén keresztül.

LinearLayout: lineáris elrendezés

LinearLayout — tároló, amely a gyermek elemeket egymás után helyezi el vízszintesen (android:orientation="horizontal") vagy függőlegesen (android:orientation="vertical"). Ez a legkönnyebben érthető elrendezés, de összetett elrendezéseknél beágyazott hierarchiát hoz létre, ami csökkentheti a teljesítményt.

A LinearLayout kulcsattribútuma a weight (android:layout_weight). Lehetővé teszi a szabad hely arányos elosztását az elemek között a megadott értékeknek megfelelően. Ha két gomb weight="1" értéket kap, egyenlő szélességet foglalnak el. Egy weight="2" értékű elem kétszer annyi helyet kap, mint egy weight="1" értékű. Példa XML LinearLayout-tal:

Ebben a példában az EditText layout_weight="1" értéket kap, és elfoglalja az összes szabad helyet a labelName és btnSubmit között. A layout_width="0dp" azt jelzi, hogy az EditText szélességét teljes mértékben a weight határozza meg. Weight nélkül rögzített szélességet kellene beállítanunk, ami nem alkalmazkodik a különböző képernyőkhöz.

A LinearLayout fontos jellemzői: az android:gravity a tartalom igazítását vezérli a tárolón belül, az android:layout_gravity pedig magának a tárolónak az igazítását a szülőn belül. A beágyazott LinearLayout-okkal rendelkező LinearLayout a mély beágyazás gyakori oka, ezért a Google az ilyen konstrukciók ConstraintLayout-ra cserélését javasolja.

XML-kód: az elrendezés belső szerkezete

Minden Android-elrendezés egy XML-fájl a res/layout/ mappában. A Layout Editor automatikusan létrehozza ezt a fájlt, de szerkezetének megértése szükséges a kézi optimalizáláshoz. A gyökérelem határozza meg a tároló típusát (ConstraintLayout, LinearLayout, FrameLayout), amelyen belül a gyermek widgetek találhatók.

Az alap XML-sablon ConstraintLayout-tal tartalmazza a xmlns:android és xmlns:app névterek deklarációját. Az app névtér a ConstraintLayout könyvtár attribútumaihoz használatos, mint a layout_constraintStart_toStartOf. Minden elemnek ajánlott android:id-t adni a más elemekből és az Activity vagy Fragment kódjából történő hivatkozásokhoz.

Példa egy elrendezés részletére több elemmel és korlátozással:

Ebben az elrendezésben az ImageView a szülő tetejéhez van kötve és vízszintesen középre igazítva. A TextView az ImageView alsó széléhez van kötve (Top_toBottomOf). A Button a TextView alatt található. Ez a korlátozási lánc szekvenciális szerkezetet hoz létre beágyazott LinearLayout-ok nélkül.

A Layout Editor lehetővé teszi a váltást a vizuális és szöveges megjelenítés között a Design / Code / Split lapokon keresztül. Split módban az XML-ben végzett módosítások azonnal tükröződnek a vásznon és fordítva. Ez különösen kényelmes azon attribútumok finomhangolásához, amelyek nem rendelkeznek vizuális vezérléssel a vásznon.

Komponenspaletta és Properties Panel

Palette — a Layout Editor bal oldali panelje, amely az összes elérhető UI-komponenst tartalmazza: TextView, Button, ImageView, EditText, ProgressBar, RecyclerView és mások. A komponensek kategóriákba vannak csoportosítva: Widgets, Text, Buttons, Containers, Transitions, Advanced. A komponens vászonra helyezéséhez elegendő azt a palettáról a Design Surface-re húzni.

Properties Panel (jobb oldali panel) a kiválasztott elem összes attribútumát megjeleníti. A panel szakaszokra van osztva: Id (azonosító), Layout (méretek és margók), Transform (forgatás és méretarány), Text (TextView tartalma), Padding and Margin. Minden attribútumhoz legördülő menü tartozik a következő opciókkal: wrap_content, match_parent, match_constraint (0dp).

A Properties Panel különlegessége a távolságok vizuális szerkesztője (padding és margin) grafikus megjelenítéssel. A megfelelő nyíl melletti számra kattintva csúszka segítségével módosítható a távolság. A Layout Editor automatikusan normalizálja a távolságokat: ha mind a négy távolság azonos, az android:layout_margin attribútum használatos, ellenkező esetben — egyedi android:layout_marginStart, android:layout_marginTop stb.

A korlátozási attribútumok szerkesztéséhez a Properties Panel-ben egy külön Constraints szakasz található. Itt jelenik meg az elem összes kötése: a szülő vagy egy másik elem melyik oldalához van kötve az egyes élek. Módosítható a kötés típusa, korlátozás adható hozzá vagy távolítható el. A korlátozás eltávolítása a vásznon lévő megfelelő vonalra kattintva is lehetséges Blueprint módban.

Adaptív elrendezések létrehozása

Az adaptív elrendezés olyan elrendezés, amely helyesen jelenik meg különböző képernyőméreteken: a kompakt telefonoktól (320dp) a nagy táblagépekig (600dp+) és a hajlítható eszközökig. A Layout Editor számos eszközt kínál az adaptív felületek ellenőrzéséhez és létrehozásához.

Az első eszköz — a Device for Preview az eszköztáron. A legördülő lista népszerű eszközöket tartalmaz: Pixel 6, Pixel 9, Samsung Galaxy S25, Nexus 7, Nexus 9, Pixel C és mások. Hozzáadható egyéni eszköz tetszőleges képernyőmérettel és pixelsűrűséggel (dpi). Az eszközök közötti váltás egy másodpercig tart, és megmutatja, hogy az elrendezés hogyan néz ki az egyes képernyőkön.

A második eszköz — a méret-kvalifikátorok (qualifiers) alternatív elrendezések létrehozásához. A Layout Editor-ban ugyanazon XML-fájl több verziója hozható létre különböző képernyőméretekhez, tájoláshoz vagy sűrűséghez. Például a activity_main.xml fájl telefonhoz és a activity_main-sw600dp.xml táblagéphez. A Layout Editor automatikusan előnézetet jelenít meg az aktív kvalifikátorhoz.

A harmadik megközelítés — a ConstraintLayout Guidelines-szel százalékban. A app:layout_constraintGuide_percent attribútummal rendelkező vezetővonalak lehetővé teszik elemek százalékos pozíciókhoz kötését. Például egy 50%-os guideline az eszköz méretétől függetlenül félbeosztja a képernyőt. Ez a legrugalmasabb módja az adaptív elrendezések létrehozásának XML-fájlok duplikálása nélkül.

A Layout Editor figyelmeztetéseket is megjelenít az alkalmazkodóképességi problémákról: sárga háromszögek a rögzített szélességű elemeken, túl nagy képeken vagy nem optimális beágyazáson. A fejlesztő a figyelmeztetésre kattintva javítási javaslatot kaphat.

XML-elrendezések optimalizálása

Az elrendezések optimalizálása közvetlenül befolyásolja a megjelenítési sebességet és az alkalmazás gördülékenységét. A Layout Editor segít a problémák észlelésében a beépített Layout Inspector és a Problems panel figyelmeztetésein keresztül. Az optimalizálás fő szabályai: a beágyazás minimalizálása, a ConstraintLayout használata a beágyazott LinearLayout-ok helyett, a méret attribútumok helyes megválasztása.

A beágyazás mélysége — a teljesítmény fő ellensége. Minden beágyazott tároló növeli a mérési és rajzolási időt. A Hierarchy View eszköz az Android Studio-ban megjeleníti az elrendezések fáját. Ha a mélység meghaladja az 5–6 szintet, az elrendezést át kell strukturálni. A ConstraintLayout megoldja ezt a problémát azáltal, hogy 3–4 beágyazási szintet egyetlen lapos tárolóra cserél.

Javaslatok az XML-elrendezések optimalizálásához a Layout Editor-ban:

• Használja a ConstraintLayout-ot gyökértárolóként a beágyazott LinearLayout-ok helyett — csökkenti a hierarchia mélységét és gyorsítja a megjelenítést
• Kerülje a layout_weight használatát a LinearLayout-ban nagy listák esetén — a weight dupla mérési áthaladást igényel (two-pass layout)
• Távolítsa el a nem használt korlátozásokat a Layout Editor Clear Constraints of Selection helyi menüjén keresztül
• Használja a ViewStub-ot a ritkán megjelenő blokkokhoz — a ViewStub késlelteti a felfújást a láthatóság pillanatáig
• Merge újrafelhasználható komponensekhez — a merge tag kiküszöböli a felesleges tárolót az include segítségével történő beillesztéskor
• Csökkentse a képek méretét és használjon VectorDrawable-t PNG helyett az ikonokhoz

Layout Inspector — az Android Studio eszköze az elrendezések profilozására az alkalmazás futása közben. Megmutatja a valódi hierarchiát, az egyes komponensek mérési és rajzolási idejét. A Layout Editor integrálva van a Layout Inspector-ral: a figyelmeztetésre duplán kattintva a megfelelő probléma megnyílik egy részletes jelentésben.