FrameLayout: βασικές έννοιες, απλή τοποθέτηση στο Android

Τι είναι το FrameLayout;

FrameLayout είναι η απλούστερη ViewGroup στο Android SDK, σχεδιασμένη για να μπλοκάρει μια περιοχή οθόνης και να εμφανίζει μία θυγατρική προβολή (ή να επικαλύπτει πολλές). Σε αντίθεση με το LinearLayout (σειριακή τοποθέτηση) και το RelativeLayout (σχετική τοποθέτηση), το FrameLayout δεν αλλάζει τη θέση των παιδιών — κάθε νέο child τοποθετείται από προεπιλογή στην επάνω αριστερή γωνία (0,0) και σχεδιάζεται πάνω από το προηγούμενο.

Το FrameLayout εμφανίστηκε στο API Level 1 και παραμένει το ελαφρύτερο κοντέινερ Android: δεν παρακάμπτει το onMeasure με περίπλοκη λογική και εκτελεί ελάχιστες λειτουργίες διάταξης. Σύμφωνα με το Android Performance Blog, το FrameLayout εκτελεί το onLayout σε ένα πέρασμα και πρακτικά δεν προσθέτει επιβάρυνση σε σύγκριση με την άμεση τοποθέτηση View. Αυτό το καθιστά ιδανική επιλογή για κοντέινερ όπου η ταχύτητα έχει σημασία: διατάξεις στοιχείων RecyclerView (σε συνδυασμό με ConstraintLayout για τοποθέτηση), κοντέινερ κατατμήσεων, επίπεδα επικάλυψης.

Το προεπιλεγμένο μέγεθος του FrameLayout καθορίζεται από το μεγαλύτερο θυγατρικό στοιχείο (αν δεν έχει οριστεί match_parent). Αν δεν έχει καθοριστεί κανένα child, το FrameLayout συρρικνώνεται σε (0,0). Το χαρακτηριστικό android:measureAllChildren (παρακάτω) αλλάζει αυτή τη συμπεριφορά.

FrameLayout στην ιεραρχία ViewGroup του Android

Το FrameLayout κληρονομεί από το ViewGroup και είναι ο άμεσος γονέας πολλών εξειδικευμένων κοντέινερ: FragmentContainerView (κατατμήσεις), CardView (κάρτες με σκιά), ScrollView (με ένα child), NestedScrollView. Κατά τη δημιουργία μιας Activity με πλοήγηση Fragment, το προεπιλεγμένο πρότυπο του Android Studio χρησιμοποιεί FrameLayout (ή FragmentContainerView) ως κύριο κοντέινερ για κατατμήσεις.

Foreground και measureAllChildren

android:foreground — χαρακτηριστικό FrameLayout που καθορίζει ένα drawable που σχεδιάζεται πάνω από όλα τα θυγατρικά στοιχεία. Σε αντίθεση με το background (κάτω από τα παιδιά), το foreground εμφανίζεται πάνω από το περιεχόμενο και μπορεί να είναι διαφανές. Χρησιμοποιείται για: εφέ επικάλυψης κατά το πάτημα (ripple μέσω ?attr/selectableItemBackground), κάλυψη εικόνων, εμφάνιση δεικτών κατάστασης (σημάδι επιλογής πάνω από εικόνα).

Το foreground υποστηρίζει τυπικούς πόρους drawable: ColorDrawable, ShapeDrawable, RippleDrawable, LayerDrawable. Από το API 23+ είναι διαθέσιμο το android:foregroundGravity για την τοποθέτηση του foreground (fill, center, top, bottom). Στη λειτουργία "γέμισμα" (fill), το foreground τεντώνεται σε ολόκληρο το FrameLayout· στη λειτουργία center — σχεδιάζεται στο κέντρο.

