RelativeLayout — podstata, pravidla rozvržení v Android aplikacích

Co je RelativeLayout?

RelativeLayout — ViewGroup, která se objevila v Android SDK od API Level 1, která pozicuje podřízené prvky pomocí deklarativních pravidel (layout rules) vůči rodiči nebo jiným podřízeným prvkům. Každé pravidlo je definováno XML atributem jako android:layout_above, android:layout_below, android:layout_toLeftOf s hodnotou ID cílového prvku.

Před příchodem RelativeLayout byli vývojáři nuceni používat vnořené LinearLayout pro každé nestandardní pozicování — to vedlo k hlubokému vnořování a pomalému vykreslování. RelativeLayout tento problém vyřešil nabídkou relativního pozicování na jedné úrovni hierarchie. Jeho flexibilita je však omezená ve srovnání s moderním ConstraintLayout: RelativeLayout nepodporuje řetězce, bariéry, vodítka a procentuální velikosti.

RelativeLayout má dvě klíčové vlastnosti: jeden průchod onMeasure (na rozdíl od LinearLayout s weight, který vyžaduje dva průchody) a závislost na pořadí deklarace — pokud prvek A odkazuje na prvek B a B je deklarován po A, B musí mít známou velikost v okamžiku měření A. Podle Android Developers Guide (2024) provádí RelativeLayout měření v jednom průchodu, pokud všechna pravidla odkazují na již změřené prvky. V opačném případě je vyžadován druhý průchod, což snižuje výkon.

Kdy je RelativeLayout potřeba

RelativeLayout je opodstatněný pro jednoduchá rozvržení se 3–7 prvky, kde je vyžadováno relativní pozicování (štítek nad tlačítkem, ikona vpravo od textu, panel v dolní části obrazovky). Pro nové projekty je doporučen ConstraintLayout, ale RelativeLayout se stále široce používá v legacy kódu a knihovnách.

Pravidla pozicování: relative a align

RelativeLayout používá dva typy pravidel: relative-pravidla (pozicování vůči jinému prvku) a align-pravidla (ukotvení k rodiči). Každý podřízený prvek může mít neomezený počet pravidel, ale konfliktní pravidla (např. alignParentTop a below jiného prvku) se řeší ve prospěch posledního deklarovaného v atributu.

Relative-pravidla: - android:layout_above="@id/target" — spodní okraj prvku je ukotven k hornímu okraji target. - android:layout_below="@id/target" — horní okraj prvku je ukotven k dolnímu okraji target. - android:layout_toLeftOf="@id/target" — pravý okraj je ukotven k levému okraji target. - android:layout_toRightOf="@id/target" — levý okraj je ukotven k pravému okraji target. - android:layout_toStartOf="@id/target" — analog toLeftOf pro RTL lokalizace. - android:layout_toEndOf="@id/target" — analog toRightOf pro RTL.

Align-pravidla (k rodiči): - android:layout_alignParentTop="true" — horní okraj prvku se shoduje s horním okrajem rodiče. - android:layout_alignParentBottom="true" — spodní okraj se shoduje se spodním okrajem rodiče. - android:layout_alignParentLeft="true" — levý okraj se shoduje s levým okrajem rodiče. - android:layout_alignParentRight="true" — pravý okraj se shoduje s pravým okrajem rodiče. - android:layout_alignParentStart a android:layout_alignParentEnd — pro RTL.

Align-pravidla k jiným prvkům: - android:layout_alignTop="@id/target" — horní část prvku se shoduje s horní částí target. - android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignStart, android:layout_alignEnd — podobně. - android:layout_alignBaseline="@id/target" — zarovnání na základní linii textu (užitečné pro řádky s různými velikostmi písma).

Centrování a pořadí překrývání

Centrování v RelativeLayout se definuje třemi atributy: android:layout_centerInParent="true" (střed rodiče na obou osách), android:layout_centerHorizontal="true" (střed vodorovně) a android:layout_centerVertical="true" (střed svisle). Centrování je kompatibilní s jinými pravidly: prvek může být vycentrován vodorovně a zároveň ukotven ke spodnímu okraji rodiče.

Pořadí překrývání (Z-order) v RelativeLayout je určeno pořadím deklarace prvků v XML. První deklarovaný prvek se kreslí první (bude dole), poslední — poslední (bude nahoře). Pokud potřebujete změnit pořadí překrývání bez změny XML, použijte android:elevation (od API 21) — prvky s vyšší elevation se kreslí navrchu. Pro verze pod API 21 je pořadí překrývání řízeno pouze pořadím deklarace.

