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

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

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

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

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(), एलिमेंट की पसंदीदा चौड़ाई और ऊंचाई के बारे में बताता है.

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

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

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

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

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

कंस्ट्रेंट

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

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

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

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

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

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

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

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

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

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