ConstraintLayout की मदद से रिस्पॉन्सिव यूज़र इंटरफ़ेस (यूआई) बनाना   Android Jetpack का हिस्सा.

Compose को आज़माएं
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर इस्तेमाल करने का सुझाव दिया जाता है. Compose में लेआउट इस्तेमाल करने का तरीका जानें.
Compose में ConstraintLayout →

ConstraintLayout की मदद से, फ़्लैट व्यू हैरारकी वाले बड़े और जटिल लेआउट बनाए जा सकते हैं. इसमें नेस्ट किए गए व्यू ग्रुप नहीं होते. यह RelativeLayout के जैसा ही है. इसमें सभी व्यू, सिबलिंग व्यू और पैरंट लेआउट के बीच के रिलेशनशिप के हिसाब से तय किए जाते हैं. हालांकि, यह RelativeLayout से ज़्यादा फ़्लेक्सिबल है. साथ ही, इसे Android Studio के लेआउट एडिटर के साथ इस्तेमाल करना आसान है.

ConstraintLayout की सभी सुविधाएं, सीधे तौर पर Layout Editor के विज़ुअल टूल से उपलब्ध होती हैं. ऐसा इसलिए, क्योंकि Layout API और Layout Editor को एक-दूसरे के लिए खास तौर पर बनाया गया है. एक्सएमएल में बदलाव करने के बजाय, ConstraintLayout का इस्तेमाल करके, खींचने और छोड़ने की सुविधा से लेआउट बनाया जा सकता है.

इस पेज पर, Android Studio 3.0 या इसके बाद के वर्शन में ConstraintLayout का इस्तेमाल करके लेआउट बनाने का तरीका बताया गया है. लेआउट एडिटर के बारे में ज़्यादा जानने के लिए, लेआउट एडिटर की मदद से यूज़र इंटरफ़ेस (यूआई) बनाना लेख पढ़ें.

ConstraintLayout की मदद से बनाए जा सकने वाले अलग-अलग लेआउट देखने के लिए, GitHub पर Constraint Layout Examples प्रोजेक्ट देखें.

पाबंदियों के बारे में खास जानकारी

ConstraintLayout में किसी व्यू की पोज़िशन तय करने के लिए, आपको व्यू के लिए कम से कम एक हॉरिज़ॉन्टल और एक वर्टिकल कंस्ट्रेंट जोड़ना होगा. हर कंस्ट्रेंट, किसी दूसरे व्यू, पैरंट लेआउट या अदृश्य गाइडलाइन से कनेक्शन या अलाइनमेंट को दिखाता है. हर कंस्ट्रेंट, वर्टिकल या हॉरिज़ॉन्टल ऐक्सिस पर व्यू की पोज़िशन तय करता है. हर व्यू में, हर ऐक्सिस के लिए कम से कम एक कंस्ट्रेंट होना चाहिए. हालांकि, अक्सर इससे ज़्यादा कंस्ट्रेंट की ज़रूरत होती है.

लेआउट एडिटर में किसी व्यू को छोड़ने पर, वह उसी जगह पर रहता है. भले ही, उसमें कोई कंस्ट्रेंट न हो. यह सिर्फ़ एडिटिंग को आसान बनाने के लिए है. अगर किसी व्यू में कोई कंस्ट्रेंट नहीं है, तो डिवाइस पर लेआउट चलाने के दौरान उसे [0,0] पोज़िशन (सबसे ऊपर बाएं कोने) पर रखा जाता है.

पहली इमेज में, लेआउट एडिटर में लेआउट अच्छा दिख रहा है. हालांकि, व्यू C पर कोई वर्टिकल कंस्ट्रेंट नहीं है. जब यह लेआउट किसी डिवाइस पर दिखता है, तो व्यू C, व्यू A के बाएं और दाएं किनारों के साथ हॉरिज़ॉन्टल अलाइन होता है. हालांकि, यह स्क्रीन के सबसे ऊपर दिखता है, क्योंकि इसमें कोई वर्टिकल कंस्ट्रेंट नहीं होता.

पहली इमेज. एडिटर में व्यू C को A के नीचे दिखाया गया है, लेकिन इसमें कोई वर्टिकल कंस्ट्रेंट नहीं है.

दूसरी इमेज. व्यू C को अब व्यू A के नीचे वर्टिकल रूप से कंस्ट्रेंट किया गया है.

