Jetpack Compose में आर्किटेक्चर की लेयर जोड़ना

यह पेज उन आर्किटेक्चर लेयर की खास जानकारी देता है जो हमने Jetpack Compose का इस्तेमाल किया है और इस डिज़ाइन को बनाने के लिए खास सिद्धांतों को तैयार किया है.

Jetpack Compose सिर्फ़ एक मोनोलिथिक प्रोजेक्ट नहीं है; इसे किसी नंबर से बनाया जाता है जो एक पूरा स्टैक बनाने के लिए एक साथ जोड़े जाते हैं. समझना Jetpack Compose के अलग-अलग मॉड्यूल की मदद से ये काम किए जा सकते हैं:

  • अपना ऐप्लिकेशन या लाइब्रेरी बनाने के लिए, सही लेवल की ऐब्स्ट्रैक्ट जानकारी का इस्तेमाल करें
  • यह समझना कि ज़्यादा कंट्रोल पाने के लिए कब निचले लेवल पर ‘ड्रॉप-डाउन’ किया जा सकता है या कस्टमाइज़ेशन
  • अपनी डिपेंडेंसी कम करें

परतें

Jetpack Compose की मुख्य लेयर ये हैं:

पहला डायग्राम. Jetpack Compose की मुख्य लेयर.

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

रनटाइम
यह मॉड्यूल Compose रनटाइम की बुनियादी बातें बताता है, जैसे कि remember, mutableStateOf, यह @Composable व्याख्या और SideEffect. अगर आपको सिर्फ़ ज़रूरत है, तो आप इस लेयर पर सीधे इमारत बनाने पर विचार कर सकते हैं Compose में ट्री मैनेज करने की सुविधाएं मिलती हैं, न कि यूज़र इंटरफ़ेस (यूआई) का.
यूज़र इंटरफ़ेस (यूआई)
यूज़र इंटरफ़ेस (यूआई) लेयर में कई मॉड्यूल ( ui-text, ui-graphics, ui-tooling, वगैरह). ये मॉड्यूल यूज़र इंटरफ़ेस (यूआई) टूलकिट की बुनियादी बातों को लागू करते हैं, जैसे LayoutNode, Modifier, इनपुट हैंडलर, और ड्रॉइंग की सुविधा मिलती है. आप इस परत का निर्माण करने पर विचार कर सकते हैं अगर आपको सिर्फ़ यूज़र इंटरफ़ेस (यूआई) टूलकिट के बुनियादी सिद्धांतों की ज़रूरत होती है.
फ़ाउंडेशन
यह मॉड्यूल, Compose के यूज़र इंटरफ़ेस (यूआई) के लिए डिज़ाइन सिस्टम के एग्नोस्टिक बिल्डिंग ब्लॉक उपलब्ध कराता है, पसंद करें Row और Column, LazyColumn, की पहचान करना, आदि. आप अपना खुद का डिज़ाइन सिस्टम बनाने के लिए फ़ाउंडेशन लेयर.
मटीरियल
यह मॉड्यूल थीम बनाने का सिस्टम, स्टाइल वाले कॉम्पोनेंट, रिपल उपलब्ध कराते हुए, यूज़र इंटरफ़ेस (यूआई) लिखें संकेत, आइकॉन. अपने फ़ोन में मटीरियल डिज़ाइन का उपयोग करते समय इस लेयर पर बनाएं ऐप्लिकेशन खोलें.

डिज़ाइन से जुड़े सिद्धांत

Jetpack Compose का इस्तेमाल करने का मुख्य सिद्धांत यह है कि ऐसी सुविधाएं जिन्हें कुछ के बजाय एक साथ जोड़ा या बनाया जा सके मोनोलिथिक कॉम्पोनेंट. इस तरीके के कई फ़ायदे हैं.

कंट्रोल

