Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

कस्टम लेआउट

Compose में, यूज़र इंटरफ़ेस (यूआई) एलिमेंट को कंपोज़ेबल फ़ंक्शन से दिखाया जाता है. ये फ़ंक्शन, कॉल किए जाने पर यूज़र इंटरफ़ेस (यूआई) का एक हिस्सा दिखाते हैं. इसके बाद, इसे यूज़र इंटरफ़ेस (यूआई) ट्री में जोड़ दिया जाता है, जो स्क्रीन पर रेंडर होता है. हर यूज़र इंटरफ़ेस (यूआई) एलिमेंट का एक पैरंट एलिमेंट होता है. साथ ही, उसके कई चाइल्ड एलिमेंट हो सकते हैं. हर एलिमेंट अपने पैरंट एलिमेंट के अंदर मौजूद होता है. इसे (x, y) पोज़िशन के तौर पर दिखाया जाता है. साथ ही, इसके साइज़ को width और height के तौर पर दिखाया जाता है.

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

यूज़र इंटरफ़ेस (यूआई) ट्री में हर नोड को लेआउट करने की प्रोसेस में तीन चरण होते हैं. हर नोड के लिए ज़रूरी है कि:

बच्चों की लंबाई मापें
अपने साइज़ को तय करना
इसके चाइल्ड एलिमेंट को प्लेस करें

नोड लेआउट के तीन चरण: चाइल्ड नोड को मेज़र करना, साइज़ तय करना, और चाइल्ड नोड को प्लेस करना — **पहली इमेज.** नोड लेआउट के तीन चरण हैं: चाइल्ड नोड को मेज़र करना, साइज़ तय करना, और चाइल्ड नोड को प्लेस करना.

स्कोप के इस्तेमाल से यह तय होता है कि आपको अपने बच्चों को कब मेज़र करना है और उन्हें कहां रखना है. किसी लेआउट को सिर्फ़ मेज़रमेंट और लेआउट पास के दौरान मेज़र किया जा सकता है. साथ ही, किसी चाइल्ड को सिर्फ़ लेआउट पास के दौरान ही रखा जा सकता है. इसके अलावा, ऐसा सिर्फ़ तब किया जा सकता है, जब उसे मेज़र कर लिया गया हो. MeasureScope और PlacementScope जैसे Compose स्कोप की वजह से, इसे कंपाइल के समय लागू किया जाता है.

लेआउट मॉडिफ़ायर का इस्तेमाल करना

layout मॉडिफ़ायर का इस्तेमाल करके, किसी एलिमेंट को मेज़र करने और उसे लेआउट करने के तरीके में बदलाव किया जा सकता है. मॉडिफ़ायर, लैम्ब्डा लेता है. इसके पैरामीटर में वह एलिमेंट शामिल होता है जिसे मेज़र किया जा सकता है. इसे measurable के तौर पर पास किया जाता है. साथ ही, कंपोज़ेबल की आने वाली पाबंदियों को constraints के तौर पर पास किया जाता है. कस्टम लेआउट मॉडिफ़ायर कुछ ऐसा दिख सकता है:

fun Modifier.customLayoutModifier() =
    layout { measurable, constraints ->
        // ...
    }CustomLayoutSnippets.kt

स्क्रीन पर Text दिखाएं और सबसे ऊपर से टेक्स्ट की पहली लाइन की बेसलाइन तक की दूरी को कंट्रोल करें. paddingFromBaseline मॉडिफ़ायर यही काम करता है. इसे यहां एक उदाहरण के तौर पर लागू किया जा रहा है. इसके लिए, layout मॉडिफ़ायर का इस्तेमाल करके, कंपोज़ेबल को स्क्रीन पर मैन्युअल तरीके से डालें. यहां Text की टॉप पैडिंग को 24.dp पर सेट करने के बाद, इस तरह का नतीजा दिखता है:

इसमें सामान्य यूज़र इंटरफ़ेस (यूआई) पैडिंग और टेक्स्ट पैडिंग के बीच का अंतर दिखाया गया है. सामान्य यूज़र इंटरफ़ेस (यूआई) पैडिंग, एलिमेंट के बीच की जगह सेट करती है. वहीं, टेक्स्ट पैडिंग, एक बेसलाइन से दूसरी बेसलाइन के बीच की जगह सेट करती है — **दूसरी इमेज.** `paddingFromBaseline` वाला टेक्स्ट लागू किया गया.

स्पेसिंग बनाने के लिए यह कोड इस्तेमाल करें:

fun Modifier.firstBaselineToTop(
    firstBaselineToTop: Dp
) = layout { measurable, constraints ->
    // Measure the composable
    val placeable = measurable.measure(constraints)

    // Check the composable has a first baseline
    check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
    val firstBaseline = placeable[FirstBaseline]

    // Height of the composable with padding - first baseline
    val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
    val height = placeable.height + placeableY
    layout(placeable.width, height) {
        // Where the composable gets placed
        placeable.placeRelative(0, placeableY)
    }
}CustomLayoutSnippets.kt

इस कोड में क्या हो रहा है, यहां बताया गया है:

measurable लैम्ब्डा पैरामीटर में, measurable.measure(constraints) को कॉल करके, मेज़र किए जा सकने वाले पैरामीटर से दिखाए गए Text को मेज़र किया जाता है.
layout(width, height) तरीके को कॉल करके, कंपोज़ेबल का साइज़ तय किया जाता है. इससे, रैप किए गए एलिमेंट को रखने के लिए इस्तेमाल किया जाने वाला लैम्ब्डा भी मिलता है. इस मामले में, ऊंचाई Text और placeableY की ऊंचाई के बराबर होती है. यह firstBaselineToTop में से Text की पहली बेसलाइन को घटाने पर मिलती है.
रैप किए गए एलिमेंट को स्क्रीन पर दिखाने के लिए, placeable.placeRelative(x, y) को कॉल करें. अगर रैप किए गए एलिमेंट नहीं रखे जाते हैं, तो वे नहीं दिखेंगे. दाएं से बाएं लेआउट में, placeRelative, x की पोज़िशन को मिरर करता है; लेआउट की दिशा देखें. y की पोज़िशन, firstBaselineToTop में से टेक्स्ट की पहली बेसलाइन को घटाने पर मिलती है, ताकि पहली बेसलाइन सबसे ऊपर से firstBaselineToTop पर हो.

यह जांचने के लिए कि यह उम्मीद के मुताबिक काम करता है या नहीं, इस मॉडिफ़ायर का इस्तेमाल Text पर करें:

@Preview
@Composable
fun TextWithPaddingToBaselinePreview() {
    MyApplicationTheme {
        Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
    }
}

@Preview
@Composable
fun TextWithNormalPaddingPreview() {
    MyApplicationTheme {
        Text("Hi there!", Modifier.padding(top = 32.dp))
    }
}CustomLayoutSnippets.kt

टेक्स्ट एलिमेंट की कई झलक; एक में एलिमेंट के बीच सामान्य पैडिंग दिखाई गई है, जबकि दूसरी में एक बेसलाइन से दूसरी बेसलाइन तक की पैडिंग दिखाई गई है. — **तीसरी इमेज.** `Text` कंपोज़ेबल पर मॉडिफ़ायर लागू किया गया और उसकी झलक देखी गई.

कस्टम लेआउट बनाना

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

इस उदाहरण में, Column का बहुत ही बुनियादी वर्शन बनाया गया है. ज़्यादातर कस्टम लेआउट इस पैटर्न को फ़ॉलो करते हैं:

@Composable
fun MyBasicColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // measure and position children given constraints logic here
        // ...
    }
}CustomLayoutSnippets.kt

layout मॉडिफ़ायर की तरह ही, measurables उन चाइल्ड एलिमेंट की सूची है जिन्हें मेज़र करना ज़रूरी है. साथ ही, constraints पैरंट एलिमेंट की पाबंदियां हैं. पहले वाले लॉजिक का इस्तेमाल करके, MyBasicColumn को इस तरह लागू किया जा सकता है:

@Composable
fun MyBasicColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // Don't constrain child views further, measure them with given constraints
        // List of measured children
        val placeables = measurables.map { measurable ->
            // Measure each children
            measurable.measure(constraints)
        }

        // Set the size of the layout as big as it can
        layout(constraints.maxWidth, constraints.maxHeight) {
            // Track the y co-ord we have placed children up to
            var yPosition = 0

            // Place children in the parent layout
            placeables.forEach { placeable ->
                // Position item on the screen
                placeable.placeRelative(x = 0, y = yPosition)

                // Record the y co-ord placed up to
                yPosition += placeable.height
            }
        }
    }
}CustomLayoutSnippets.kt

चाइल्ड कंपोज़ेबल, इनपुट के तौर पर मिलने वाली Layout पाबंदियों के हिसाब से सीमित होते हैं. साथ ही, उन्हें पिछले कंपोज़ेबल के yPosition के आधार पर रखा जाता है.

यहां बताया गया है कि कस्टम कंपोज़ेबल का इस्तेमाल कैसे किया जाएगा:

@Composable
fun CallingComposable(modifier: Modifier = Modifier) {
    MyBasicColumn(modifier.padding(8.dp)) {
        Text("MyBasicColumn")
        Text("places items")
        Text("vertically.")
        Text("We've done it by hand!")
    }
}CustomLayoutSnippets.kt

एक कॉलम में, एक के ऊपर एक रखे गए कई टेक्स्ट एलिमेंट. — **चौथी इमेज.** कस्टम `Column` लागू करना.

लेआउट की दिशा

LocalLayoutDirection कंपोज़िशन लोकल को बदलकर, कंपोज़ेबल के लेआउट की दिशा बदलें.

अगर स्क्रीन पर कंपोज़ेबल को मैन्युअल तरीके से डाला जा रहा है, तो LayoutDirection, layout मॉडिफ़ायर या Layout कंपोज़ेबल में MeasureScope की layoutDirection प्रॉपर्टी से उपलब्ध होता है.

layoutDirection का इस्तेमाल करते समय, place का इस्तेमाल करके कंपोज़ेबल डालें. placeRelative मेथड के उलट, place लेआउट की दिशा (बाएं से दाएं या दाएं से बाएं) के हिसाब से नहीं बदलता.

कस्टम लेआउट का इस्तेमाल करना

Compose में बेसिक लेआउट में, लेआउट और मॉडिफ़ायर के बारे में ज़्यादा जानें. साथ ही, कस्टम लेआउट बनाने वाले Compose सैंपल में, कस्टम लेआउट देखें.

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

Gmail में कस्टम लेआउट के बारे में ज़्यादा जानने के लिए, यहां दिए गए अन्य संसाधन देखें.

वीडियो

Jetpack Compose के लेआउट के बारे में ज़्यादा जानकारी

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

ध्यान दें: JavaScript बंद होने पर, लिंक टेक्स्ट दिखता है
Compose लेआउट में इंट्रिन्सिक मेज़रमेंट
Compose में ग्राफ़िक
Compose मॉडिफ़ायर