कॉन्स्ट्रेंट मौजूद न होने पर, कंपाइल करने में गड़बड़ी नहीं होती. हालांकि, Layout Editor टूलबार में, मौजूद न होने वाले कॉन्स्ट्रेंट को गड़बड़ी के तौर पर दिखाता है. गड़बड़ियां और अन्य चेतावनियां देखने के लिए, चेतावनी और गड़बड़ियां दिखाएं पर क्लिक करें. लेआउट एडिटर, ऑटोकनेक्ट और अनुमानित कंस्ट्रेंट सुविधाओं की मदद से, आपके लिए कंस्ट्रेंट अपने-आप जोड़ता है. इससे आपको कंस्ट्रेंट जोड़ने में मदद मिलती है.

अपने प्रोजेक्ट में ConstraintLayout जोड़ना

अपने प्रोजेक्ट में ConstraintLayout का इस्तेमाल करने के लिए, यह तरीका अपनाएं:

  1. पक्का करें कि आपने maven.google.com फ़ाइल में, maven.google.com रिपॉज़िटरी के बारे में बताया हो:settings.gradle

    शानदार

        dependencyResolutionManagement {
      ...
      repositories {
          google()
      }
    )

    Kotlin

        dependencyResolutionManagement {
      ...
      repositories {
          google()
      }
    }
  2. मॉड्यूल-लेवल की build.gradle फ़ाइल में, लाइब्रेरी को डिपेंडेंसी के तौर पर जोड़ें. इसका उदाहरण यहां दिया गया है. ऐसा हो सकता है कि उदाहरण में दिखाया गया वर्शन, मौजूदा वर्शन से अलग हो.

    ग्रूवी

    dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.2.1"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
}

    Kotlin

    dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.1")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1")
}
  3. टूलबार में या सिंक करने की सूचना में, प्रोजेक्ट को Gradle फ़ाइलों के साथ सिंक करें पर क्लिक करें.

अब ConstraintLayout की मदद से, अपना लेआउट बनाया जा सकता है.

लेआउट बदलना

तीसरी इमेज. लेआउट को ConstraintLayout में बदलने का मेन्यू.

किसी मौजूदा लेआउट को कंस्ट्रेंट लेआउट में बदलने के लिए, यह तरीका अपनाएं:

  1. Android Studio में अपना लेआउट खोलें. इसके बाद, एडिटर विंडो में सबसे नीचे मौजूद Design टैब पर क्लिक करें.
  2. कॉम्पोनेंट ट्री विंडो में, लेआउट पर राइट क्लिक करें. इसके बाद, LinearLayout को ConstraintLayout में बदलें पर क्लिक करें.

नया लेआउट बनाना

नई कंस्ट्रेंट लेआउट फ़ाइल शुरू करने के लिए, यह तरीका अपनाएं:

  1. प्रोजेक्ट विंडो में, मॉड्यूल फ़ोल्डर पर क्लिक करें और फ़ाइल > नया > एक्सएमएल > लेआउट एक्सएमएल चुनें.
  2. लेआउट फ़ाइल के लिए कोई नाम डालें. इसके बाद, रूट टैग के लिए "androidx.constraintlayout.widget.ConstraintLayout" डालें.
  3. पूरा करें पर क्लिक करें.

कोई शर्त जोड़ना या हटाना

कोई शर्त जोड़ने के लिए, यह तरीका अपनाएं:

पहला वीडियो. व्यू की बाईं ओर को पैरंट की बाईं ओर से कंस्ट्रेंट किया गया है.

  1. पैलेट विंडो से किसी व्यू को खींचकर एडिटर में छोड़ें.

    ConstraintLayout में कोई व्यू जोड़ने पर, वह एक बाउंडिंग बॉक्स में दिखता है. इसके हर कोने पर स्क्वेयर रीसाइज़िंग हैंडल होते हैं और हर तरफ़ सर्कुलर कंस्ट्रेंट हैंडल होते हैं.

  2. व्यू को चुनने के लिए उस पर क्लिक करें.
  3. इनमें से कोई एक काम करें:
    • किसी कंस्ट्रेंट हैंडल पर क्लिक करें और उसे उपलब्ध ऐंकर पॉइंट पर खींचकर छोड़ें. यह पॉइंट, किसी दूसरे व्यू का किनारा, लेआउट का किनारा या कोई गाइडलाइन हो सकती है. ध्यान दें कि कंस्ट्रेंट हैंडल को खींचते समय, लेआउट एडिटर संभावित कनेक्शन ऐंकर और नीले रंग के ओवरले दिखाता है.

    • एट्रिब्यूट विंडो के लेआउट सेक्शन में मौजूद, कनेक्शन बनाएं बटन में से किसी एक पर क्लिक करें. जैसा कि चौथी इमेज में दिखाया गया है.

      चौथी इमेज. एट्रिब्यूट विंडो के लेआउट सेक्शन में जाकर, कनेक्शन बनाए जा सकते हैं.