हाई लेवल के कॉम्पोनेंट आपके लिए ज़्यादा काम के होते हैं. हालांकि, ये कॉम्पोनेंट सीधे तौर पर आपके लक्ष्यों को पूरा नहीं करते इस पर कोई कंट्रोल नहीं है. अगर आपको ज़्यादा कंट्रोल चाहिए, तो "ड्रॉप डाउन" का विकल्प चुनें इस्तेमाल करने के लिए निचले लेवल का कॉम्पोनेंट.

उदाहरण के लिए, अगर आप किसी घटक के रंग को ऐनिमेट करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं: animateColorAsState एपीआई:

val color = animateColorAsState(if (condition) Color.Green else Color.Red)
ArchitectureLayering.kt

हालांकि, अगर आपको कॉम्पोनेंट हमेशा ग्रे रंग में शुरू करना है, तो ऐसा नहीं किया जा सकता इस एपीआई की मदद से ऐसा करें. इसके बजाय, नीचे के लेवल का इस्तेमाल करने के लिए ड्रॉप-डाउन का इस्तेमाल किया जा सकता है Animatable एपीआई:

val color = remember { Animatable(Color.Gray) }
LaunchedEffect(condition) {
    color.animateTo(if (condition) Color.Green else Color.Red)
}
ArchitectureLayering.kt

ऊंचे लेवल का animateColorAsState एपीआई, निचले लेवल पर ही बनाया जाता है Animatable एपीआई. लोअर लेवल एपीआई का इस्तेमाल करना ज़्यादा मुश्किल होता है, लेकिन इससे ज़्यादा सुविधाएं मिलती हैं नियंत्रण. अपनी ज़रूरत के हिसाब से, ऐब्स्ट्रैक्ट का लेवल चुनें.

पसंद के मुताबिक बनाएं

छोटे बिल्डिंग ब्लॉक से उच्च स्तर के घटकों को इकट्ठा करना इसे दूर करता है कॉम्पोनेंट को ज़रूरत के मुताबिक बनाने में आसानी होती है. उदाहरण के लिए, लागू करना में से Button मटीरियल लेयर से उपलब्ध कराया जाता है:

@Composable
fun Button(
    // …
    content: @Composable RowScope.() -> Unit
) {
    Surface(/* … */) {
        CompositionLocalProvider(/* … */) { // set LocalContentAlpha
            ProvideTextStyle(MaterialTheme.typography.button) {
                Row(
                    // …
                    content = content
                )
            }
        }
    }
}
ArchitectureLayering.kt

Button बनाने के लिए, चार कॉम्पोनेंट इस्तेमाल किए जाते हैं:

  1. मटीरियल Surface बैकग्राउंड, आकार, क्लिक हैंडलिंग वगैरह की जानकारी देना.

  2. ऐप्लिकेशन CompositionLocalProvider इससे, बटन के चालू या बंद होने पर कॉन्टेंट के ऐल्फ़ा वर्शन में बदलाव हो जाता है

  3. ऐप्लिकेशन ProvideTextStyle डिफ़ॉल्ट टेक्स्ट शैली को उपयोग के लिए सेट करता है

  4. Row, बटन के कॉन्टेंट के लिए डिफ़ॉल्ट लेआउट नीति देता है

हमने स्ट्रक्चर को साफ़ तौर पर बताने के लिए, कुछ पैरामीटर और टिप्पणियों को छोड़ दिया है, लेकिन पूरा कॉम्पोनेंट करीब 40 लाइनों वाला कोड होता है, क्योंकि बटन लागू करने के लिए, इन चार कॉम्पोनेंट को जोड़ता है. Button जैसे कॉम्पोनेंट उनके बारे में राय दी जाती है कि वे कौनसे पैरामीटर ज़ाहिर करते हैं, ताकि पैरामीटर के विस्फोट के लिए कस्टमाइज़ेशन जो एक घटक बना सकते हैं इस्तेमाल न किया जा सके. मटीरियल कॉम्पोनेंट, जैसे कि ऑफ़र को पसंद के मुताबिक बनाने के लिए में मटीरियल डिज़ाइन सिस्टम में उपलब्ध हैं, जिससे मटीरियल डिज़ाइन को फ़ॉलो करना आसान हो जाता है सिद्धांत.

