ConstraintLayout — यह क्या है, कॉन्सट्रेंट्स और फ्लैट हायरार्की

ConstraintLayout क्या है?

ConstraintLayout AndroidX ConstraintLayout लाइब्रेरी का एक ViewGroup है, जो घोषणात्मक बाधाओं (constraints) के माध्यम से लचीले और कुशल इंटरफ़ेस बनाने के लिए डिज़ाइन किया गया है। LinearLayout के विपरीत, जो एलिमेंट को एक पंक्ति में व्यवस्थित करता है, या RelativeLayout, जो पड़ोसियों के सापेक्ष एलिमेंट रखता है, ConstraintLayout प्रत्येक एलिमेंट को किसी भी अन्य एलिमेंट और पैरेंट के सापेक्ष एक साथ एंकर करने की अनुमति देता है।

इस लाइब्रेरी की घोषणा Google I/O 2016 में जटिल स्क्रीन के रेंडरिंग को तेज़ करने के समाधान के रूप में की गई थी। ConstraintLayout जिस मुख्य समस्या का समाधान करता है वह है लेआउट नेस्टिंग। प्रत्येक नेस्टेड ViewGroup कम से कम दो measure पास और एक layout पास जोड़ता है। 4 नेस्टिंग स्तरों वाली स्क्रीन 8 measure पास करती है; समान कार्यक्षमता वाला ConstraintLayout केवल 2 पास करता है। Google (Android Performance Blog, 2017) के अनुसार, तीन नेस्टेड LinearLayout को एक ConstraintLayout से बदलने से onMeasure समय में 40% की कमी आती है।

वर्तमान संस्करण ConstraintLayout 2.1.4 Android 2.3+ (API 9) पर AndroidX के माध्यम से स्थिर रूप से काम करता है। संस्करण 2.0 में सर्कुलर पोज़िशनिंग, Flow (स्वचालित एलिमेंट रैपिंग) और MotionLayout समर्थन शामिल हुए। आधुनिक Android विकास को समझने के लिए ConstraintLayout आवश्यक है — इसका उपयोग Jetpack Compose में मॉडिफायर की मूल अवधारणा के रूप में, Android Studio डिफ़ॉल्ट टेम्पलेट में और Material Design 3 में किया जाता है।

फ्लैट हायरार्की कैसे काम करती है

ConstraintLayout की फ्लैट हायरार्की का मतलब है कि सभी चाइल्ड व्यू समान नेस्टिंग स्तर पर हैं। एलिमेंट A को LinearLayout में और LinearLayout को RelativeLayout में रखने के बजाय, सभी एलिमेंट सीधे पैरेंट ConstraintLayout या एक-दूसरे से एट्रीब्यूट के माध्यम से बंधे होते हैं। यह प्रदान करता है: कम मेमोरी खपत (प्रत्येक ViewGroup Java heap में एक ऑब्जेक्ट है), तेज़ layout पास (कम रिकर्सिव कॉल), और स्क्रीन आकार बदलने पर अधिक पूर्वानुमानित व्यवहार।

कॉन्सट्रेंट सिस्टम: बाइंडिंग, बायस और मार्जिन

कॉन्सट्रेंट (बाधा) एक व्यू के किनारे (या उसके केंद्र) और दूसरे व्यू या पैरेंट के किनारे के बीच का संबंध है। प्रत्येक व्यू में 8 तक कॉन्सट्रेंट हो सकते हैं: left, top, right, bottom, start, end, baseline और center। पोज़िशनिंग के लिए न्यूनतम दो लंबवत कॉन्सट्रेंट पर्याप्त हैं (जैसे top + left)।

एट्रीब्यूट फ़ॉर्मेट: app:layout_constraint[Source]_to[Target]Of="[id]" — जहाँ Source बंधा हुआ किनारा है (Left, Right, Top, Bottom, Start, End, Baseline), और Target लक्ष्य किनारा है। उदाहरण: app:layout_constraintTop_toBottomOf="@+id/header" का अर्थ है "वर्तमान एलिमेंट का ऊपरी किनारा header एलिमेंट के निचले किनारे से बंधा है"। पैरेंट से बाँधने के लिए id parent का उपयोग किया जाता है।