Důležité: RelativeLayout nepodporuje atribut android:elevation pro rodiče — každý prvek spravuje svou vlastní elevation samostatně. V případě konfliktu mezi pravidly pozicování a elevation (např. překrývající se prvky) má elevation prioritu při kreslení, ale ne při pozicování — prvek s vyšší elevation může vizuálně zakrýt jiný, i když jeho pravidla rozvržení jej umísťují vzadu.

Příklady: XML rozvržení s RelativeLayout

Příklad 1: Uživatelský profil

Avatar uprostřed nahoře, jméno pod avatarem, status pod jménem, tlačítko akce v dolní části obrazovky. Všechny prvky používají relative-pravidla pro sekvenční ukotvení.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"
        android:src="@drawable/avatar_placeholder" />

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/avatar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="12dp"
        android:text="Ivan Ivanov"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/user_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/user_name"
        android:layout_centerHorizontal="true"
        android:text="Online"
        android:textColor="@color/green" />

    <Button
        android:id="@+id/edit_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp"
        android:text="Upravit profil" />

</RelativeLayout>

Avatar je ukotven nahoře pomocí marginTop + centerHorizontal, jméno — pod avatarem pomocí layout_below, status — pod jménem, tlačítko — ke spodnímu okraji rodiče pomocí alignParentBottom. Všechny prvky jsou na sobě nezávislé, neexistují žádné řetězce ani vnořování.

Příklad 2: Panel s ikonou a odznakem

Ikona s červeným odznakem (kruh s číslem) v pravém horním rohu. Odznak je pozicován vůči ikoně pomocí align k jejím okrajům s negativními margin pro překrytí.

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/ic_notification" />

    <TextView
        android:id="@+id/badge"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignTop="@+id/icon"
        android:layout_alignRight="@+id/icon"
        android:layout_marginTop="-6dp"
        android:layout_marginRight="-6dp"
        android:gravity="center"
        android:background="@drawable/badge_background"
        android:text="3"
        android:textColor="@android:color/white"
        android:textSize="10sp" />

</RelativeLayout>

Odznak je ukotven k hornímu a pravému okraji ikony. Negativní margin (-6dp) posouvají odznak ven a vytvářejí efekt přesahující hranici ikony. Toto je populární vzor pro oznámení, který by bez RelativeLayout vyžadoval FrameLayout nebo vlastní kreslení.

Příklad 3: Přihlašovací obrazovka s RelativeLayout

Přihlašovací formulář: logo uprostřed nahoře, pole email pod ním, pole hesla pod emailem, tlačítko 'Přihlásit' pod heslem, odkaz 'Registrace' přichycený ke spodní části. Všechny prvky jsou sekvenčně ukotveny pomocí layout_below.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp">

    <TextView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="48dp"
        android:text="MyApp"
        android:textSize="32sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/email_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/logo"
        android:layout_marginTop="32dp"
        android:hint="Email" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/email_input"
        android:layout_marginTop="16dp"
        android:hint="Heslo"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginTop="24dp"
        android:text="Přihlásit" />

    <TextView
        android:id="@+id/register_link"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:text="Nemáte účet? Zaregistrovat se"
        android:textColor="@color/primary" />

</RelativeLayout>

Obrazovka používá 5 prvků na jedné úrovni hierarchie. Tok shora dolů (logo → email → heslo → tlačítko) je zajištěn pomocí layout_below a odkaz je přichycen dole pomocí alignParentBottom. Pro stejnou funkčnost by LinearLayout vyžadoval dva vnořené kontejnery (jeden pro horní skupinu, druhý pro odkaz s weight).

RelativeLayout vs ConstraintLayout: srovnání

Srovnání dvou ViewGroup pro relativní pozicování: RelativeLayout (klasický, API 1+) a ConstraintLayout (moderní, Jetpack). Kritéria: flexibilita, výkon, podpora RTL a adaptabilita.

RelativeLayout je horší než ConstraintLayout téměř ve všech ohledech, kromě jednoho: je vestavěný v Android SDK od API 1 a nevyžaduje další závislosti. Pro projekty, které stále používají minSdk pod API 14 (Android 4.0), je RelativeLayout jedinou standardní možností pro relativní pozicování. Ve všech ostatních případech Google doporučuje ConstraintLayout.