कॉन्स्ट्रेंट बनाने पर, एडिटर दो व्यू को अलग करने के लिए, उन्हें डिफ़ॉल्ट मार्जिन देता है.

बाधाएं बनाते समय, इन नियमों का ध्यान रखें:

  • हर व्यू में कम से कम दो कंस्ट्रेंट होने चाहिए: एक हॉरिज़ॉन्टल और एक वर्टिकल.
  • पाबंदियां सिर्फ़ ऐसे कंस्ट्रेंट हैंडल और ऐंकर पॉइंट के बीच बनाई जा सकती हैं जो एक ही प्लेन पर मौजूद हों. किसी व्यू के वर्टिकल प्लेन—बाएं और दाएं किनारे—को सिर्फ़ दूसरे वर्टिकल प्लेन से अलाइन किया जा सकता है. साथ ही, बेसलाइन को सिर्फ़ दूसरी बेसलाइन से अलाइन किया जा सकता है.
  • हर कंस्ट्रेंट हैंडल का इस्तेमाल सिर्फ़ एक कंस्ट्रेंट के लिए किया जा सकता है. हालांकि, एक ही ऐंकर पॉइंट के लिए अलग-अलग व्यू से कई कंस्ट्रेंट बनाए जा सकते हैं.

किसी शर्त को मिटाने के लिए, इनमें से कोई भी तरीका अपनाएं:

  • किसी शर्त को चुनने के लिए उस पर क्लिक करें. इसके बाद, मिटाएं पर क्लिक करें.

  • किसी कंस्ट्रेंट ऐंकर पर Control-क्लिक करें (macOS पर Command-क्लिक करें). पाबंदी का रंग लाल हो जाता है. इससे पता चलता है कि इसे मिटाने के लिए क्लिक किया जा सकता है. जैसा कि पांचवीं इमेज में दिखाया गया है.

    पांचवीं इमेज. लाल रंग का कंस्ट्रेंट यह दिखाता है कि इसे मिटाने के लिए, इस पर क्लिक किया जा सकता है.

  • एट्रिब्यूट विंडो के लेआउट सेक्शन में, इमेज 6 में दिखाए गए कॉन्स्ट्रेंट ऐंकर पर क्लिक करें.

    छठी इमेज. किसी कंस्ट्रेंट ऐंकर को मिटाने के लिए, उस पर क्लिक करें.

वीडियो 2. ऐसी पाबंदी जोड़ना जो मौजूदा पाबंदी के ख़िलाफ़ हो.

अगर किसी व्यू पर एक-दूसरे के उलट पाबंदियां जोड़ी जाती हैं, तो पाबंदी वाली लाइनें स्प्रिंग की तरह मुड़ जाती हैं. इससे पता चलता है कि दोनों पाबंदियां एक-दूसरे के उलट हैं. इसे दूसरे वीडियो में दिखाया गया है. यह इफ़ेक्ट तब सबसे ज़्यादा दिखता है, जब व्यू का साइज़ "तय किया गया" या "कॉन्टेंट रैप करें" पर सेट होता है. ऐसे में, व्यू को सीमाओं के बीच में रखा जाता है. अगर आपको व्यू का साइज़ बदलकर, तय की गई सीमाओं के मुताबिक करना है, तो साइज़ को बदलकर "तय की गई सीमाओं के मुताबिक" करें. अगर आपको मौजूदा साइज़ को बनाए रखना है, लेकिन व्यू को इस तरह से मूव करना है कि वह बीच में न हो, तो कंटेंट के अलाइनमेंट में बदलाव करें.

नीचे दिए गए सेक्शन में बताए गए तरीके से, अलग-अलग तरह के लेआउट बिहेवियर के लिए कंस्ट्रेंट का इस्तेमाल किया जा सकता है.

माता-पिता की पोज़िशन

किसी व्यू के किनारे को लेआउट के किनारे तक सीमित करें.

आकृति 7 में, व्यू की बाईं ओर को पैरंट लेआउट के बाएं किनारे से कनेक्ट किया गया है. मार्जिन की मदद से, किनारे से दूरी तय की जा सकती है.

सातवीं इमेज. पैरंट के लिए हॉरिज़ॉन्टल कंस्ट्रेंट.

ऑर्डर की पोज़िशन

दो व्यू के दिखने का क्रम तय करें. ये व्यू वर्टिकल या हॉरिज़ॉन्टल हो सकते हैं.

