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) } ) } }
यह कोड 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) } } }
इसके बाद, जब आपको कंस्ट्रेंट में बदलाव करने की ज़रूरत होती है, तो आप किसी दूसरे
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) }
दिशा-निर्देश बनाने के लिए, दिशा-निर्देश के टाइप के साथ 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
: पहले और आखिरी कॉम्पोज़ेबल के पहले और बाद में स्पेस दिया जाता है. कॉम्पोज़ेबल एक-दूसरे के बीच स्पेस के बिना पैक किए जाते हैं.
ज़्यादा जानें
इसमें मौजूद एपीआई की मदद से, Compose में ConstraintLayout
के बारे में ज़्यादा जानें:
ConstraintLayout
का इस्तेमाल करने वाले सैंपल लिखें.
फ़िलहाल कोई सुझाव नहीं है.
अपने Google खाते में साइन इन करने की कोशिश करें.