Compose में ConstraintLayout

ConstraintLayout एक ऐसा लेआउट है जिसकी मदद से, स्क्रीन पर मौजूद अन्य कंपोज़ेबल के हिसाब से कंपोज़ेबल को रखा जा सकता है. यह कई नेस्ट किए गए Row, Column, Box, और अन्य कस्टम लेआउट एलिमेंट इस्तेमाल करने का एक विकल्प है.

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

ConstraintLayout का कॉन्टेंट देखना शुरू करें

Compose में ConstraintLayout का इस्तेमाल करने के लिए, आपको इस डिपेंडेंसी को अपने build.gradle में जोड़ना होगा. इसके अलावा, आपको Compose सेटअप भी करना होगा:

implementation "androidx.constraintlayout:constraintlayout-compose:$constraintlayout_compose_version"

Compose में ConstraintLayout, डीएसएल का इस्तेमाल करके इस तरह काम करता है:

  • createRefs() या createRefFor() का इस्तेमाल करके, ConstraintLayout में मौजूद हर कंपोज़ेबल के लिए रेफ़रंस बनाएं.
  • कंस्ट्रेंट, constrainAs() मॉडिफ़ायर का इस्तेमाल करके दिए जाते हैं. यह मॉडिफ़ायर, रेफ़रंस को पैरामीटर के तौर पर लेता है. साथ ही, आपको बॉडी लैम्डा में इसके कंस्ट्रेंट तय करने की सुविधा देता है.
  • पाबंदियों के बारे में बताने के लिए, linkTo() या अन्य मददगार तरीकों का इस्तेमाल किया जाता है.
  • parent एक मौजूदा रेफ़रंस है. इसका इस्तेमाल, ConstraintLayout कंपोज़ेबल के लिए पाबंदियां तय करने के लिए किया जा सकता है.

यहां ConstraintLayout का इस्तेमाल करके, कंपोज़ेबल का एक उदाहरण दिया गया है:

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout {
        // Create references for the composables to constrain
        val (button, text) = createRefs()

        Button(
            onClick = { /* Do something */ },
            // Assign reference "button" to the Button composable
            // and constrain it to the top of the ConstraintLayout
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button")
        }

        // Assign reference "text" to the Text composable
        // and constrain it to the bottom of the Button composable
        Text(
            "Text",
            Modifier.constrainAs(text) {
                top.linkTo(button.bottom, margin = 16.dp)
            }
        )
    }
}

यह कोड, Button के ऊपरी हिस्से को पैरंट से जोड़ता है. इसमें 16.dp का मार्जिन होता है. साथ ही, Text को Button के निचले हिस्से से जोड़ता है. इसमें भी 16.dp का मार्जिन होता है.

बटन, टेक्स्ट के ऊपर दिखता है
पहली इमेज. Button और Text कंपोज़ेबल, ConstraintLayout में एक-दूसरे से जुड़े होते हैं.

Decoupled API

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

ऐसे मामलों में, ConstraintLayout का इस्तेमाल अलग तरीके से किया जा सकता है:

  1. ConstraintLayout के पैरामीटर के तौर पर ConstraintSet पास करें.
  2. ConstraintSet में बनाए गए रेफ़रंस को कंपोज़ेबल को असाइन करें. इसके लिए, layoutId मॉडिफ़ायर का इस्तेमाल करें.

@Composable
fun DecoupledConstraintLayout() {
    BoxWithConstraints {
        val constraints = if (minWidth < 600.dp) {
            decoupledConstraints(margin = 16.dp) // Portrait constraints
        } else {
            decoupledConstraints(margin = 32.dp) // Landscape constraints
        }

        ConstraintLayout(constraints) {
            Button(
                onClick = { /* Do something */ },
                modifier = Modifier.layoutId("button")
            ) {
                Text("Button")
            }

            Text("Text", Modifier.layoutId("text"))
        }
    }
}

