RelativeLayout — lényege, elrendezési szabályok Android alkalmazásokban

Mi az a RelativeLayout?

RelativeLayout — ViewGroup, amely az Android SDK-ban API Level 1 óta elérhető, és deklaratív szabályok (layout rules) segítségével pozicionálja a gyermekelemeket a szülőhöz vagy más gyermekelemekhez képest. Minden szabályt egy XML attribútum határoz meg, mint például android:layout_above, android:layout_below, android:layout_toLeftOf a cél elem ID-jának értékével.

A RelativeLayout megjelenése előtt a fejlesztők kénytelenek voltak beágyazott LinearLayout-okat használni minden nem szabványos pozicionáláshoz — ez mély beágyazáshoz és lassú megjelenítéshez vezetett. A RelativeLayout megoldotta ezt a problémát azáltal, hogy relatív pozicionálást kínált a hierarchia egy szintjén. Rugalmassága azonban korlátozott a modern ConstraintLayout-hoz képest: a RelativeLayout nem támogatja a láncokat, korlátokat, vezetőket és százalékos méreteket.

A RelativeLayout két kulcsfontosságú tulajdonsággal rendelkezik: egy onMeasure menet (ellentétben a weight-et használó LinearLayout-tal, amely két menetet igényel) és függőség a deklaráció sorrendjétől — ha az A elem a B elemre hivatkozik, és B A után van deklarálva, B-nek ismert mérettel kell rendelkeznie A mérésének pillanatában. Az Android Developers Guide (2024) szerint a RelativeLayout egy menetben végzi a mérést, ha az összes szabály már mért elemekre hivatkozik. Ellenkező esetben második menet szükséges, ami csökkenti a teljesítményt.

Mikor van szükség RelativeLayout-ra?

A RelativeLayout egyszerű, 3–7 elemet tartalmazó elrendezésekhez indokolt, ahol relatív pozicionálás szükséges (címke a gomb felett, ikon a szövegtől jobbra, panel a képernyő alján). Új projektekhez a ConstraintLayout ajánlott, de a RelativeLayout-ot még mindig széles körben használják örökölt kódban és könyvtárakban.

Pozicionálási szabályok: relative és align

A RelativeLayout kétféle szabályt használ: relative-szabályokat (másik elemhez viszonyított pozicionálás) és align-szabályokat (rögzítés a szülőhöz). Minden gyermekelem korlátlan számú szabállyal rendelkezhet, de az ütköző szabályok (pl. alignParentTop és másik elem below) az attribútumban utoljára deklarált javára oldódnak fel.

Relative-szabályok: - android:layout_above="@id/target" — az elem alsó éle a target felső éléhez van rögzítve. - android:layout_below="@id/target" — az elem felső éle a target alsó éléhez van rögzítve. - android:layout_toLeftOf="@id/target" — a jobb él a target bal éléhez van rögzítve. - android:layout_toRightOf="@id/target" — a bal él a target jobb éléhez van rögzítve. - android:layout_toStartOf="@id/target" — a toLeftOf megfelelője RTL lokalizációkhoz. - android:layout_toEndOf="@id/target" — a toRightOf megfelelője RTL-hez.

Align-szabályok (szülőhöz): - android:layout_alignParentTop="true" — az elem felső éle egybeesik a szülő felső élével. - android:layout_alignParentBottom="true" — az alsó él egybeesik a szülő alsó élével. - android:layout_alignParentLeft="true" — a bal él egybeesik a szülő bal élével. - android:layout_alignParentRight="true" — a jobb él egybeesik a szülő jobb élével. - android:layout_alignParentStart és android:layout_alignParentEnd — RTL-hez.

Align-szabályok más elemekhez: - android:layout_alignTop="@id/target" — az elem teteje egybeesik a target tetejével. - android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignStart, android:layout_alignEnd — hasonlóan. - android:layout_alignBaseline="@id/target" — igazítás a szöveg alapvonalához (hasznos különböző betűméretű sorokhoz).

Középre igazítás és átfedési sorrend

A középre igazítás a RelativeLayout-ban három attribútummal határozható meg: android:layout_centerInParent="true" (a szülő középpontja mindkét tengelyen), android:layout_centerHorizontal="true" (vízszintesen középre) és android:layout_centerVertical="true" (függőlegesen középre). A középre igazítás kompatibilis más szabályokkal: egy elem lehet vízszintesen középre igazítva és egyidejűleg a szülő alsó széléhez rögzítve.