android:measureAllChildren — λογικό χαρακτηριστικό (προεπιλογή true) που καθορίζει αν πρέπει να μετρηθούν όλα τα θυγατρικά στοιχεία κατά τον υπολογισμό του μεγέθους του FrameLayout. Αν είναι true (προεπιλογή), το FrameLayout λαμβάνει υπόψη τα μεγέθη όλων των παιδιών, συμπεριλαμβανομένων των GONE (με μέγεθος 0). Αν είναι false, το FrameLayout μετρά μόνο τα VISIBLE και INVISIBLE παιδιά — τα στοιχεία GONE εξαιρούνται από τον υπολογισμό. Σύμφωνα με το Google I/O 2019, η απενεργοποίηση του measureAllChildren για κοντέινερ με πολλά στοιχεία GONE (π.χ. λίστες με εναλλαγή ορατότητας) επιταχύνει την αρχική απόδοση κατά 20–60%.

layout_gravity: τοποθέτηση μέσα στο FrameLayout

android:layout_gravity — χαρακτηριστικό του θυγατρικού στοιχείου του FrameLayout (και άλλων ViewGroup) που καθορίζει τη θέση του μέσα στο κοντέινερ. Στο FrameLayout, το layout_gravity είναι ο μόνος τρόπος ελέγχου της θέσης του θυγατρικού στοιχείου, καθώς το FrameLayout δεν παρέχει δικούς του κανόνες τοποθέτησης (όπως το RelativeLayout) ή κατεύθυνση (όπως το LinearLayout).

Πιθανές τιμές: top, bottom, left, right, center, center_horizontal, center_vertical, fill, fill_horizontal, fill_vertical, clip_horizontal, clip_vertical. Συνδυάζονται με |: android:layout_gravity="bottom|center_horizontal" — το στοιχείο πιέζεται στο κάτω άκρο και στοιχίζεται οριζόντια στο κέντρο. Για στοιχεία των οποίων το μέγεθος είναι μικρότερο από το FrameLayout, το layout_gravity καθορίζει τη θέση τους στον ελεύθερο χώρο.

Αν το layout_gravity δεν έχει οριστεί, από προεπιλογή το στοιχείο τοποθετείται στην επάνω αριστερή γωνία (top|left). Για FrameLayout που περιέχει πολλά παιδιά, το καθένα μπορεί να έχει το δικό του layout_gravity — ένα στοιχείο μπορεί να βρίσκεται στην επάνω αριστερή γωνία, ένα άλλο στην κάτω δεξιά, ένα τρίτο στο κέντρο. Αυτό επιτρέπει τη δημιουργία απλών επικαλύψεων (π.χ. ένα Χ κλεισίματος πάνω από μια εικόνα).

Διαφορά μεταξύ gravity και layout_gravity

android:gravity (γονικό χαρακτηριστικό) στοιχίζει το περιεχόμενο μέσα στο FrameLayout — για παράδειγμα, το κείμενο μέσα στο TextView. android:layout_gravity (θυγατρικό χαρακτηριστικό) στοιχίζει το ίδιο το στοιχείο μέσα στο FrameLayout. Στο πλαίσιο του FrameLayout, το gravity καθορίζει πώς τα παιδιά τοποθετούνται από προεπιλογή (ανάλογο του layout_gravity για όλα τα παιδιά ταυτόχρονα), αλλά το layout_gravity κάθε συγκεκριμένου στοιχείου παρακάμπτει τη γονική τιμή.

Παραδείγματα: XML και περιπτώσεις χρήσης

Παράδειγμα 1: Βασική επικάλυψη — ετικέτα σε εικόνα

Εικόνα και ετικέτα κειμένου στην κάτω δεξιά γωνία. Το FrameLayout περιέχει ένα ImageView πλήρους οθόνης και ένα TextView με layout_gravity="bottom|end" για τοποθέτηση από πάνω.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/product_photo"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="8dp"
        android:background="@drawable/badge_background"
        android:elevation="2dp"
        android:paddingHorizontal="8dp"
        android:paddingVertical="4dp"
        android:text="-30%"
        android:textColor="@android:color/white"
        android:textSize="14sp"
        android:textStyle="bold" />

</FrameLayout>

