इस पेज का अनुवाद Cloud Translation API से किया गया है.

Compose में ConstraintLayout

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

इन स्थितियों में ConstraintLayout का इस्तेमाल करें:

पोज़िशनिंग एलिमेंट के लिए एक से ज़्यादा Column और Row को नेस्ट करने से बचने के लिए इस स्क्रीन की मदद से, कोड को आसानी से पढ़ा जा सकता है.
कंपोज़ेबल को किसी अन्य कंपोज़ेबल के हिसाब से पोज़िशन करना या उनकी पोज़िशन तय करने के लिए दिशा-निर्देशों, बाधाओं या चेन के आधार पर कंपोज़ेबल.

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

`ConstraintLayout` से शुरू करें

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

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

कंपोज़ में ConstraintLayout, नीचे दिए गए तरीके से काम करने के लिए डीएसएल:

ConstraintLayout में हर कंपोज़ेबल का रेफ़रंस बनाने के लिए, createRefs() या createRefFor()
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)
            }
        )
    }
}ConstraintLayoutSnippets.kt

यह कोड Button के शीर्ष को मार्जिन के साथ पैरंट तक सीमित करता है 16.dp और एक Text नीचे की ओर भी Button के नीचे का मार्जिन 16.dp.

डिकोड किया गया एपीआई

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

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

ConstraintLayout के लिए पैरामीटर के तौर पर, ConstraintSet में पास करें.
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)
        }
    }
}ConstraintLayoutSnippets.kt

इसके बाद, जब आपको कंस्ट्रेंट में बदलाव करने की ज़रूरत होती है, तो आप किसी दूसरे ConstraintSet.

`ConstraintLayout` कॉन्सेप्ट

ConstraintLayout में दिशा-निर्देश, रुकावटें, और चेन जैसे कॉन्सेप्ट शामिल हैं जो आपके Composable के अंदर एलिमेंट की पोज़िशन तय करने में मदद कर सकते हैं.

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

दिशा-निर्देश, लेआउट डिज़ाइन करने में मदद करते हैं. कंपोज़ेबल को किसी दिशा-निर्देश तक सीमित. दिशा-निर्देश, एलिमेंट की पोज़िशन तय करने के लिए काम के हैं. पैरंट कंपोज़ेबल में कुछ 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)
}ConstraintLayoutSnippets.kt

दिशा-निर्देश बनाने के लिए, दिशा-निर्देश के टाइप के साथ createGuidelineFrom* का इस्तेमाल करें आवश्यक है. इससे एक संदर्भ बन जाता है, जिसका इस्तेमाल Modifier.constrainAs() ब्लॉक.

रुकावटें

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

रुकावट बनाने के लिए, createTopBarrier() का इस्तेमाल करें (या: createBottomBarrier(), createEndBarrier(), createStartBarrier()) से जुड़ा होता है. साथ ही, ऐसे रेफ़रंस उपलब्ध कराता है जो पूरी रुकावट पैदा करनी चाहिए.

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

        val topBarrier = createTopBarrier(button, text)
    }
}ConstraintLayoutSnippets.kt

इसके बाद, बैरियर का इस्तेमाल 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)
    }
}ConstraintLayoutSnippets.kt

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

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

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

ज़्यादा जानें

इसमें मौजूद एपीआई की मदद से, Compose में ConstraintLayout के बारे में ज़्यादा जानें: ConstraintLayout का इस्तेमाल करने वाले सैंपल लिखें.

आपके लिए सुझाव

ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
Compose पर फ़ोकस करें
Jetpack Compose के लिए Kotlin
लेआउट की बुनियादी बातें लिखना

पीछे जाएं

Intrinsic measurements