बायस (झुकाव) एक पैरामीटर है जो विपरीत कॉन्सट्रेंट (left + right या top + bottom) होने पर काम करता है। मान 0 से 1 तक होते हैं: 0 — बाएँ/ऊपरी किनारे पर दबा हुआ, 0.5 — केंद्रित, 1 — दाएँ/निचले किनारे पर। एट्रीब्यूट: layout_constraintHorizontal_bias (0.0–1.0) और layout_constraintVertical_bias। मार्जिन मानक android:layout_margin* से सेट किए जाते हैं, लेकिन कॉन्सट्रेंट और मार्जिन स्वतंत्र रूप से काम करते हैं: मार्जिन कॉन्सट्रेंट से विस्थापन है, पड़ोसी व्यू से नहीं।

प्रतिशत पोज़िशनिंग

ConstraintLayout 1.1+ से, layout_constraintWidth_percent और layout_constraintHeight_percent के माध्यम से प्रतिशत-आधारित आकार का समर्थन जोड़ा गया। मान 0.3 का अर्थ है पैरेंट की चौड़ाई/ऊँचाई का 30%। बायस के साथ संयुक्त होने पर, यह बिना प्रोग्रामिंग के अनुकूली लेआउट बनाने की अनुमति देता है।

चेन और गाइडलाइन

चेन (श्रृंखला) दो या अधिक व्यू का एक समूह है जो द्विदिश कॉन्सट्रेंट (A, B से बंधा है, B, A से बंधा है) से जुड़े होते हैं। चेन मोड के अनुसार एलिमेंट के बीच स्वचालित रूप से स्थान वितरित करती हैं: spread (समान रूप से, मार्जिन सहित), spread_inside (समान रूप से, बाहरी एलिमेंट बिना किनारे मार्जिन के), packed (एलिमेंट सामान्य बायस के साथ एक साथ दबे हुए)। मोड app:layout_constraintHorizontal_chainStyle या layout_constraintVertical_chainStyle एट्रीब्यूट के माध्यम से सेट किया जाता है।

गाइडलाइन (दिशा-रेखा) एक सहायक व्यू है, जो रनटाइम पर अदृश्य है, जो बंधन के लिए एक रेखा परिभाषित करता है। गाइडलाइन क्षैतिज या लंबवत हो सकती है, dp, प्रतिशत (app:layout_constraintGuide_percent) या किनारे से विस्थापन (app:layout_constraintGuide_begin/end) में स्थित। गाइडलाइन अनुकूली लेआउट के लिए अपरिहार्य हैं — उदाहरण के लिए, डिवाइस आकार की परवाह किए बिना स्क्रीन को दो बराबर भागों में विभाजित करना।

Google I/O 2017 के अनुसार, spread_inside वाली चेन वज़न वाले नेस्टेड LinearLayout की तुलना में 15–20% अधिक कुशल हैं, क्योंकि वे वज़न गणना के लिए आवश्यक दोहरे measure पास से बचती हैं।

बैरियर, ग्रुप और वर्चुअल हेल्पर

बैरियर (अवरोध) एक वर्चुअल व्यू है जो एलिमेंट के समूह के आकार के आधार पर गतिशील रूप से अपनी स्थिति समायोजित करता है। निश्चित स्थिति वाली गाइडलाइन के विपरीत, बैरियर समूह के सबसे चौड़े एलिमेंट द्वारा "धकेला" जाता है। उदाहरण के लिए, यदि आपके पास अज्ञात लंबाई का शीर्षक और विवरण है, तो सबसे चौड़े टेक्स्ट के दाएँ किनारे से बंधा बैरियर आपको उनके ठीक बाद एक आइकन रखने की अनुमति देता है। एट्रीब्यूट: app:barrierDirection (left, right, top, bottom, start, end) और app:constraint_referenced_ids (अल्पविराम से अलग ids की सूची)।

Group एक वर्चुअल कंटेनर है जो एक साथ कई व्यू की दृश्यता प्रबंधित करता है। प्रत्येक एलिमेंट के लिए अलग-अलग setVisibility कॉल करने के बजाय, एक Group की दृश्यता बदलना पर्याप्त है। Group पोज़िशनिंग को प्रभावित नहीं करता — केवल दृश्यता को। Flow "प्रवाहशील" लेआउट बनाने के लिए एक वर्चुअल हेल्पर है: स्थान खत्म होने पर एलिमेंट स्वचालित रूप से नई पंक्ति/स्तंभ पर आ जाते हैं, जैसे पैराग्राफ में टेक्स्ट। Flow wrapMode: none, chain और aligned का समर्थन करता है।

