FrameLayout: मुख्य अवधारणाएँ, Android में सरल पोजिशनिंग

FrameLayout क्या है?

FrameLayout Android SDK में सबसे सरल ViewGroup है, जो स्क्रीन क्षेत्र को अवरुद्ध करने और एक एकल चाइल्ड व्यू (या कई को ओवरले) प्रदर्शित करने के लिए डिज़ाइन किया गया है। LinearLayout (क्रमिक स्थान) और RelativeLayout (सापेक्ष स्थिति) के विपरीत, FrameLayout चाइल्ड की स्थिति नहीं बदलता — प्रत्येक नया चाइल्ड डिफ़ॉल्ट रूप से ऊपरी बाएँ कोने (0,0) में रखा जाता है और पिछले वाले के ऊपर ड्रा होता है।

FrameLayout API Level 1 में पेश किया गया था और यह सबसे हल्का Android कंटेनर बना हुआ है: यह जटिल तर्क के साथ onMeasure को ओवरराइड नहीं करता और न्यूनतम layout संचालन करता है। Android Performance Blog के अनुसार, FrameLayout एक ही पास में onLayout निष्पादित करता है और View को सीधे रखने की तुलना में लगभग कोई ओवरहेड नहीं जोड़ता। यह इसे उन कंटेनरों के लिए आदर्श बनाता है जहाँ गति मायने रखती है: RecyclerView आइटम लेआउट (पोजिशनिंग के लिए ConstraintLayout के साथ), Fragment कंटेनर, ओवरले लेयर।

FrameLayout का आकार डिफ़ॉल्ट रूप से सबसे बड़े चाइल्ड तत्व (यदि match_parent सेट नहीं है) द्वारा निर्धारित होता है। यदि कोई चाइल्ड निर्दिष्ट नहीं है, FrameLayout (0,0) पर सिमट जाता है। android:measureAllChildren एट्रिब्यूट (नीचे अनुभाग) इस व्यवहार को बदलता है।

Android ViewGroup पदानुक्रम में FrameLayout

FrameLayout ViewGroup से इनहेरिट करता है और कई विशेष कंटेनरों का प्रत्यक्ष पैरेंट है: FragmentContainerView (फ़्रैगमेंट), CardView (छाया वाले कार्ड), ScrollView (एकल चाइल्ड), NestedScrollView। Fragment नेविगेशन के साथ Activity बनाते समय, मानक Android Studio टेम्पलेट फ़्रैगमेंट के लिए रूट कंटेनर के रूप में FrameLayout (या FragmentContainerView) का उपयोग करता है।

फ़ोरग्राउंड और measureAllChildren

android:foreground — एक FrameLayout एट्रिब्यूट जो सभी चाइल्ड तत्वों के ऊपर ड्रा होने वाले drawable को निर्दिष्ट करता है। background (चाइल्ड के नीचे) के विपरीत, foreground सामग्री के ऊपर प्रदर्शित होता है और पारदर्शी हो सकता है। इसका उपयोग किया जाता है: दबाने पर ओवरले प्रभाव (ripple ?attr/selectableItemBackground के माध्यम से), इमेज मास्किंग, स्थिति संकेतक प्रदर्शन (चित्र के ऊपर चयन चेकमार्क)।

Foreground मानक drawable संसाधनों का समर्थन करता है: ColorDrawable, ShapeDrawable, RippleDrawable, LayerDrawable। API 23+ के बाद से, फ़ोरग्राउंड पोजिशनिंग के लिए android:foregroundGravity उपलब्ध है (fill, center, top, bottom)। फ़िल मोड (fill) में, फ़ोरग्राउंड पूरे FrameLayout में फैल जाता है; सेंटर मोड में, यह केंद्र में ड्रा होता है।