Az átfedési sorrend (Z-order) a RelativeLayout-ban az elemek XML-ben való deklarálási sorrendje határozza meg. Az elsőként deklarált elem rajzolódik ki elsőként (alul lesz), az utolsó — utoljára (felül lesz). Ha meg kell változtatnia az átfedési sorrendet az XML módosítása nélkül, használja az android:elevation attribútumot (API 21-től) — a magasabb elevation-nal rendelkező elemek felülre rajzolódnak. API 21 alatti verziók esetén az átfedési sorrend csak a deklarálási sorrenddel szabályozható.

Fontos: A RelativeLayout nem támogatja az android:elevation attribútumot a szülő számára — minden elem önállóan kezeli a saját elevation-ját. A pozicionálási szabályok és az elevation közötti ütközés esetén (pl. átfedő elemek) az elevation elsőbbséget élvez a rajzolásnál, de nem a pozicionálásnál — egy magasabb elevation-nal rendelkező elem vizuálisan eltakARhat egy másikat, még akkor is, ha az elrendezési szabályai mögé helyezik.

Példák: XML elrendezések RelativeLayout-tal

1. példa: Felhasználói profil

Avatar középen felül, név az avatar alatt, státusz a név alatt, művelet gomb a képernyő alján. Minden elem relatív szabályokat használ a szekvenciális rögzítéshez.

<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="Profil szerkesztése" />

</RelativeLayout>

Az avatar marginTop + centerHorizontal segítségével van rögzítve felül, a név — layout_below segítségével az avatar alatt, a státusz — a név alatt, a gomb — alignParentBottom segítségével a szülő alsó széléhez rögzítve. Minden elem független egymástól, nincsenek láncok vagy beágyazás.

2. példa: Panel ikonnal és jelvénnyel

Ikon piros jelvénnyel (kör számmal) a jobb felső sarokban. A jelvény az ikonhoz képest van pozicionálva annak széleihez align segítségével negatív margin-okkal az átfedéshez.

<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>

A jelvény az ikon felső és jobb széléhez van rögzítve. A negatív margin-ok (-6dp) kifelé tolják a jelvényt, átfedési hatást keltve az ikon szélén. Ez egy népszerű minta értesítésekhez, amely RelativeLayout nélkül FrameLayout-ot vagy egyedi rajzolást igényelne.

3. példa: Bejelentkező képernyő RelativeLayout-tal

Bejelentkező űrlap: logó középen felül, e-mail mező alatta, jelszó mező az e-mail alatt, 'Belépés' gomb a jelszó alatt, 'Regisztráció' link alulra rögzítve. Minden elem layout_below segítségével van szekvenciálisan rögzítve.

<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="Jelszó"
        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="Belépés" />

    <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="Nincs fiókja? Regisztráció"
        android:textColor="@color/primary" />

</RelativeLayout>

A képernyő 5 elemet használ a hierarchia egy szintjén. A felülről lefelé tartó folyamatot (logó → e-mail → jelszó → gomb) a layout_below biztosítja, a link pedig alignParentBottom segítségével van alulra rögzítve. Ugyanehhez a funkcióhoz a LinearLayout két beágyazott konténert igényelne (egyet a felső csoporthoz, egyet a linkhez weight-tel).

RelativeLayout vs ConstraintLayout: összehasonlítás

Két ViewGroup összehasonlítása relatív pozicionáláshoz: RelativeLayout (klasszikus, API 1+) és ConstraintLayout (modern, Jetpack). Szempontok: rugalmasság, teljesítmény, RTL-támogatás és alkalmazkodóképesség.

A RelativeLayout szinte minden tekintetben alulmarad a ConstraintLayout-tal szemben, egy kivétellel: az Android SDK-ba beépítve API 1 óta és nem igényel további függőségeket. Azon projektek számára, amelyek még mindig API 14 (Android 4.0) alatti minSdk-t használnak, a RelativeLayout az egyetlen szabványos lehetőség a relatív pozicionáláshoz. Minden más esetben a Google a ConstraintLayout-ot ajánlja.