RelativeLayout — esența, regulile de layout în aplicațiile Android

Ce este RelativeLayout?

RelativeLayout — ViewGroup, apărută în Android SDK începând cu API Level 1, care poziționează elementele copil prin reguli declarative (layout rules) relativ la părinte sau la alte elemente copil. Fiecare regulă este definită de un atribut XML precum android:layout_above, android:layout_below, android:layout_toLeftOf cu valoarea ID-ului elementului țintă.

Înainte de apariția RelativeLayout, dezvoltatorii erau nevoiți să folosească LinearLayout-uri imbricate pentru fiecare poziționare nestandard — aceasta ducea la o imbricare profundă și randare lentă. RelativeLayout a rezolvat această problemă, oferind poziționare relativă la un singur nivel de ierarhie. Cu toate acestea, flexibilitatea sa este limitată în comparație cu ConstraintLayout modern: RelativeLayout nu suportă lanțuri, bariere, ghidaje și dimensiuni procentuale.

RelativeLayout are două caracteristici cheie: un singur pas onMeasure (spre deosebire de LinearLayout cu weight, care necesită doi pași) și dependența de ordinea declarării — dacă elementul A se referă la elementul B, iar B este declarat după A, B trebuie să aibă o dimensiune cunoscută în momentul măsurării lui A. Conform Android Developers Guide (2024), RelativeLayout execută măsurarea într-un singur pas dacă toate regulile se referă la elemente deja măsurate. În caz contrar, este necesar un al doilea pas, ceea ce reduce performanța.

Când este necesar RelativeLayout

RelativeLayout este justificat pentru machete simple cu 3–7 elemente, unde este necesară poziționarea relativă (etichetă deasupra butonului, pictogramă la dreapta textului, panou în partea de jos a ecranului). Pentru proiecte noi este recomandat ConstraintLayout, dar RelativeLayout este încă utilizat pe scară largă în codul vechi și biblioteci.

Reguli de poziționare: relative și align

RelativeLayout folosește două tipuri de reguli: reguli relative (poziționare față de un alt element) și reguli align (ancorare la părinte). Fiecare element copil poate avea un număr nelimitat de reguli, dar regulile conflictuale (de exemplu, alignParentTop și below altui element) se rezolvă în favoarea ultimei declarate în atribut.

Reguli relative: - android:layout_above="@id/target" — marginea inferioară a elementului este ancorată de marginea superioară a target. - android:layout_below="@id/target" — marginea superioară a elementului este ancorată de marginea inferioară a target. - android:layout_toLeftOf="@id/target" — marginea dreaptă este ancorată de marginea stângă a target. - android:layout_toRightOf="@id/target" — marginea stângă este ancorată de marginea dreaptă a target. - android:layout_toStartOf="@id/target" — analog toLeftOf pentru localizări RTL. - android:layout_toEndOf="@id/target" — analog toRightOf pentru RTL.

Reguli align (la părinte): - android:layout_alignParentTop="true" — marginea superioară a elementului coincide cu marginea superioară a părintelui. - android:layout_alignParentBottom="true" — marginea inferioară coincide cu marginea inferioară a părintelui. - android:layout_alignParentLeft="true" — marginea stângă coincide cu marginea stângă a părintelui. - android:layout_alignParentRight="true" — marginea dreaptă coincide cu marginea dreaptă a părintelui. - android:layout_alignParentStart și android:layout_alignParentEnd — pentru RTL.

Reguli align la alte elemente: - android:layout_alignTop="@id/target" — partea superioară a elementului coincide cu partea superioară a target. - android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignStart, android:layout_alignEnd — similar. - android:layout_alignBaseline="@id/target" — aliniere la linia de bază a textului (util pentru rânduri cu dimensiuni de font diferite).

Centrare și ordinea de suprapunere

