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 έλυσε αυτό το πρόβλημα προσφέροντας σχετική τοποθέτηση σε ένα επίπεδο ιεραρχίας. Ωστόco, η ευελιξία του είναι περιορισμένη σε σύγκριση με το σύγχρονο ConstraintLayout: το RelativeLayout δεν υποστηρίζει αλυσίδες, φράγματα, οδηγούς και ποσοστιαία μεγέθη.

Το RelativeLayout έχει δύο βασικά χαρακτηριστικά: ένα πέρασμα onMeasure (σε αντίθεση με το LinearLayout με weight, που απαιτεί δύο περάσματα) και εξάρτηση από τη σειρά δήλωσης — εάν το στοιχείο Α αναφέρεται στο στοιχείο Β και το Β δηλώνεται μετά το Α, το Β πρέπει να έχει γνωστό μέγεθος τη στιγμή μέτρησης του Α. Σύμφωνα με τον 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: Προφίλ χρήστη

Avatar στο κέντρο πάνω, όνομα κάτω από το avatar, κατάσταση κάτω από το όνομα, κουμπί ενέργειας στο κάτω μέρος της οθόνης. Όλα τα στοιχεία χρησιμοποιούν 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>

Το avatar είναι αγκυρωμένο πάνω μέσω marginTop + centerHorizontal, το όνομα — κάτω από το avatar μέσω 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

Φόρμα σύνδεσης: λογότυπο στο κέντρο πάνω, πεδίο email από κάτω, πεδίο κωδικού κάτω από το email, κουμπί 'Σύνδεση' κάτω από τον κωδικό, σύνδεσμος 'Εγγραφή' καρφιτσωμένος κάτω. Όλα τα στοιχεία είναι διαδοχικά αγκυρωμένα μέσω 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 στοιχεία σε ένα επίπεδο ιεραρχίας. Η ροή από πάνω προς τα κάτω (λογότυπο → email → κωδικός → κουμπί) εξασφαλίζεται από το 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.