private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button) {
            top.linkTo(parent.top, margin = margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin)
        }
    }
}

इसके बाद, जब आपको पाबंदियों में बदलाव करना हो, तो बस एक अलग ConstraintSet पास करें.

ConstraintLayout कॉन्सेप्ट

ConstraintLayout में दिशा-निर्देश, बैरियर, और चेन जैसे कॉन्सेप्ट शामिल हैं. इनकी मदद से, कंपोज़ेबल में एलिमेंट को सही जगह पर रखा जा सकता है.

दिशा-निर्देश

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

दिशा-निर्देश दो तरह के होते हैं: वर्टिकल और हॉरिज़ॉन्टल. दो हॉरिज़ॉन्टल लाइनें top और bottom हैं. वहीं, दो वर्टिकल लाइनें start और end हैं.

ConstraintLayout {
    // Create guideline from the start of the parent at 10% the width of the Composable
    val startGuideline = createGuidelineFromStart(0.1f)
    // Create guideline from the end of the parent at 10% the width of the Composable
    val endGuideline = createGuidelineFromEnd(0.1f)
    //  Create guideline from 16 dp from the top of the parent
    val topGuideline = createGuidelineFromTop(16.dp)
    //  Create guideline from 16 dp from the bottom of the parent
    val bottomGuideline = createGuidelineFromBottom(16.dp)
}

कोई दिशा-निर्देश बनाने के लिए, ज़रूरी दिशा-निर्देश के टाइप के साथ createGuidelineFrom* का इस्तेमाल करें. इससे एक रेफ़रंस बनता है, जिसका इस्तेमाल Modifier.constrainAs() ब्लॉक में किया जा सकता है.

रुकावटें

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

बैरियर बनाने के लिए, createTopBarrier() (या: createBottomBarrier(), createEndBarrier(), createStartBarrier()) का इस्तेमाल करें. साथ ही, वे रेफ़रंस दें जिनसे बैरियर बनाया जाना चाहिए.

ConstraintLayout {
    val constraintSet = ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        val topBarrier = createTopBarrier(button, text)
    }
}

इसके बाद, बैरियर का इस्तेमाल Modifier.constrainAs() ब्लॉक में किया जा सकता है.

चेन

चेन, एक ही ऐक्सिस (हॉरिज़ॉन्टल या वर्टिकल) में ग्रुप जैसा व्यवहार करती हैं. दूसरे ऐक्सिस को अलग से सीमित किया जा सकता है.

चेन बनाने के लिए, createVerticalChain या createHorizontalChain का इस्तेमाल करें:

ConstraintLayout {
    val constraintSet = ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        val verticalChain = createVerticalChain(button, text, chainStyle = ChainStyle.Spread)
        val horizontalChain = createHorizontalChain(button, text)
    }
}

इसके बाद, चेन का इस्तेमाल Modifier.constrainAs() ब्लॉक में किया जा सकता है.

चेन को अलग-अलग ChainStyles के साथ कॉन्फ़िगर किया जा सकता है. इनसे यह तय होता है कि कंपोज़ेबल के आस-पास की जगह को कैसे मैनेज किया जाए. जैसे:

  • ChainStyle.Spread: स्पेस को सभी कंपोज़ेबल में बराबर बांटा जाता है. इसमें पहले कंपोज़ेबल से पहले और आखिरी कंपोज़ेबल के बाद का खाली स्पेस भी शामिल है.
  • ChainStyle.SpreadInside: स्पेस को सभी कंपोज़ेबल में बराबर बांटा जाता है. इसमें पहले कंपोज़ेबल से पहले या आखिरी कंपोज़ेबल के बाद कोई खाली स्पेस नहीं होता.
  • ChainStyle.Packed: स्पेस को पहले कंपोज़ेबल से पहले और आखिरी कंपोज़ेबल के बाद बांटा जाता है. कंपोज़ेबल को एक साथ पैक किया जाता है. इनके बीच में कोई स्पेस नहीं होता.