ये उपकरण (Barrier, Group, Flow, Guideline) वर्चुअल हेल्पर कहलाते हैं क्योंकि ये क्लासिक अर्थ में व्यू नहीं हैं — ये हायरार्की में स्थान नहीं लेते और फ़ोकस या टच इवेंट में भाग नहीं लेते। इनका उद्देश्य नेस्टेड कंटेनर जोड़े बिना जटिल लेआउट के रखरखाव को सरल बनाना है।

उदाहरण: XML और Kotlin

उदाहरण 1: कॉन्सट्रेंट के साथ मूल फ़ॉर्म

एक सरल लॉगिन फ़ॉर्म जिसमें ईमेल फ़ील्ड, पासवर्ड फ़ील्ड और एक बटन है। बटन को छोड़कर सभी एलिमेंट पैरेंट से बंधे हैं — यह पासवर्ड फ़ील्ड के नीचे है। फ्लैट हायरार्की का उपयोग किया गया है — तीनों एलिमेंट एक ही स्तर पर हैं।

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/email_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp"
        android:layout_marginHorizontal="16dp" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/password_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/email_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginHorizontal="16dp" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/password_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginHorizontal="16dp"
        android:text="साइन इन करें" />

</androidx.constraintlayout.widget.ConstraintLayout>

सभी एलिमेंट की चौड़ाई 0dp (match_constraint) है, जिसका अर्थ है कि वे क्षैतिज मार्जिन सहित start से end कॉन्सट्रेंट तक फैलते हैं। यह मार्जिन के साथ match_parent के बराबर है, लेकिन बिना नेस्टिंग के।

उदाहरण 2: spread_inside के साथ चेन

तीन बटन किनारे मार्जिन के साथ क्षैतिज रूप से समान रूप से वितरित। spread_inside चेन बाहरी बटन को किनारों पर और मध्य बटन को उनके बीच केंद्रित रखती है।

<Button
    android:id="@+id/btn_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_center"
    android:text="बाएँ" />

<Button
    android:id="@+id/btn_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_left"
    app:layout_constraintRight_toLeftOf="@+id/btn_right"
    android:text="केंद्र" />

<Button
    android:id="@+id/btn_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_center"
    app:layout_constraintRight_toRightOf="parent"
    android:text="दाएँ" />

जब एलिमेंट में द्विदिश कॉन्सट्रेंट होते हैं तो चेन स्वचालित रूप से बनती है। spread_inside मोड app:layout_constraintHorizontal_chainStyle="spread_inside" के माध्यम से चेन के किसी भी एलिमेंट पर सेट किया जाता है। यह weightSum और layout_weight वाले LinearLayout की आवश्यकता को समाप्त करता है।

उदाहरण 3: सममित लेआउट के लिए गाइडलाइन

50% पर एक लंबवत गाइडलाइन का उपयोग करके दो समान कॉलम बनाना। बायाँ एलिमेंट बाएँ पैरेंट से और उसका दायाँ किनारा गाइडलाइन से बंधा है; दायाँ एलिमेंट अपने बाएँ किनारे से गाइडलाइन और दाएँ पैरेंट से बंधा है।

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/gl_midpoint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<TextView
    android:id="@+id/left_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/gl_midpoint"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

<TextView
    android:id="@+id/right_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/gl_midpoint"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

0.5 प्रतिशत वाली गाइडलाइन स्वचालित रूप से स्क्रीन चौड़ाई के अनुकूल हो जाती है। टैबलेट और फ़ोन दोनों पर, कॉलम अनुपात 50/50 रहता है। बाएँ/दाएँ नामकरण के लिए, RTL संगतता के लिए start/end एट्रीब्यूट का उपयोग करें।

तुलना: ConstraintLayout बनाम LinearLayout बनाम RelativeLayout

Android विकास के लिए तीन मुख्य ViewGroups की तुलना तालिका: ConstraintLayout, LinearLayout और RelativeLayout। मानदंड: लचीलापन, प्रदर्शन, कोड जटिलता और उपयोग के मामले।

Android Vitals (Google, 2025) के अनुसार, ConstraintLayout को मुख्य कंटेनर के रूप में उपयोग करने वाले ऐप नेस्टेड LinearLayout का उपयोग करने वाले ऐप की तुलना में जटिल स्क्रीन रेंडर करते समय औसतन 18% कम jank फ्रेम दिखाते हैं। IT Sectr में, हमने 2018 में सभी XML लेआउट के लिए मानक के रूप में ConstraintLayout अपनाया — इससे स्क्रीन हायरार्की की औसत गहराई 4.2 से घटकर 1.8 स्तर हो गई और नए फ़ॉर्म के विकास में 25% की तेज़ी आई।