आठवीं इमेज में, B को हमेशा A की दाईं ओर रहना है और C को A के नीचे रहना है. हालांकि, इन सीमाओं का मतलब यह नहीं है कि B को A के साथ अलाइन किया गया है. इसलिए, B अब भी ऊपर और नीचे जा सकता है.

आठवीं इमेज. हॉरिज़ॉन्टल और वर्टिकल कॉन्स्ट्रेंट.

अलाइनमेंट

किसी व्यू के किनारे को दूसरे व्यू के किनारे के साथ अलाइन करें.

आकृति 9 में, B की बाईं ओर को A की बाईं ओर से अलाइन किया गया है. अगर आपको व्यू सेंटर अलाइन करने हैं, तो दोनों ओर एक कंस्ट्रेंट बनाएं.

अलाइनमेंट को ऑफ़सेट करने के लिए, व्यू को कंस्ट्रेंट से अंदर की ओर खींचें. उदाहरण के लिए, इमेज 10 में B को 24dp ऑफ़सेट अलाइनमेंट के साथ दिखाया गया है. ऑफ़सेट, कंस्ट्रेंट वाले व्यू के मार्जिन से तय होता है.

आपके पास उन सभी व्यू को चुनने का विकल्प भी होता है जिन्हें अलाइन करना है. इसके बाद, अलाइनमेंट का टाइप चुनने के लिए, टूलबार में अलाइन करें पर क्लिक करें.

नौवीं इमेज. हॉरिज़ॉन्टल अलाइनमेंट का कॉन्सट्रैंट.

दसवीं इमेज. यह हॉरिज़ॉन्टल अलाइनमेंट का ऑफ़सेट कंस्ट्रेंट है.

बेसलाइन अलाइनमेंट

किसी व्यू के टेक्स्ट बेसलाइन को दूसरे व्यू के टेक्स्ट बेसलाइन के साथ अलाइन करें.

आकृति 11 में, B की पहली लाइन को A के टेक्स्ट के साथ अलाइन किया गया है.

बेसलाइन की सीमा तय करने के लिए, उस टेक्स्ट व्यू पर राइट क्लिक करें जिसकी सीमा तय करनी है. इसके बाद, बेसलाइन दिखाएं पर क्लिक करें. इसके बाद, टेक्स्ट की बेसलाइन पर क्लिक करें और लाइन को दूसरी बेसलाइन पर खींचें और छोड़ें.

ग्यारहवीं इमेज. बेसलाइन अलाइनमेंट की शर्त.

किसी दिशा-निर्देश के मुताबिक सीमित करें

आपके पास वर्टिकल या हॉरिज़ॉन्टल गाइडलाइन जोड़ने का विकल्प होता है. इससे आपको अपने व्यू को सीमित करने में मदद मिलती है. साथ ही, यह आपके ऐप्लिकेशन के उपयोगकर्ताओं को नहीं दिखती. गाइडलाइन को लेआउट में, dp यूनिट या लेआउट के किनारे के हिसाब से प्रतिशत के आधार पर रखा जा सकता है.

कोई गाइडलाइन बनाने के लिए, टूलबार में गाइडलाइन पर क्लिक करें. इसके बाद, वर्टिकल गाइडलाइन जोड़ें या हॉरिज़ॉन्टल गाइडलाइन जोड़ें पर क्लिक करें.

डॉट वाली लाइन को खींचकर उसकी जगह बदलें. साथ ही, मेज़रमेंट मोड को टॉगल करने के लिए, गाइडलाइन के किनारे पर मौजूद सर्कल पर क्लिक करें.

बारहवीं इमेज. दिशा-निर्देश से कंस्ट्रेंट किया गया व्यू.

किसी बैरियर तक सीमित रखें

दिशा-निर्देश की तरह ही बैरियर भी एक अदृश्य लाइन होती है. इसकी मदद से, व्यू को कंस्ट्रेंट किया जा सकता है. हालांकि, बैरियर अपनी पोज़िशन तय नहीं करता. इसके बजाय, बैरियर की पोज़िशन, उसमें मौजूद व्यू की पोज़िशन के हिसाब से बदलती है. यह तब काम का होता है, जब आपको किसी व्यू को एक खास व्यू के बजाय, व्यू के सेट तक सीमित करना हो.

उदाहरण के लिए, इमेज 13 में व्यू C को बैरियर की दाईं ओर रखा गया है. बैरियर को व्यू A और व्यू B, दोनों के "आखिरी" (या बाएं से दाएं लेआउट में दाईं ओर) पर सेट किया गया है. व्यू ए या व्यू बी का सबसे दाईं ओर का हिस्सा, बैरियर को दाईं ओर ले जाता है.