हालांकि, अगर आपको कॉम्पोनेंट के पैरामीटर के अलावा, अन्य चीज़ों को पसंद के मुताबिक बनाना है, तो तो "ड्रॉप डाउन" एक लेवल बनाकर एक कॉम्पोनेंट को फ़ोर्क करें. उदाहरण के लिए, Material डिज़ाइन तय करता है कि बटन का बैकग्राउंड गहरे रंग का होना चाहिए. अगर आपको ग्रेडिएंट बैकग्राउंड की ज़रूरत है, तो यह विकल्प Button पर काम नहीं करता पैरामीटर का इस्तेमाल करें. इस मामले में, मटीरियल Button को लागू करने के तरीके का इस्तेमाल रेफ़रंस के तौर पर इसका इस्तेमाल करें और अपना कॉम्पोनेंट बनाएं:

@Composable
fun GradientButton(
    // …
    background: List<Color>,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(
                Brush.horizontalGradient(background)
            )
    ) {
        CompositionLocalProvider(/* … */) { // set material LocalContentAlpha
            ProvideTextStyle(MaterialTheme.typography.button) {
                content()
            }
        }
    }
}
ArchitectureLayering.kt

ऊपर दिया गया तरीका मटीरियल लेयर के कॉम्पोनेंट का इस्तेमाल करना जारी रखता है, जैसे कि मटीरियल का मतलब है कि मौजूदा कॉन्टेंट का ऐल्फ़ा वर्शन और मौजूदा टेक्स्ट स्टाइल. हालांकि, यह मटीरियल Surface को Row और इसे मनमुताबिक लुक देने के लिए स्टाइल करता है.

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

@Composable
fun BespokeButton(
    // …
    backgroundColor: Color,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(backgroundColor)
    ) {
        // No Material components used
        content()
    }
}
ArchitectureLayering.kt

Jetpack Compose सबसे ऊपर वाले लेवल के कॉम्पोनेंट के लिए सबसे आसान नाम सुरक्षित रखता है. उदाहरण के लिए, androidx.compose.material.Text इसके आधार पर बनाया जाता है androidx.compose.foundation.text.BasicText. इसकी मदद से, अपने कन्वर्ज़न ट्रैकिंग का सबसे ज़्यादा इस्तेमाल किया जा सकता है खोजे जाने लायक नाम तक सीमित करें.

सही ऐब्स्ट्रैक्ट चुनना

Compose में लेयर और फिर से इस्तेमाल किए जा सकने वाले कॉम्पोनेंट बनाने के सिद्धांत का मतलब है कि हमेशा निचले स्तर के बिल्डिंग ब्लॉक तक नहीं पहुंचना चाहिए. बहुत ऊंचे लेवल कॉम्पोनेंट से न सिर्फ़ ज़्यादा सुविधाएं मिलती हैं, बल्कि वे अक्सर सबसे सही तरीके भी अपनाते हैं जैसे, सुलभता सुविधाओं के साथ काम करना.

उदाहरण के लिए, अगर आपको अपने कस्टम कॉम्पोनेंट में जेस्चर की सुविधा जोड़नी है, तो की मदद से इसे शुरुआत से बनाया जा सकता है Modifier.pointerInput हालाँकि, इसके ऊपर उच्च स्तर के अन्य कॉम्पोनेंट बनाए गए हैं जो शुरुआत करने के लिए एक बेहतर विकल्प हो, उदाहरण के लिए Modifier.draggable, Modifier.scrollable या Modifier.swipeable.

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

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

ज़्यादा जानकारी के लिए, JetSnacks सैंपल उदाहरण के लिए, हम कस्टम डिज़ाइन सिस्टम बनाने का तरीका बताएंगे.