Centrarea în RelativeLayout se definește prin trei atribute: android:layout_centerInParent="true" (centrul părintelui pe ambele axe), android:layout_centerHorizontal="true" (centrul pe orizontală) și android:layout_centerVertical="true" (centrul pe verticală). Centrarea este compatibilă cu alte reguli: un element poate fi centrat pe orizontală și în același timp ancorat de marginea inferioară a părintelui.

Ordinea de suprapunere (Z-order) în RelativeLayout este determinată de ordinea declarării elementelor în XML. Primul element declarat este desenat primul (va fi mai jos), ultimul — ultimul (va fi mai sus). Dacă trebuie să schimbați ordinea de suprapunere fără a modifica XML-ul, utilizați android:elevation (începând cu API 21) — elementele cu elevation mai mare se desenează deasupra. Pentru versiunile sub API 21, ordinea de suprapunere se reglează doar prin ordinea declarării.

Important: RelativeLayout nu suportă atributul android:elevation pentru părinte — fiecare element își gestionează propria elevation. În caz de conflict între regulile de poziționare și elevation (de exemplu, elemente suprapuse), elevation are prioritate la desenare, dar nu la poziționare — un element cu elevation mai mare poate acoperi vizual altul, chiar dacă regulile sale de layout îl plasează „în spate”.

Exemple: machete XML cu RelativeLayout

Exemplul 1: Profil de utilizator

Avatarul în centrul sus, numele sub avatar, statusul sub nume, butonul de acțiune în partea de jos a ecranului. Toate elementele folosesc reguli relative pentru ancorare secvențială.

<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="Editează profilul" />

</RelativeLayout>

Avatarul este ancorat sus prin marginTop + centerHorizontal, numele — sub avatar prin layout_below, statusul — sub nume, butonul — la marginea inferioară a părintelui prin alignParentBottom. Toate elementele sunt independente unele de altele, nu există lanțuri sau imbricare.

Exemplul 2: Panou cu pictogramă și insignă

Pictogramă cu o insignă roșie (cerc cu număr) în colțul din dreapta sus. Insigna este poziționată relativ la pictogramă prin align la marginile sale cu margini negative pentru suprapunere.

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

Insigna este ancorată de marginea superioară și dreaptă a pictogramei. Marginile negative (-6dp) deplasează insigna în exterior, creând un efect de depășire a marginii pictogramei. Acesta este un model popular pentru notificări, care fără RelativeLayout ar necesita FrameLayout sau desenare personalizată.

Exemplul 3: Ecran de autentificare cu RelativeLayout

Formular de autentificare: logo-ul centrat sus, câmpul email sub el, câmpul parolă sub email, butonul „Autentificare” sub parolă, linkul „Înregistrare” lipit de jos. Toate elementele sunt ancorate secvențial prin 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="Parolă"
        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="Autentificare" />

    <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="Nu ai cont? Înregistrează-te"
        android:textColor="@color/primary" />

</RelativeLayout>

Ecranul folosește 5 elemente la același nivel de ierarhie. Fluxul de sus în jos (logo → email → parolă → buton) este asigurat prin layout_below, iar linkul este lipit de jos prin alignParentBottom. Pentru aceeași funcționalitate, LinearLayout ar necesita două containere imbricate (unul pentru grupul de sus, al doilea pentru link cu weight).

RelativeLayout vs ConstraintLayout: comparație

Comparație a două ViewGroup pentru poziționare relativă: RelativeLayout (clasic, API 1+) și ConstraintLayout (modern, Jetpack). Criterii: flexibilitate, performanță, suport RTL și adaptabilitate.

RelativeLayout este inferior ConstraintLayout practic în toate aspectele, cu excepția unuia: este încorporat în Android SDK de la API 1 și nu necesită dependențe suplimentare. Pentru proiectele care încă folosesc minSdk sub API 14 (Android 4.0), RelativeLayout este singura opțiune standard pentru poziționare relativă. În toate celelalte cazuri, Google recomandă ConstraintLayout.