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

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

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

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

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

ConstraintLayout की मदद से बनाए जा सकने वाले कई तरह के लेआउट देखने के लिए, देखें GitHub पर कंस्ट्रेंट लेआउट के उदाहरण प्रोजेक्ट.

कंस्ट्रेंट की खास जानकारी

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

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

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

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

दूसरा डायग्राम. व्यू C अब वर्टिकल तौर पर सीमित है नीचे व्यू ए.

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

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

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

  1. पक्का करें कि आपने maven.google.com डेटा स्टोर करने की जगह का एलान किया हो आपकी settings.gradle फ़ाइल में:

    ग्रूवी

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

    Kotlin

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

    ग्रूवी

    dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.2.0-beta01"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01"
}

    Kotlin

    dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01")
}
  3. टूलबार या सिंक की सूचना में, Gredle के साथ प्रोजेक्ट सिंक करें Files.

अब आप ConstraintLayout की मदद से अपना लेआउट बनाने के लिए तैयार हैं.

लेआउट को बदलना

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

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

  1. Android Studio में अपना लेआउट खोलें और डिज़ाइन टैब पर क्लिक करें सबसे नीचे क्लिक करें.
  2. कॉम्पोनेंट ट्री विंडो में, लेआउट पर राइट-क्लिक करें और लीनियर लेआउट को ConstraintLayout में बदलें.

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

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

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

किसी कंस्ट्रेंट को जोड़ना या हटाना

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

पहला वीडियो. व्यू का बायां हिस्सा, बाईं ओर सीमित है माता-पिता की तरफ़ से.

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

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

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

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

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

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

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

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

इनमें से कोई भी तरीका अपनाकर, कंस्ट्रेंट को मिटाया जा सकता है:

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

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

    पांचवी इमेज. लाल रंग के कंस्ट्रेंट से पता चलता है कि जिसे क्लिक करके उसे मिटाया जा सकता है.

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

    छठी इमेज. कंस्ट्रेंट पर क्लिक करना क्लिक करें.

दूसरा वीडियो. किसी मौजूदा कंस्ट्रेंट का विरोध करने वाला कंस्ट्रेंट जोड़ना.

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

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

पैरंट पोज़िशन

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

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

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

ऑर्डर की जगह

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

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

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

संरेखण

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

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

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

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

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

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

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

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

11वीं इमेज में, B की पहली लाइन, A के टेक्स्ट से अलाइन है.

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

11वीं इमेज. बेसलाइन अलाइनमेंट कंस्ट्रेंट.

किसी दिशा-निर्देश का पालन करें

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

दिशा-निर्देश बनाने के लिए, दिशा-निर्देश पर क्लिक करें क्लिक करें और फिर वर्टिकल दिशा-निर्देश जोड़ें या जोड़ें हॉरिज़ॉन्टल दिशा-निर्देश.

बिंदु वाली लाइन की जगह बदलने के लिए, उसे खींचें और छोड़ें और फिर किनारे पर मौजूद सर्कल पर क्लिक करें दिशा-निर्देश का इस्तेमाल करें.

12वीं इमेज. आपका दृश्य दिशा-निर्देशों का पालन करें.

किसी तरह की रुकावट से बचें

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

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

रुकावट डालने के लिए, यह तरीका अपनाएं:

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

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

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

आप यह पक्का करने के लिए कि "कम से कम" को सही जगह पर रखें.

13वीं इमेज. व्यू C रुकावट तक सीमित है, यह व्यू A और व्यू B, दोनों की पोज़िशन और साइज़ के आधार पर मूव करता है.

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

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

अगर आपको इसके बजाय, व्यू को शर्तों के मुताबिक अपना साइज़ बढ़ाना है, तो साइज़ को "कंस्ट्रेंट से मैच करें" पर स्विच करें.

तीसरा वीडियो. कंस्ट्रेंट बायस को अडजस्ट करना.

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

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

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

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

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

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

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

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

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

    • layout_Constraintwidth_max

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

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

साइज़ को अनुपात के तौर पर सेट करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अपने-आप कंस्ट्रेंट बनाएं

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

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

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

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

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

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

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

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 का इस्तेमाल इसमें किया जाता है: सनफ़्लावर डेमो ऐप्लिकेशन.