Το ImageView καταλαμβάνει ολόκληρο το FrameLayout (200dp ύψος). Το TextView με layout_gravity="bottom|end" τοποθετείται στην κάτω δεξιά γωνία πάνω από την εικόνα. Το elevation=2dp προσθέτει σκιά κάτω από την ετικέτα, διαχωρίζοντάς την οπτικά από την εικόνα. Αυτό είναι ένα ελάχιστο παράδειγμα που στο LinearLayout θα απαιτούσε ένθετο κοντέινερ ή προσαρμοσμένο κώδικα.

Παράδειγμα 2: Δείκτης φόρτωσης (γραμμή προόδου πάνω από περιεχόμενο)

Οθόνη με περιεχόμενο και γραμμή προόδου στο κέντρο που εμφανίζεται κατά τη φόρτωση. Το FrameLayout περιέχει δύο στοιχεία: το περιεχόμενο και ένα ProgressBar με visibility="gone" (εναλλάσσεται στον κώδικα).

<FrameLayout
    android:id="@+id/content_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/content_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Φορτωμένο περιεχόμενο"
        android:textSize="18sp" />

    <ProgressBar
        android:id="@+id/loading_spinner"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:visibility="gone" />

</FrameLayout>

Το ProgressBar είναι από προεπιλογή κρυμμένο (gone). Κατά την έναρξη της φόρτωσης, στον κώδικα καλείται findViewById(R.id.loading_spinner).visibility = View.VISIBLE — το spinner εμφανίζεται στο κέντρο πάνω από το περιεχόμενο. Μετά τη φόρτωση — .visibility = View.GONE. Το FrameLayout εξασφαλίζει επικάλυψη χωρίς αλλαγή της θέσης του περιεχομένου — το κείμενο δεν μετακινείται όταν εμφανίζεται το spinner, επειδή το ProgressBar σχεδιάζεται από πάνω.

Παράδειγμα 3: Κοντέινερ κατατμήσεων

FrameLayout ως τυπικό κοντέινερ για FragmentTransaction. Η δραστηριότητα αντικαθιστά τις κατατμήσεις μέσα σε αυτό το κοντέινερ ανάλογα με την πλοήγηση.

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

import androidx.fragment.app.FragmentTransaction

val fragmentContainer = R.id.fragment_container

fun navigateTo(fragment: Fragment) {
    supportFragmentManager
        .beginTransaction()
        .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
        .replace(fragmentContainer, fragment)
        .addToBackStack(null)
        .commit()
}

FrameLayout ως κοντέινερ κατατμήσεων — ο ελαφρύτερος τρόπος υποστήριξης Fragment Navigation. Το FragmentContainerView (απόγονος του FrameLayout) συνιστάται με το Navigation Component 2.4+, αλλά το απλό FrameLayout παραμένει έγκυρο για χειροκίνητες FragmentTransaction. Το βασικό πλεονέκτημα — η FragmentTransaction.replace() αντικαθιστά πλήρως το περιεχόμενο χωρίς να επηρεάζει τη δραστηριότητα.

Πότε να χρησιμοποιείτε το FrameLayout

Το FrameLayout είναι βέλτιστο για τέσσερα σενάρια: κοντέινερ κατατμήσεων (FragmentContainerView ή FrameLayout), επικάλυψη φόρτωσης (ProgressBar πάνω από περιεχόμενο), ετικέτες καρτών (σήμα σε εικόνα), κοντέινερ placeholder για ViewStub (τεμπέλικη φόρτωση).

Δεν είναι κατάλληλο για: σύνθετη τοποθέτηση πολλαπλών στοιχείων (χρησιμοποιήστε ConstraintLayout), σειριακές λίστες (LinearLayout ή RecyclerView), δυναμικές διατάξεις με αλλαγή σειράς στοιχείων.

FrameLayout ως ριζικό στοιχείο οθόνης — κακή πρακτική αν η οθόνη περιέχει περισσότερα από 2–3 στοιχεία. Για το ριζικό κοντέινερ χρησιμοποιήστε ConstraintLayout — δίνει περισσότερο έλεγχο στην τοποθέτηση χωρίς απώλεια απόδοσης. Χρησιμοποιήστε FrameLayout μόνο για θυγατρικά μπλοκ όπου χρειάζεται επικάλυψη ή placeholder.