Layout Editor: co to je, Android Studio a tvorba rozvržení

Co je Layout Editor?

Layout Editor — nástroj integrovaný v Android Studio pro vizuální navrhování uživatelských rozhraní Android aplikací. Otevře se při dvojkliku na XML soubor rozvržení ve složce res/layout/ a je dostupný přes spodní panel přepínání mezi záložkami Code, Design a Split. Vývojář může přetahovat komponenty z palety na plátno, nastavovat jejich vlastnosti a sledovat změny v reálném čase.

Nástroj podporuje dva režimy zobrazení: Design (vizuální plátno s reálným zobrazením widgetů) a Blueprint (schematické znázornění s constrainty a okraji). Režim Split zobrazuje XML kód a vizuální plátno současně. Přepínání mezi nimi se provádí tlačítky v levém horním rohu editoru.

Layout Editor automaticky generuje XML kód za každou akci uživatele: přidání prvku, nastavení odsazení, vytvoření constraintu. To umožňuje vývojáři nepamatovat si desítky XML atributů a soustředit se na vizuální výsledek. Vygenerovaný kód lze vždy ručně upravit na záložce Code.

Hlavní zóny Layout Editor

Rozhraní Layout Editor je rozděleno do čtyř zón: Palette (paleta komponent), Component Tree (strom komponent), Design Surface (plátno pro navrhování) a Properties Panel (panel vlastností). Palette obsahuje všechny dostupné widgety Android SDK, seskupené do kategorií: Widgets, Text, Buttons, Containers a další. Component Tree zobrazuje hierarchii rozvržení ve formě stromu, umožňující přetahování prvků mezi kontejnery.

Design Surface — centrální část editoru, kde se zobrazuje rozvržení. Na plátně lze vybírat prvky, přesouvat je, měnit jejich velikost a vytvářet constrainty. Ve spodní části plátna je dostupný přepínač zařízení a orientace pro náhled rozvržení na různých obrazovkách. Layout Editor podporuje náhled na mnoha virtuálních zařízeních Nexus, Pixel a Samsung.

Properties Panel zobrazuje atributy vybraného prvku: layout_width, layout_height, okraje (margin), vnitřní odsazení (padding), gravitaci a všechny specifické atributy jako textSize pro TextView. Každá změna v Properties Panel se okamžitě projeví na plátně a vygeneruje odpovídající XML kód.

V levém horním rohu editoru jsou umístěna tlačítka ovládání: výběr režimu zobrazení, zapnutí automatického připojování constraintů (Autoconnect), zobrazení constraintů jako čar a přepínání mezi virtuálními zařízeními. Tlačítko «Device for Preview» umožňuje vybrat model smartphonu, tabletu nebo Android TV pro kontrolu adaptability.

ConstraintLayout: flexibilní pozicování

ConstraintLayout — hlavní layout doporučený Googlem pro všechny nové Android projekty. Na rozdíl od vnořených LinearLayout vytváří ConstraintLayout plochou hierarchii, kde je každý prvek připojen k rodiči, jiným prvkům nebo vodícím čarám (guidelines). To snižuje hloubku vnoření a zvyšuje výkon renderování.

Každý prvek v ConstraintLayout má boční constrainty: app:layout_constraintStart_toStartOf, app:layout_constraintEnd_toEndOf, app:layout_constraintTop_toTopOf, app:layout_constraintBottom_toBottomOf. Constrainty mohou být připojeny k rodiči (parent) nebo k ID jiného prvku. Základní XML šablona vypadá takto:

V tomto příkladu je TextView vycentrován na všechny čtyři strany rodiče. Velikost 0dp (match_constraint) znamená, že se šířka roztahuje od levého k pravému constraintu. Tento přístup umožňuje vytvářet adaptivní rozvržení bez pevných rozměrů.

ConstraintLayout také podporuje Bias — posun středu prvku. Atributy layout_constraintHorizontal_bias a layout_constraintVertical_bias nabývají hodnot od 0 do 1, kde 0.5 je střed, 0 — přitisknutí k začátku, 1 — ke konci. Bias umožňuje přesné pozicování prvku mezi dvěma constrainty.