बैरियर बनाने के लिए, यह तरीका अपनाएं:

  1. टूलबार में, दिशा-निर्देश पर क्लिक करें. इसके बाद, वर्टिकल बैरियर जोड़ें या हॉरिज़ॉन्टल बैरियर जोड़ें पर क्लिक करें.
  2. कॉम्पोनेंट ट्री विंडो में, वे व्यू चुनें जिन्हें आपको बैरियर के अंदर रखना है. इसके बाद, उन्हें बैरियर कॉम्पोनेंट में खींचें और छोड़ें.
  3. कॉम्पोनेंट ट्री से बैरियर चुनें. इसके बाद, एट्रिब्यूट विंडो खोलें और barrierDirection सेट करें.

अब बैरियर के लिए, किसी दूसरे व्यू से कंस्ट्रेंट बनाया जा सकता है.

आपके पास बैरियर के अंदर मौजूद व्यू को बैरियर से कंस्ट्रेंट करने का विकल्प भी होता है. इस तरह, बैरियर में मौजूद सभी व्यू को एक-दूसरे के साथ अलाइन किया जा सकता है. भले ही, आपको यह न पता हो कि कौनसा व्यू सबसे लंबा या ऊंचा है.

बैरियर की "कम से कम" पोज़िशन तय करने के लिए, बैरियर के अंदर एक दिशा-निर्देश भी शामिल किया जा सकता है.

तेरहवीं इमेज. व्यू C को एक बैरियर से सीमित किया गया है. यह बैरियर, व्यू A और व्यू B की पोज़िशन और साइज़ के हिसाब से बदलता है.

कंस्ट्रेंट के झुकाव को कम या ज़्यादा करना

जब किसी व्यू के दोनों ओर कोई कंस्ट्रेंट जोड़ा जाता है और उसी डाइमेंशन के लिए व्यू का साइज़ "तय किया गया" या "रैप कॉन्टेंट" होता है, तो व्यू डिफ़ॉल्ट रूप से दोनों कंस्ट्रेंट के बीच में 50% के हिसाब से अलाइन हो जाता है. झुकाव को कम या ज़्यादा करने के लिए, एट्रिब्यूट विंडो में जाकर, झुकाव वाले स्लाइडर को खींचें और छोड़ें. इसके अलावा, वीडियो 3 में दिखाए गए तरीके से व्यू को खींचकर भी झुकाव को कम या ज़्यादा किया जा सकता है.

अगर आपको व्यू का साइज़, तय की गई सीमाओं के हिसाब से करना है, तो साइज़ को बदलकर "तय की गई सीमाओं के हिसाब से" करें.

तीसरा वीडियो. कंस्ट्रेंट के झुकाव को कम या ज़्यादा किया जा रहा है.

व्यू साइज़ एडजस्ट करना

चौदहवीं इमेज. व्यू चुनते समय, एट्रिब्यूट विंडो में ये कंट्रोल शामिल होते हैं: 1 साइज़ का अनुपात, 2 सीमाओं को मिटाना, 3 ऊंचाई या चौड़ाई का मोड, 4 मार्जिन, और 5 सीमा का झुकाव. लेआउट एडिटर में, अलग-अलग कंस्ट्रेंट को हाइलाइट भी किया जा सकता है. इसके लिए, 6 कंस्ट्रेंट की सूची में जाकर उन पर क्लिक करें.

व्यू का साइज़ बदलने के लिए, कोने वाले हैंडल का इस्तेमाल किया जा सकता है. हालांकि, इससे साइज़ को हार्डकोड किया जाता है. इसका मतलब है कि अलग-अलग कॉन्टेंट या स्क्रीन साइज़ के लिए, व्यू का साइज़ नहीं बदलता. साइजिंग का कोई दूसरा मोड चुनने के लिए, किसी व्यू पर क्लिक करें. इसके बाद, एडिटर के दाईं ओर मौजूद एट्रिब्यूट विंडो खोलें.

एट्रिब्यूट विंडो के सबसे ऊपर व्यू इंस्पेक्टर होता है. इसमें लेआउट के कई एट्रिब्यूट के कंट्रोल होते हैं. इन्हें इमेज 14 में दिखाया गया है. यह सुविधा सिर्फ़ कंस्ट्रेंट लेआउट में मौजूद व्यू के लिए उपलब्ध है.

