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 के बाद घोषित किया गया है, तो A के मापन के समय B का आकार ज्ञात होना चाहिए। 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" — RTL लोकल के लिए toLeftOf के समान। - android:layout_toEndOf="@id/target" — RTL के लिए toRightOf के समान।

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" — टेक्स्ट बेसलाइन द्वारा संरेखण (विभिन्न फ़ॉन्ट आकार वाली स्ट्रिंग्स के लिए उपयोगी)।

केंद्रीकरण और Z-क्रम

RelativeLayout में केंद्रीकरण तीन गुणों द्वारा सेट किया जाता है: android:layout_centerInParent="true" (दोनों अक्षों पर पैरेंट का केंद्र), android:layout_centerHorizontal="true" (क्षैतिज रूप से केंद्र) और android:layout_centerVertical="true" (लंबवत रूप से केंद्र)। केंद्रीकरण अन्य नियमों के साथ संगत है: एक एलिमेंट क्षैतिज रूप से केंद्रित हो सकता है और पैरेंट के निचले किनारे से एंकर हो सकता है।

Z-क्रम (ओवरले क्रम) RelativeLayout में XML में एलिमेंट घोषणा के क्रम द्वारा निर्धारित होता है। पहला घोषित एलिमेंट पहले खींचा जाता है (नीचे होगा), अंतिम — अंत में (ऊपर होगा)। यदि आपको XML बदले बिना ओवरले क्रम बदलना है, तो android:elevation (API 21 से) का उपयोग करें — अधिक elevation वाले एलिमेंट ऊपर खींचे जाते हैं। API 21 से नीचे के वर्जन के लिए, ओवरले क्रम केवल घोषणा क्रम द्वारा नियंत्रित होता है।

महत्वपूर्ण: RelativeLayout पैरेंट के लिए android:elevation गुण का समर्थन नहीं करता — प्रत्येक एलिमेंट अपनी elevation को नियंत्रित करता है। जब स्थिति निर्धारण नियम और elevation विरोध करते हैं (जैसे, ओवरलैपिंग एलिमेंट), elevation रेंडरिंग के लिए प्राथमिकता लेता है, लेकिन स्थिति निर्धारण के लिए नहीं — अधिक elevation वाला एलिमेंट दूसरे को दृष्टिगत रूप से ओवरलैप कर सकता है, भले ही उसके लेआउट नियम इसे "पीछे" रखें।

उदाहरण: RelativeLayout के साथ XML लेआउट

उदाहरण 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: आइकन और बैज के साथ पैनल

एक आइकन जिसके ऊपरी दाएँ कोने में लाल बैज (संख्या के साथ वृत्त) है। बैज आइकन के सापेक्ष उसके किनारों पर संरेखण के माध्यम से ओवरलैप के लिए नकारात्मक मार्जिन के साथ स्थित है।

<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 बनाम ConstraintLayout: तुलना

सापेक्ष स्थिति निर्धारण के लिए दो ViewGroup की तुलना: RelativeLayout (क्लासिक, API 1+) और ConstraintLayout (आधुनिक, Jetpack)। मानदंड: लचीलापन, प्रदर्शन, RTL समर्थन और अनुकूलनशीलता।

RelativeLayout लगभग हर पहलू में ConstraintLayout से कमतर है सिवाय एक के: यह API 1 से Android SDK में निर्मित है और अतिरिक्त निर्भरता की आवश्यकता नहीं है। उन प्रोजेक्ट्स के लिए जो अभी भी API 14 (Android 4.0) से नीचे minSdk का उपयोग करते हैं, RelativeLayout सापेक्ष स्थिति निर्धारण का एकमात्र मानक विकल्प है। अन्य सभी मामलों में, Google ConstraintLayout की अनुशंसा करता है।