लेआउट की बुनियादी बातें कंपोज़ करें

Jetpack Compose आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को डिज़ाइन और बनाने में आसान बनाता है. लिखें स्टेट को यूज़र इंटरफ़ेस (यूआई) एलिमेंट में बदल देता है. इसके लिए ये तरीके इस्तेमाल किए जाते हैं:

  1. तत्वों की संरचना
  2. एलिमेंट का लेआउट
  3. एलिमेंट की ड्रॉइंग

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

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

Compose में लेआउट के मकसद

लेआउट सिस्टम को लागू करने के लिए, Jetpack Compose के दो मुख्य लक्ष्य हैं:

कंपोज़ेबल फ़ंक्शन के बारे में बुनियादी बातें

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

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

@Composable
fun ArtistCard() {
    Text("Alfred Sisley")
    Text("3 minutes ago")
}
LayoutBasicsSnippets.kt

Compose, टेक्स्ट एलिमेंट को एक-दूसरे के ऊपर स्टैक करता है. ऐसा करने के लिए, यह यह नहीं पूछता कि आपको उन्हें किस तरह से व्यवस्थित करना है. इससे टेक्स्ट एलिमेंट को पढ़ा नहीं जा सकता:

एक-दूसरे के ऊपर बनाए गए दो टेक्स्ट एलिमेंट, जिनकी वजह से टेक्स्ट पढ़ा नहीं जा सकता

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

स्टैंडर्ड लेआउट कॉम्पोनेंट

ज़्यादातर मामलों में, Compose के स्टैंडर्ड लेआउट एलिमेंट का इस्तेमाल किया जा सकता है.

इस्तेमाल की जाने वाली चीज़ें Column स्क्रीन पर आइटम को वर्टिकल तौर पर रखने के लिए.

@Composable
fun ArtistCardColumn() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}
LayoutBasicsSnippets.kt

कॉलम लेआउट में व्यवस्थित किए गए दो टेक्स्ट एलिमेंट, ताकि टेक्स्ट को पढ़ा जा सके

इसी तरह, Row आइटम को स्क्रीन पर हॉरिज़ॉन्टल तौर पर रखने के लिए. Column और Row, दोनों एलिमेंट के अलाइनमेंट को कॉन्फ़िगर करने की सुविधा देते हैं.

@Composable
fun ArtistCardRow(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}

LayoutBasicsSnippets.kt

इसमें ज़्यादा कॉम्प्लेक्स लेआउट दिखता है. इसमें टेक्स्ट एलिमेंट के कॉलम के बगल में छोटा ग्राफ़िक दिखता है

एलिमेंट को दूसरे एलिमेंट के ऊपर रखने के लिए, Box का इस्तेमाल करें. Box में इसमें मौजूद एलिमेंट का अलाइनमेंट कॉन्फ़िगर भी किया जा सकता है.

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Icon(Icons.Filled.Check, contentDescription = "Check mark")
    }
}
LayoutBasicsSnippets.kt

एक-दूसरे पर स्टैक किए गए दो एलिमेंट दिखाता है

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

तीन आसान लेआउट कॉम्पोज़ेबल की तुलना करता है: कॉलम, लाइन, और बॉक्स

Row में बच्चों की पोज़िशन सेट करने के लिए, horizontalArrangement और verticalAlignment आर्ग्युमेंट सेट करें. Column के लिए, verticalArrangement और horizontalAlignment आर्ग्युमेंट सेट करें:

@Composable
fun ArtistCardArrangement(artist: Artist) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

आइटम दाईं ओर अलाइन किए गए हैं

लेआउट मॉडल

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

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

यहां दिए गए SearchResult फ़ंक्शन का इस्तेमाल करें.

@Composable
fun SearchResult() {
    Row {
        Image(
            // ...
        )
        Column {
            Text(
                // ...
            )
            Text(
                // ...
            )
        }
    }
}
LayoutBasicsSnippets.kt

इस फ़ंक्शन से, नीचे दिया गया यूज़र इंटरफ़ेस (यूआई) ट्री मिलता है.

SearchResult
  Row
    Image
    Column
      Text
      Text

SearchResult उदाहरण में, यूज़र इंटरफ़ेस (यूआई) ट्री लेआउट इस क्रम में है:

  1. रूट नोड Row को मापने के लिए कहा जाता है.
  2. रूट नोड Row अपने पहले बच्चे, Image को मापने के लिए कहता है.
  3. Image एक लीफ़ नोड है (यानी, इसका कोई चाइल्ड नहीं है), इसलिए यह साइज़ की जानकारी देता है और प्लेसमेंट के निर्देश दिखाता है.
  4. रूट नोड Row अपने दूसरे बच्चे, Column को मापने के लिए कहता है.
  5. Column नोड अपने पहले Text बच्चे को मापने के लिए कहता है.
  6. पहला Text नोड, लीफ़ नोड होता है. इसलिए, यह साइज़ की जानकारी देता है और प्लेसमेंट के निर्देश दिखाता है.
  7. Column नोड अपने दूसरे Text बच्चे को मापने के लिए कहता है.
  8. दूसरा Text नोड लीफ़ नोड है, इसलिए यह साइज़ की जानकारी देता है और नतीजे के तौर पर दिखाता है प्लेसमेंट निर्देश.
  9. अब Column नोड ने अपने बच्चों को मेज़र कर लिया है, उनका साइज़ तय कर लिया है, और उन्हें प्लेस कर दिया है. इसलिए, अब वह अपने साइज़ और प्लेसमेंट का फ़ैसला खुद कर सकता है.
  10. अब रूट नोड Row ने अपने बच्चों को मेज़र कर लिया है, उनका साइज़ तय कर लिया है, और उन्हें प्लेस कर दिया है. इसलिए, अब वह अपना साइज़ और प्लेसमेंट तय कर सकता है.