आकृति 14 में कॉलआउट 3 से दिखाए गए सिंबल पर क्लिक करके, ऊंचाई और चौड़ाई के हिसाब लगाने के तरीके को बदला जा सकता है. ये सिंबल, साइज़ मोड को इस तरह दिखाते हैं. इन सेटिंग के बीच टॉगल करने के लिए, इस सिंबल पर क्लिक करें:

  • तय किया गया: नीचे दिए गए टेक्स्ट बॉक्स में कोई डाइमेंशन तय करें या एडिटर में व्यू का साइज़ बदलकर डाइमेंशन तय करें.
  • रैप कॉन्टेंट: व्यू सिर्फ़ उतना बड़ा होता है जितना उसके कॉन्टेंट को फ़िट करने के लिए ज़रूरी होता है.
    • layout_constrainedWidth

      • इसे true पर सेट करें, ताकि हॉरिज़ॉन्टल डाइमेंशन को बदलकर सीमाओं के हिसाब से किया जा सके. डिफ़ॉल्ट रूप से, WRAP_CONTENT पर सेट किए गए किसी विजेट पर कोई पाबंदी नहीं होती.

  • मिलान की शर्तें: मार्जिन को ध्यान में रखने के बाद, व्यू को हर तरफ़ से शर्तों को पूरा करने के लिए ज़्यादा से ज़्यादा बढ़ाया जाता है. हालांकि, इन एट्रिब्यूट और वैल्यू का इस्तेमाल करके, इस व्यवहार में बदलाव किया जा सकता है. ये एट्रिब्यूट सिर्फ़ तब लागू होते हैं, जब व्यू की चौड़ाई को "match constraints" पर सेट किया जाता है:
    • layout_constraintWidth_min

      यह व्यू की कम से कम चौड़ाई के लिए dp डाइमेंशन लेता है.

    • layout_constraintWidth_max

      इससे व्यू की ज़्यादा से ज़्यादा चौड़ाई के लिए, dp डाइमेंशन मिलता है.

    हालांकि, अगर दिए गए डाइमेंशन में सिर्फ़ एक शर्त है, तो व्यू को उसके कॉन्टेंट के हिसाब से बड़ा कर दिया जाता है. इस मोड का इस्तेमाल करके, ऊंचाई या चौड़ाई में से किसी एक को भी साइज़ का अनुपात सेट किया जा सकता है.

साइज़ को रेशियो के तौर पर सेट करना

15वीं इमेज. व्यू को 16:9 के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) पर सेट किया जाता है. साथ ही, चौड़ाई को ऊंचाई के अनुपात के आधार पर सेट किया जाता है.

अगर व्यू के कम से कम एक डाइमेंशन को "सीमाओं से मेल खाने वाला" (0dp) पर सेट किया गया है, तो व्यू के साइज़ को किसी अनुपात पर सेट किया जा सकता है. जैसे, 16:9. अनुपात चालू करने के लिए, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) की सीमा टॉगल करें (आकृति 14 में कॉलआउट 1) पर क्लिक करें. इसके बाद, दिखने वाले इनपुट में width:height अनुपात डालें.

अगर चौड़ाई और ऊंचाई, दोनों को "सीमाओं के मुताबिक" पर सेट किया गया है, तो आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) की सीमा टॉगल करें पर क्लिक करके यह चुना जा सकता है कि कौनसी डाइमेंशन, दूसरी डाइमेंशन के अनुपात पर आधारित है. व्यू इंस्पेक्टर से पता चलता है कि किस डाइमेंशन को रेशियो के तौर पर सेट किया गया है. इसके लिए, वह डाइमेंशन के किनारों को एक सीधी लाइन से जोड़ता है.

उदाहरण के लिए, अगर आपने दोनों साइड को "मैच कॉन्स्ट्रेंट" पर सेट किया है, तो चौड़ाई को ऊंचाई के अनुपात में सेट करने के लिए, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के कॉन्स्ट्रेंट को टॉगल करें पर दो बार क्लिक करें. पूरे साइज़ का फ़ैसला व्यू की ऊंचाई से होता है. इसे किसी भी तरह से तय किया जा सकता है, जैसा कि इमेज 15 में दिखाया गया है.

व्यू मार्जिन में बदलाव करना

अपने व्यू को एक समान दूरी पर रखने के लिए, टूलबार में मौजूद मार्जिन पर क्लिक करें. इससे, लेआउट में जोड़े गए हर व्यू के लिए डिफ़ॉल्ट मार्जिन चुना जा सकेगा. डिफ़ॉल्ट मार्जिन में किया गया कोई भी बदलाव, सिर्फ़ उन व्यू पर लागू होता है जिन्हें आपने इसके बाद जोड़ा है.

