RelativeLayout — същност, правила за оформление в Android приложения

Какво е RelativeLayout?

RelativeLayout — ViewGroup, появила се в Android SDK от API Level 1, която позиционира дъщерни елементи чрез декларативни правила (layout rules) спрямо родителя или други дъщерни елементи. Всяко правило се задава от XML атрибут като android:layout_above, android:layout_below, android:layout_toLeftOf със стойност ID на целевия елемент.

Преди появата на RelativeLayout, разработчиците бяха принудени да използват вложени LinearLayout за всяко нестандартно позициониране — това водеше до дълбоко влагане и бавно изобразяване. RelativeLayout реши този проблем, предлагайки относително позициониране на едно ниво на йерархия. Въпреки това, неговата гъвкавост е ограничена в сравнение с модерния ConstraintLayout: RelativeLayout не поддържа вериги, бариери, направляващи и процентни размери.

RelativeLayout има две ключови характеристики: едно преминаване onMeasure (за разлика от LinearLayout с weight, който изисква две преминавания) и зависимост от реда на деклариране — ако елемент A се позовава на елемент B и B е деклариран след A, B трябва да има известен размер в момента на измерване на A. Според Android Developers Guide (2024), RelativeLayout извършва измерване в едно преминаване, ако всички правила се позовават на вече измерени елементи. В противен случай е необходимо второ преминаване, което намалява производителността.

Кога е необходим RelativeLayout

RelativeLayout е оправдан за прости оформления с 3–7 елемента, където се изисква относително позициониране (етикет над бутон, икона вдясно от текст, панел в долната част на екрана). За нови проекти се препоръчва ConstraintLayout, но RelativeLayout все още се използва широко в наследен код и библиотеки.

Правила за позициониране: relative и align

RelativeLayout използва два вида правила: relative-правила (позициониране спрямо друг елемент) и align-правила (закрепване към родителя). Всеки дъщерен елемент може да има неограничен брой правила, но конфликтните правила (напр. alignParentTop и below на друг елемент) се разрешават в полза на последното декларирано в атрибута.

Relative-правила: - android:layout_above="@id/target" — долният ръб на елемента е закрепен към горния ръб на target. - android:layout_below="@id/target" — горният ръб на елемента е закрепен към долния ръб на target. - android:layout_toLeftOf="@id/target" — десният ръб е закрепен към левия ръб на target. - android:layout_toRightOf="@id/target" — левият ръб е закрепен към десния ръб на target. - android:layout_toStartOf="@id/target" — аналог на toLeftOf за RTL локализации. - android:layout_toEndOf="@id/target" — аналог на toRightOf за RTL.

Align-правила (към родител): - android:layout_alignParentTop="true" — горният ръб на елемента съвпада с горния ръб на родителя. - android:layout_alignParentBottom="true" — долният ръб съвпада с долния ръб на родителя. - android:layout_alignParentLeft="true" — левият ръб съвпада с левия ръб на родителя. - android:layout_alignParentRight="true" — десният ръб съвпада с десния ръб на родителя. - android:layout_alignParentStart и android:layout_alignParentEnd — за RTL.

Align-правила към други елементи: - android:layout_alignTop="@id/target" — горната част на елемента съвпада с горната част на target. - android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignStart, android:layout_alignEnd — по подобен начин. - android:layout_alignBaseline="@id/target" — подравняване по базовата линия на текста (полезно за редове с различни размери на шрифта).

Центриране и ред на припокриване

Центрирането в RelativeLayout се задава от три атрибута: android:layout_centerInParent="true" (център на родителя по двете оси), android:layout_centerHorizontal="true" (център по хоризонтала) и android:layout_centerVertical="true" (център по вертикала). Центрирането е съвместимо с други правила: елемент може да бъде центриран хоризонтално и едновременно закрепен към долния ръб на родителя.

Редът на припокриване (Z-order) в RelativeLayout се определя от реда на деклариране на елементите в XML. Първият деклариран елемент се рисува пръв (ще бъде отдолу), последният — последен (ще бъде отгоре). Ако трябва да промените реда на припокриване без да променяте XML, използвайте android:elevation (от API 21) — елементите с по-висока elevation се рисуват отгоре. За версии под API 21 редът на припокриване се регулира само от реда на деклариране.

Важно: RelativeLayout не поддържа атрибута android:elevation за родителя — всеки елемент управлява своята elevation самостоятелно. При конфликт между правила за позициониране и elevation (напр. припокриващи се елементи) elevation има приоритет при рисуване, но не и при позициониране — елемент с по-висока elevation може визуално да покрие друг, дори ако правилата му за оформление го поставят отзад.

Примери: XML оформления с RelativeLayout

Пример 1: Потребителски профил

Аватар в центъра отгоре, име под аватара, статус под името, бутон за действие в долната част на екрана. Всички елементи използват relative-правила за последователно закрепване.

<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="Иван Иванов"
        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="Онлайн"
        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="Редактиране на профил" />

</RelativeLayout>

Аватарът е закрепен отгоре чрез marginTop + centerHorizontal, името — под аватара чрез layout_below, статусът — под името, бутонът — към долния ръб на родителя чрез alignParentBottom. Всички елементи са независими един от друг, няма вериги или влагане.

Пример 2: Панел с икона и значка

Икона с червена значка (кръг с число) в горния десен ъгъл. Значката се позиционира спрямо иконата чрез align към нейните ръбове с отрицателни маржини за припокриване.

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

Значката е закрепена към горния и десния ръб на иконата. Отрицателните маржини (-6dp) изместват значката навън, създавайки ефект на излизане извън границата на иконата. Това е популярен модел за известия, който без RelativeLayout би изисквал FrameLayout или персонализирано рисуване.

Пример 3: Екран за вход с RelativeLayout

Формуляр за вход: лого в центъра отгоре, поле за имейл под него, поле за парола под имейла, бутон „Вход“ под паролата, връзка „Регистрация“ притисната към долната част. Всички елементи са последователно закрепени чрез 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="Парола"
        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="Вход" />

    <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="Нямате акаунт? Регистрирайте се"
        android:textColor="@color/primary" />

</RelativeLayout>

Екранът използва 5 елемента на едно ниво на йерархия. Потокът отгоре надолу (лого → имейл → парола → бутон) се осигурява от layout_below, а връзката е притисната отдолу чрез alignParentBottom. За същата функционалност LinearLayout би изисквал два вложени контейнера (един за горната група, втори за връзката с weight).

RelativeLayout vs ConstraintLayout: сравнение

Сравнение на две ViewGroup за относително позициониране: RelativeLayout (класически, API 1+) и ConstraintLayout (модерен, Jetpack). Критерии: гъвкавост, производителност, RTL поддръжка и адаптивност.

RelativeLayout отстъпва на ConstraintLayout почти във всички аспекти, с едно изключение: вграден е в Android SDK от API 1 и не изисква допълнителни зависимости. За проекти, които все още използват minSdk под API 14 (Android 4.0), RelativeLayout е единствената стандартна опция за относително позициониране. Във всички останали случаи Google препоръчва ConstraintLayout.