Další možnosti ConstraintLayout: Guidelines (vodící čáry v procentech nebo dp), Barriers (bariéry spojující několik prvků) a Chains (řetězce prvků s rozdělením prostoru). Všechny tyto prvky se vytvářejí přímo v Layout Editor pomocí kontextové nabídky na plátně.

LinearLayout: lineární uspořádání

LinearLayout — kontejner, který řadí podřízené prvky postupně horizontálně (android:orientation="horizontal") nebo vertikálně (android:orientation="vertical"). Je to nejjednodušší layout pro pochopení, ale při složitých rozvrženích vytváří vnořenou hierarchii, což může snižovat výkon.

Klíčový atribut LinearLayout je weight (android:layout_weight). Umožňuje rozdělovat volný prostor mezi prvky proporcionálně podle zadaných hodnot. Pokud nastavíte dvěma tlačítkům weight="1", zaberou stejnou šířku. Prvek s weight="2" dostane dvakrát více místa než s weight="1". Příklad XML s LinearLayout:

V tomto příkladu EditText dostává layout_weight="1" a zabírá veškerý volný prostor mezi labelName a btnSubmit. layout_width="0dp" udává, že šířka EditText je plně určena weight. Bez weight byste museli nastavit pevnou šířku, která se nepřizpůsobuje různým obrazovkám.

Důležité vlastnosti LinearLayout: android:gravity řídí zarovnání obsahu uvnitř kontejneru, zatímco android:layout_gravity — zarovnání samotného kontejneru vůči rodiči. LinearLayout s vnořenými LinearLayout je častou příčinou hlubokého vnoření, proto Google doporučuje nahrazovat tyto konstrukce ConstraintLayout.

XML kód: struktura rozvržení zevnitř

Každé Android rozvržení je XML soubor ve složce res/layout/. Layout Editor tento soubor generuje automaticky, ale porozumění jeho struktuře je nezbytné pro ruční optimalizaci. Kořenový prvek určuje typ kontejneru (ConstraintLayout, LinearLayout, FrameLayout), uvnitř kterého jsou umístěny podřízené widgety.

Základní XML šablona s ConstraintLayout obsahuje deklaraci jmenných prostorů xmlns:android a xmlns:app. Prostor app se používá pro atributy knihovny ConstraintLayout, jako je layout_constraintStart_toStartOf. Každému prvku se doporučuje nastavit android:id pro odkazy z jiných prvků a z kódu Activity nebo Fragment.

Příklad fragmentu rozvržení s několika prvky a constrainty:

V tomto rozvržení je ImageView připojen k horní části rodiče a vycentrován horizontálně. TextView je připojen k dolní hranici ImageView (Top_toBottomOf). Button je umístěn pod TextView. Tento řetězec constraintů vytváří sekvenční strukturu bez vnořených LinearLayout.

Layout Editor umožňuje přepínání mezi vizuálním a textovým zobrazením pomocí záložek Design / Code / Split. V režimu Split se změny v XML okamžitě projeví na plátně a naopak. To je obzvláště užitečné při jemném nastavení atributů, které nemají vizuální ovládání na plátně.

Paleta komponent a Properties Panel

Palette (paleta) — levý panel Layout Editor, obsahující všechny dostupné UI komponenty: TextView, Button, ImageView, EditText, ProgressBar, RecyclerView a další. Komponenty jsou seskupeny do kategorií: Widgets, Text, Buttons, Containers, Transitions, Advanced. Pro přidání komponenty na plátno stačí přetáhnout ji z palety na Design Surface.

Properties Panel (pravý panel) zobrazuje všechny atributy vybraného prvku. Panel je rozdělen do sekcí: Id (identifikátor), Layout (velikosti a okraje), Transform (otočení a měřítko), Text (obsah TextView), Padding and Margin. Pro každý atribut je dostupné rozbalovací menu s možnostmi: wrap_content, match_parent, match_constraint (0dp).

Zvláštností Properties Panel je vizuální editor okrajů (padding a margin) s grafickým znázorněním. Kliknutím na číslo vedle příslušné šipky můžete změnit okraj pomocí posuvníku. Layout Editor automaticky normalizuje okraje: pokud jsou všechny čtyři okraje stejné, použije se atribut android:layout_margin, jinak — jednotlivé android:layout_marginStart, android:layout_marginTop atd.