एट्रिब्यूट विंडो में जाकर, हर व्यू के लिए मार्जिन को कंट्रोल किया जा सकता है. इसके लिए, आपको हर कंस्ट्रेंट को दिखाने वाली लाइन पर मौजूद संख्या पर क्लिक करना होगा. इमेज 14 में, कॉलआउट 4 से पता चलता है कि बॉटम मार्जिन को 16dp पर सेट किया गया है.

16वीं इमेज. टूलबार में मौजूद मार्जिन बटन.

टूल से दिए गए सभी मार्जिन, 8dp के फ़ैक्टर होते हैं. इससे आपके व्यू, Material Design के 8dp स्क्वेयर ग्रिड के सुझावों के साथ अलाइन हो जाते हैं.

चेन की मदद से लीनियर ग्रुप कंट्रोल करना

17वीं इमेज. दो व्यू वाली हॉरिज़ॉन्टल चेन.

चेन, व्यू का एक ग्रुप है जो बाई-डायरेक्शनल पोज़िशन कंस्ट्रेंट के साथ एक-दूसरे से जुड़े होते हैं. चेन में मौजूद व्यू को वर्टिकली या हॉरिज़ॉन्टली डिस्ट्रिब्यूट किया जा सकता है.

18वीं इमेज. हर चेन स्टाइल के उदाहरण.

चेन को इनमें से किसी भी तरीके से स्टाइल किया जा सकता है:

  1. स्प्रेड: मार्जिन का हिसाब लगाने के बाद, व्यू को बराबर हिस्सों में बांटा जाता है. यह डिफ़ॉल्ट विकल्प है.
  2. अंदर की ओर फैलाना: पहले और आखिरी व्यू, चेन के हर छोर पर मौजूद कंस्ट्रेंट से जुड़े होते हैं. बाकी व्यू को बराबर हिस्सों में बांट दिया जाता है.
  3. वेटेड: जब चेन को स्प्रेड या स्प्रेड इनसाइड पर सेट किया जाता है, तब "सीमाएं पूरी करें" (0dp) पर एक या उससे ज़्यादा व्यू सेट करके, बाकी जगह को भरा जा सकता है. डिफ़ॉल्ट रूप से, "सीमाएं पूरी करें" पर सेट किए गए हर व्यू के बीच की जगह को बराबर बांटा जाता है. हालांकि, layout_constraintHorizontal_weight और layout_constraintVertical_weight एट्रिब्यूट का इस्तेमाल करके, हर व्यू को अहमियत के हिसाब से वेट असाइन किया जा सकता है. यह लीनियर लेआउट में layout_weight की तरह ही काम करता है: जिस व्यू का वेट सबसे ज़्यादा होता है उसे सबसे ज़्यादा जगह मिलती है. साथ ही, जिन व्यू का वेट एक जैसा होता है उन्हें एक जैसी जगह मिलती है.
  4. पैक्ड: मार्जिन को ध्यान में रखने के बाद, व्यू को एक साथ पैक किया जाता है. चेन के "हेड" व्यू के झुकाव में बदलाव करके, पूरी चेन के झुकाव में बदलाव किया जा सकता है. जैसे, बाईं या दाईं ओर या ऊपर या नीचे की ओर.

चेन का "हेड" व्यू, चेन की स्टाइल को एक्सएमएल में तय करता है. हॉरिज़ॉन्टल चेन में, यह सबसे बाईं ओर मौजूद व्यू होता है (बाएं से दाएं लेआउट में). वहीं, वर्टिकल चेन में, यह सबसे ऊपर मौजूद व्यू होता है. हालांकि, चेन में मौजूद किसी भी व्यू को चुनकर और व्यू के नीचे दिखने वाले चेन बटन पर क्लिक करके, स्प्रेड, स्प्रेड इनसाइड, और पैक किए गए के बीच टॉगल किया जा सकता है.

चेन बनाने के लिए, वीडियो 4 में दिखाए गए तरीके का इस्तेमाल करें:

  1. चेन में शामिल किए जाने वाले सभी व्यू चुनें.
  2. किसी व्यू पर राइट क्लिक करें.
  3. चेन चुनें.
  4. हॉरिज़ॉन्टल तौर पर बीच में लाएं या वर्टिकल तौर पर बीच में लाएं को चुनें.

चौथा वीडियो. हॉरिज़ॉन्टल चेन बनाना.

