Jetpack Compose आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को डिज़ाइन और बनाने में आसान बनाता है. लिखें स्टेट को यूज़र इंटरफ़ेस (यूआई) एलिमेंट में बदल देता है. इसके लिए ये तरीके इस्तेमाल किए जाते हैं:
- तत्वों की संरचना
- एलिमेंट का लेआउट
- एलिमेंट की ड्रॉइंग
इस दस्तावेज़ में एलिमेंट के लेआउट पर फ़ोकस किया गया है. इसमें Compose के कुछ बिल्डिंग ब्लॉक के बारे में बताया गया है, ताकि आपको अपने यूज़र इंटरफ़ेस (यूआई) एलिमेंट को व्यवस्थित करने में मदद मिल सके.
Compose में लेआउट के मकसद
लेआउट सिस्टम को लागू करने के लिए, Jetpack Compose के दो मुख्य लक्ष्य हैं:
- बेहतर परफ़ॉर्मेंस
- पसंद के मुताबिक लेआउट आसानी से लिखने की सुविधा
कंपोज़ेबल फ़ंक्शन के बारे में बुनियादी बातें
Compose के बुनियादी ब्लॉक, कॉम्पोज़ेबल फ़ंक्शन होते हैं. कॉम्पोज़ेबल फ़ंक्शन, Unit
एमिटिंग करने वाला ऐसा फ़ंक्शन होता है जो आपके यूज़र इंटरफ़ेस (यूआई) के किसी हिस्से के बारे में बताता है. कॉन्टेंट बनाने
फ़ंक्शन कुछ इनपुट लेता है और स्क्रीन पर दिखाए गए कॉन्टेंट को जनरेट करता है. ज़्यादा के लिए
संगीत कंपोज़ेबल के बारे में जानकारी पाने के लिए,
मॉडल दस्तावेज़.
कॉम्पोज़ेबल फ़ंक्शन से कई यूज़र इंटरफ़ेस (यूआई) एलिमेंट निकल सकते हैं. हालांकि, अगर आपने एलिमेंट को व्यवस्थित करने का तरीका नहीं बताया है, तो हो सकता है कि Compose उन्हें आपके मनमुताबिक न व्यवस्थित करे. उदाहरण के लिए, यह कोड दो टेक्स्ट जनरेट करता है एलिमेंट:
@Composable fun ArtistCard() { Text("Alfred Sisley") Text("3 minutes ago") }
Compose, टेक्स्ट एलिमेंट को एक-दूसरे के ऊपर स्टैक करता है. ऐसा करने के लिए, यह यह नहीं पूछता कि आपको उन्हें किस तरह से व्यवस्थित करना है. इससे टेक्स्ट एलिमेंट को पढ़ा नहीं जा सकता:
Compose में, इस्तेमाल के लिए तैयार लेआउट का कलेक्शन मौजूद है. इससे आपको अपनी ऐसेट व्यवस्थित करने में मदद मिलेगी यूज़र इंटरफ़ेस (यूआई) एलिमेंट. साथ ही, इसकी मदद से आपके लिए, ज़्यादा खास लेआउट को आसानी से बनाया जा सकता है.
स्टैंडर्ड लेआउट कॉम्पोनेंट
ज़्यादातर मामलों में, Compose के स्टैंडर्ड लेआउट एलिमेंट का इस्तेमाल किया जा सकता है.
इस्तेमाल की जाने वाली चीज़ें
Column
स्क्रीन पर आइटम को वर्टिकल तौर पर रखने के लिए.
@Composable fun ArtistCardColumn() { Column { Text("Alfred Sisley") Text("3 minutes ago") } }
इसी तरह,
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) } } }
एलिमेंट को दूसरे एलिमेंट के ऊपर रखने के लिए, Box
का इस्तेमाल करें. Box
में इसमें मौजूद एलिमेंट का अलाइनमेंट कॉन्फ़िगर भी किया जा सकता है.
@Composable fun ArtistAvatar(artist: Artist) { Box { Image(bitmap = artist.image, contentDescription = "Artist image") Icon(Icons.Filled.Check, contentDescription = "Check mark") } }
अक्सर, आपको इन बुनियादी चीज़ों की ही ज़रूरत होती है. इन लेआउट को और ज़्यादा जानकारी वाले लेआउट में जोड़ने के लिए, अपने ऐप्लिकेशन के हिसाब से कंपोज़ेबल फ़ंक्शन लिखा जा सकता है.
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 { /*...*/ } } }
लेआउट मॉडल
लेआउट मॉडल में, यूज़र इंटरफ़ेस (यूआई) ट्री को एक ही पास में लेआउट किया जाता है. हर नोड पहले खुद को मापने के लिए कहा, फिर पास करते हुए किसी भी बच्चे को बार-बार मापा नीचे बच्चों के लिए आकार की शर्तें होती हैं. इसके बाद, लीफ़ नोड का साइज़ तय किया जाता है और उन्हें प्लेस किया जाता है. साथ ही, तय किए गए साइज़ और प्लेसमेंट के निर्देश, ट्री में वापस भेजे जाते हैं.
इसका मतलब है कि माता-पिता को अपने बच्चों से पहले मेज़र किया जाता है, लेकिन उनके बच्चों के बाद ही उन्हें साइज़ में बांटा जाता है और उनके लिए जगह तय की जाती है.
यहां दिए गए SearchResult
फ़ंक्शन का इस्तेमाल करें.
@Composable fun SearchResult() { Row { Image( // ... ) Column { Text( // ... ) Text( // ... ) } } }
इस फ़ंक्शन से, नीचे दिया गया यूज़र इंटरफ़ेस (यूआई) ट्री मिलता है.
SearchResult
Row
Image
Column
Text
Text
SearchResult
उदाहरण में, यूज़र इंटरफ़ेस (यूआई) ट्री लेआउट इस क्रम में है:
- रूट नोड
Row
को मापने के लिए कहा जाता है. - रूट नोड
Row
अपने पहले बच्चे,Image
को मापने के लिए कहता है. Image
एक लीफ़ नोड है (यानी, इसका कोई चाइल्ड नहीं है), इसलिए यह साइज़ की जानकारी देता है और प्लेसमेंट के निर्देश दिखाता है.- रूट नोड
Row
अपने दूसरे बच्चे,Column
को मापने के लिए कहता है. Column
नोड अपने पहलेText
बच्चे को मापने के लिए कहता है.- पहला
Text
नोड, लीफ़ नोड होता है. इसलिए, यह साइज़ की जानकारी देता है और प्लेसमेंट के निर्देश दिखाता है. Column
नोड अपने दूसरेText
बच्चे को मापने के लिए कहता है.- दूसरा
Text
नोड लीफ़ नोड है, इसलिए यह साइज़ की जानकारी देता है और नतीजे के तौर पर दिखाता है प्लेसमेंट निर्देश. - अब
Column
नोड ने अपने बच्चों को मेज़र कर लिया है, उनका साइज़ तय कर लिया है, और उन्हें प्लेस कर दिया है. इसलिए, अब वह अपने साइज़ और प्लेसमेंट का फ़ैसला खुद कर सकता है. - अब रूट नोड
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), ) { /*...*/ } } }
ऊपर दिए गए कोड में, एक साथ इस्तेमाल किए गए अलग-अलग मॉडिफ़ायर फ़ंक्शन पर ध्यान दें.
clickable
, उपयोगकर्ता के इनपुट पर कंपोज़ेबल प्रतिक्रिया देता है और एक रिपल दिखाता है.padding
किसी एलिमेंट के आस-पास स्पेस रखता है.fillMaxWidth
, पैरंट से मिली ज़्यादा से ज़्यादा चौड़ाई के हिसाब से, कॉम्पोज़ेबल को फ़िल करता है.size()
, एलिमेंट की पसंदीदा चौड़ाई और ऊंचाई तय करता है.
स्क्रोल किए जा सकने वाले लेआउट
स्क्रोल किए जा सकने वाले लेआउट के बारे में ज़्यादा जानने के लिए, हाथ के जेस्चर से जुड़े दस्तावेज़ लिखें.
सूचियों और लैज़ी सूचियों के लिए, सूचियां बनाने से जुड़ा दस्तावेज़ देखें.
रिस्पॉन्सिव लेआउट
लेआउट को डिज़ाइन करते समय, स्क्रीन के अलग-अलग ओरिएंटेशन और डिवाइस के नाप या आकार का ध्यान रखना चाहिए. Compose में, कॉम्पोज़ेबल लेआउट को अलग-अलग स्क्रीन कॉन्फ़िगरेशन के हिसाब से ढालने के लिए, पहले से ही कुछ सुविधाएं मौजूद होती हैं.
कंस्ट्रेंट
माता-पिता की तरफ़ से आने वाली पाबंदियों के बारे में जानने और उसके हिसाब से लेआउट डिज़ाइन करने के लिए, BoxWithConstraints
का इस्तेमाल किया जा सकता है. मेज़रमेंट
कंस्ट्रेंट
सामग्री lambda में पाई जा सकती है. मेज़रमेंट के इन तरीकों का इस्तेमाल किया जा सकता है
अलग-अलग स्क्रीन कॉन्फ़िगरेशन के लिए अलग-अलग लेआउट कंपोज़ करने के लिए कंस्ट्रेंट:
@Composable fun WithConstraintsComposable() { BoxWithConstraints { Text("My minHeight is $minHeight while my maxWidth is $maxWidth") } }
स्लॉट-आधारित लेआउट
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
, यह पक्का करना आसान है कि ये कॉम्पोनेंट सही जगह पर रखे गए हों और
एक साथ सही तरीके से काम करें.
@Composable fun HomeScreen(/*...*/) { ModalNavigationDrawer(drawerContent = { /* ... */ }) { Scaffold( topBar = { /*...*/ } ) { contentPadding -> // ... } } }
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- मॉडिफ़ायर लिखना
- Jetpack Compose के लिए Kotlin
- मटीरियल कॉम्पोनेंट और लेआउट