android:measureAllChildren — एक बूलियन एट्रिब्यूट (डिफ़ॉल्ट true) जो निर्धारित करता है कि FrameLayout आकार की गणना करते समय सभी चाइल्ड तत्वों को मापना है या नहीं। यदि true (डिफ़ॉल्ट), FrameLayout GONE (आकार 0 के साथ) सहित सभी चाइल्ड के आकार को ध्यान में रखता है। यदि false, FrameLayout केवल VISIBLE और INVISIBLE चाइल्ड को मापता है — GONE तत्व गणना से बाहर हो जाते हैं। Google I/O 2019 के अनुसार, कई GONE तत्वों (जैसे, दृश्यता टॉगल करने वाली सूचियाँ) वाले कंटेनरों के लिए measureAllChildren को बंद करने से प्रारंभिक ड्राइंग 20–60% तक तेज़ हो जाती है।

layout_gravity: FrameLayout के अंदर पोजिशनिंग

android:layout_gravity — FrameLayout (और अन्य ViewGroups) के चाइल्ड तत्व का एक एट्रिब्यूट जो कंटेनर के अंदर उसकी स्थिति निर्धारित करता है। 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 और इमेज के ऊपर पोजिशनिंग के लिए layout_gravity="bottom|end" वाला TextView है।

<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 ऊँचाई) को भरता है। layout_gravity="bottom|end" वाला TextView इमेज के ऊपर निचले दाएँ कोने में रखा जाता है। elevation=2dp लेबल के नीचे छाया जोड़ता है, इसे इमेज से दृश्य रूप से अलग करता है। इस न्यूनतम उदाहरण के लिए LinearLayout में नेस्टेड कंटेनर या कस्टम कोड की आवश्यकता होगी।

उदाहरण 2: लोडिंग इंडिकेटर (सामग्री के ऊपर प्रोग्रेस बार)

सामग्री और एक केंद्रित प्रोग्रेस बार वाली स्क्रीन जो लोडिंग के दौरान दिखाई देता है। FrameLayout में दो तत्व हैं: सामग्री और visibility="gone" वाला ProgressBar (कोड में टॉगल किया गया)।

<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 कॉल किया जाता है — स्पिनर सामग्री के ऊपर केंद्र में दिखाई देता है। लोडिंग के बाद — .visibility = View.GONE। FrameLayout सामग्री की स्थिति बदले बिना ओवरले प्रदान करता है — स्पिनर दिखाई देने पर टेक्स्ट नहीं हिलता, क्योंकि ProgressBar ऊपर ड्रा होता है।

उदाहरण 3: Fragment कंटेनर

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 को सपोर्ट करने का सबसे हल्का तरीका है। Navigation Component 2.4+ के साथ FragmentContainerView (FrameLayout की उपश्रेणी) की अनुशंसा की जाती है, लेकिन सादा FrameLayout मैन्युअल FragmentTransaction के लिए मान्य रहता है। मुख्य लाभ यह है कि FragmentTransaction.replace() Activity को प्रभावित किए बिना सामग्री को पूरी तरह से बदल देता है।

FrameLayout का उपयोग कब करें

FrameLayout चार परिदृश्यों के लिए इष्टतम है: फ़्रैगमेंट कंटेनर (FragmentContainerView या FrameLayout), लोडिंग ओवरले (सामग्री के ऊपर ProgressBar), कार्ड लेबल (इमेज पर लेबल), ViewStub के लिए प्लेसहोल्डर कंटेनर (आलसी लोडिंग)।

इसके लिए उपयुक्त नहीं: कई तत्वों की जटिल पोजिशनिंग (ConstraintLayout का उपयोग करें), अनुक्रमिक सूचियाँ (LinearLayout या RecyclerView), तत्व क्रम बदलने वाले डायनामिक लेआउट।

FrameLayout को स्क्रीन के रूट तत्व के रूप में — खराब अभ्यास यदि स्क्रीन में 2–3 से अधिक तत्व हैं। रूट कंटेनर के लिए, ConstraintLayout का उपयोग करें — यह प्रदर्शन हानि के बिना पोजिशनिंग पर अधिक नियंत्रण देता है। FrameLayout का उपयोग केवल चाइल्ड ब्लॉक के लिए करें जहाँ ओवरले या प्लेसहोल्डर की आवश्यकता है।