चेन का इस्तेमाल करते समय इन बातों का ध्यान रखें:

  • कोई व्यू, हॉरिज़ॉन्टल और वर्टिकल, दोनों चेन का हिस्सा हो सकता है. इसलिए, आपके पास ग्रिड लेआउट को अपनी ज़रूरत के हिसाब से बनाने का विकल्प होता है.
  • कोई चेन ठीक से तब ही काम करती है, जब चेन के हर सिरे को एक ही ऐक्सिस पर मौजूद किसी दूसरे ऑब्जेक्ट से जोड़ा गया हो. जैसा कि इमेज 14 में दिखाया गया है.
  • चेन का ओरिएंटेशन वर्टिकल या हॉरिज़ॉन्टल होता है. हालांकि, किसी एक का इस्तेमाल करने से व्यू उस दिशा में अलाइन नहीं होते हैं. चेन में हर व्यू को सही जगह पर रखने के लिए, अन्य कंस्ट्रेंट शामिल करें. जैसे, अलाइनमेंट कंस्ट्रेंट.

अपने-आप शर्तें बनाने की सुविधा

लेआउट में व्यू जोड़ते समय, हर व्यू में कंस्ट्रेंट जोड़ने के बजाय, हर व्यू को लेआउट एडिटर में अपनी पसंद की जगह पर ले जाएं. इसके बाद, कंस्ट्रेंट का अनुमान लगाएं पर क्लिक करें, ताकि कंस्ट्रेंट अपने-आप बन जाएं.

अनुमानित सीमाएं, लेआउट को स्कैन करके यह पता लगाता है कि सभी व्यू के लिए, सीमाओं का सबसे असरदार सेट कौन-सा है. इससे व्यू को उनकी मौजूदा जगह पर ही रखा जाता है. हालांकि, इसमें बदलाव करने की सुविधा मिलती है. आपको अलग-अलग स्क्रीन साइज़ और ओरिएंटेशन के हिसाब से लेआउट में बदलाव करने पड़ सकते हैं.

माता-पिता के खाते से अपने-आप कनेक्ट होने की सुविधा एक अलग सुविधा है. इसे चालू किया जा सकता है. इस सुविधा के चालू होने पर, जब किसी पैरंट व्यू में चाइल्ड व्यू जोड़े जाते हैं, तो यह सुविधा हर व्यू के लिए दो या उससे ज़्यादा कंस्ट्रेंट अपने-आप बना देती है. हालांकि, ऐसा सिर्फ़ तब होता है, जब व्यू को पैरंट लेआउट के हिसाब से कंस्ट्रेंट करना ज़रूरी हो. ऑटोकनेक्ट की सुविधा, लेआउट में मौजूद अन्य व्यू पर कोई पाबंदी नहीं लगाती.

अपने-आप कनेक्ट होने की सुविधा डिफ़ॉल्ट रूप से बंद होती है. इसे चालू करने के लिए, लेआउट एडिटर टूलबार में मौजूद माता-पिता के खाते से अपने-आप कनेक्ट होने की सुविधा चालू करें पर क्लिक करें.

मुख्य-फ़्रेम वाले ऐनिमेशन

ConstraintLayout के अंदर, ConstraintSet और TransitionManager का इस्तेमाल करके, एलिमेंट के साइज़ और पोज़िशन में हुए बदलावों को ऐनिमेट किया जा सकता है.

ConstraintSet एक हल्का ऑब्जेक्ट है. यह ConstraintLayout में मौजूद सभी चाइल्ड एलिमेंट की सीमाओं, मार्जिन, और पैडिंग को दिखाता है. दिखाए गए ConstraintLayout पर ConstraintSet लागू करने पर, लेआउट अपने सभी चाइल्ड के लिए कॉन्स्ट्रेंट अपडेट करता है.

ConstraintSet का इस्तेमाल करके ऐनिमेशन बनाने के लिए, दो लेआउट फ़ाइलें तय करें. ये फ़ाइलें, ऐनिमेशन के लिए शुरुआती और आखिरी कीफ़्रेम के तौर पर काम करती हैं. इसके बाद, दूसरी कीफ़्रेम फ़ाइल से ConstraintSet लोड किया जा सकता है और उसे दिखाए जा रहे ConstraintLayout पर लागू किया जा सकता है.

यहां दिए गए कोड के उदाहरण में, किसी बटन को स्क्रीन पर सबसे नीचे ले जाने के लिए ऐनिमेशन बनाने का तरीका बताया गया है.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<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">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
 
// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<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">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

अन्य संसाधन

ConstraintLayout का इस्तेमाल Sunflower डेमो ऐप्लिकेशन में किया जाता है.