Pro úpravu Constraint atributů je v Properties Panel speciální sekce Constraints. Zde jsou zobrazeny všechny vazby prvku: ke které straně rodiče nebo jiného prvku je připojen každý okraj. Můžete změnit typ vazby, přidat nebo odebrat constraint. Constraint lze také odstranit kliknutím na odpovídající čáru na plátně v režimu Blueprint.

Vytváření adaptivních rozvržení

Adaptivní rozvržení je rozvržení, které se správně zobrazuje na různých velikostech obrazovky: od kompaktních telefonů (320dp) po velké tablety (600dp+) a skládací zařízení. Layout Editor poskytuje několik nástrojů pro kontrolu a vytváření adaptivních rozhraní.

Prvním nástrojem je Device for Preview v panelu nástrojů. Rozbalovací seznam obsahuje populární zařízení: Pixel 6, Pixel 9, Samsung Galaxy S25, Nexus 7, Nexus 9, Pixel C a další. Můžete přidat vlastní zařízení s libovolnými rozměry obrazovky a hustotou pixelů (dpi). Přepínání mezi zařízeními trvá jednu sekundu a ukazuje, jak rozvržení vypadá na každé obrazovce.

Druhým nástrojem jsou rozměrové kvalifikátory (qualifiers) pro vytváření alternativních rozvržení. V Layout Editor můžete vytvořit několik verzí jednoho XML souboru pro různé velikosti obrazovky, orientaci nebo hustotu. Například soubor activity_main.xml pro telefon a activity_main-sw600dp.xml pro tablet. Layout Editor automaticky zobrazuje náhled pro aktivní kvalifikátor.

Třetím přístupem je ConstraintLayout s Guidelines v procentech. Vodící čáry s atributem app:layout_constraintGuide_percent umožňují připojovat prvky k procentuálním pozicím. Například guideline na 50% rozdělí obrazovku na polovinu nezávisle na velikosti zařízení. To je nejflexibilnější způsob vytváření adaptivních rozvržení bez duplikování XML souborů.

Layout Editor také zobrazuje varování o problémech s adaptivitou: žluté trojúhelníky na prvcích s pevnou šířkou, příliš velkých obrázcích nebo neoptimálním vnoření. Vývojář může kliknout na varování a získat doporučení pro opravu.

Optimalizace XML rozvržení

Optimalizace rozvržení přímo ovlivňuje rychlost renderování a plynulost chodu aplikace. Layout Editor pomáhá odhalovat problémy pomocí vestavěného Layout Inspector a varování v panelu Problems. Základní pravidla optimalizace: minimalizace vnoření, použití ConstraintLayout místo vnořených LinearLayout, správný výběr atributů rozměrů.

Hloubka vnoření — hlavní nepřítel výkonu. Každý vnořený kontejner zvyšuje čas měření a vykreslování. Nástroj Hierarchy View v Android Studio zobrazuje strom rozvržení. Pokud hloubka přesahuje 5–6 úrovní, mělo by být rozvržení restrukturalizováno. ConstraintLayout řeší tento problém nahrazením 3–4 úrovní vnoření jedním plochým kontejnerem.

Doporučení pro optimalizaci XML rozvržení v Layout Editor:

• Používejte ConstraintLayout jako kořenový kontejner místo vnořených LinearLayout — snižuje hloubku hierarchie a urychluje renderování
• Vyhýbejte se layout_weight v LinearLayout u velkých seznamů — weight vyžaduje dvojité měření (two-pass layout)
• Odstraňujte nepoužívané constrainty pomocí kontextové nabídky Clear Constraints of Selection v Layout Editor
• Používejte ViewStub pro zřídka zobrazované bloky — ViewStub odkládá inflaci do okamžiku viditelnosti
• Merge pro reusable komponenty — tag merge odstraňuje nadbytečný kontejner při vkládání přes include
• Zmenšujte velikost obrázků a používejte VectorDrawable místo PNG pro ikony

Layout Inspector — nástroj Android Studio pro profilování rozvržení za běhu aplikace. Zobrazuje skutečnou hierarchii, čas měření a vykreslování každé komponenty. Layout Editor je integrován s Layout Inspector: dvojklik na varování otevře odpovídající problém v podrobné zprávě.