खोज के नतीजों के यूज़र इंटरफ़ेस (यूआई) ट्री में मेज़र करने, साइज़ बदलने, और प्लेसमेंट का क्रम

परफ़ॉर्मेंस

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

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

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

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

जैसा कि मॉडिफ़ायर लिखें लेख में बताया गया है, आपके कंपोज़ेबल को सजाने या बेहतर बनाने के लिए, मॉडिफ़ायर का इस्तेमाल करें. मॉडिफ़ायर ज़रूरी हैं का इस्तेमाल करें. उदाहरण के लिए, यहां हम कई संशोधकों को एक-दूसरे से अलग करते हैं ArtistCard को पसंद के मुताबिक बनाने के लिए:

@Composable
fun ArtistCardModifiers(
    artist: Artist,
    onClick: () -> Unit
) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) { /*...*/ }
        Spacer(Modifier.size(padding))
        Card(
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        ) { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

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

ऊपर दिए गए कोड में, एक साथ इस्तेमाल किए गए अलग-अलग मॉडिफ़ायर फ़ंक्शन पर ध्यान दें.

  • clickable, उपयोगकर्ता के इनपुट पर कंपोज़ेबल प्रतिक्रिया देता है और एक रिपल दिखाता है.
  • padding किसी एलिमेंट के आस-पास स्पेस रखता है.
  • fillMaxWidth, पैरंट से मिली ज़्यादा से ज़्यादा चौड़ाई के हिसाब से, कॉम्पोज़ेबल को फ़िल करता है.
  • size(), एलिमेंट की पसंदीदा चौड़ाई और ऊंचाई तय करता है.

स्क्रोल किए जा सकने वाले लेआउट

स्क्रोल किए जा सकने वाले लेआउट के बारे में ज़्यादा जानने के लिए, हाथ के जेस्चर से जुड़े दस्तावेज़ लिखें.

सूचियों और लैज़ी सूचियों के लिए, सूचियां बनाने से जुड़ा दस्तावेज़ देखें.

रिस्पॉन्सिव लेआउट

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

कंस्ट्रेंट

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

@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        Text("My minHeight is $minHeight while my maxWidth is $maxWidth")
    }
}
LayoutBasicsSnippets.kt

स्लॉट-आधारित लेआउट

Compose, Material Design के आधार पर कई तरह के कॉम्पोज़ेबल उपलब्ध कराता है. साथ ही, यूज़र इंटरफ़ेस (यूआई) को आसानी से बनाने के लिए, androidx.compose.material:material डिपेंडेंसी (Android Studio में Compose प्रोजेक्ट बनाते समय शामिल की जाती है) भी उपलब्ध कराता है. Drawer, FloatingActionButton, और TopAppBar जैसे एलिमेंट सभी उपलब्ध हैं.

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

मटीरियल कॉम्पोनेंट ऐप्लिकेशन बार में उपलब्ध स्लॉट दिखाने वाला डायग्राम

कंपोज़ेबल में आम तौर पर, content कंपोज़ेबल लैम्डा ( content: @Composable () -> Unit) लिया जाता है. स्लॉट एपीआई के खास इस्तेमाल के लिए, कई content पैरामीटर दिखते हैं. उदाहरण के लिए, TopAppBar की मदद से title, navigationIcon, और actions के लिए कॉन्टेंट दिया जा सकता है.

उदाहरण के लिए, Scaffold आपको बेसिक मटीरियल डिज़ाइन लेआउट स्ट्रक्चर के साथ यूज़र इंटरफ़ेस (यूआई) लागू करने की अनुमति देता है. Scaffoldसबसे आम टॉप-लेवल मटीरियल कॉम्पोनेंट के लिए स्लॉट उपलब्ध कराता है, जैसे कि TopAppBar, BottomAppBar, FloatingActionButton, और Drawer. इस्तेमाल करके Scaffold, यह पक्का करना आसान है कि ये कॉम्पोनेंट सही जगह पर रखे गए हों और एक साथ सही तरीके से काम करें.

JetNews का सैंपल ऐप्लिकेशन, जो एक से ज़्यादा एलिमेंट को पोज़िशन करने के लिए स्कैफ़ोल्ड का इस्तेमाल करता है 

@Composable
fun HomeScreen(/*...*/) {
    ModalNavigationDrawer(drawerContent = { /* ... */ }) {
        Scaffold(
            topBar = { /*...*/ }
        ) { contentPadding ->
            // ...
        }
    }
}
LayoutBasicsSnippets.kt

पीछे जाएं
खास जानकारी
आगे बढ़ें
कंस्ट्रेंट और मॉडिफ़ायर ऑर्डर