इस पेज का अनुवाद Cloud Translation API से किया गया है.

Relay और Jetpack Compose की मदद से एक ऐप्लिकेशन बनाएं

1. शुरू करने से पहले

Relay एक टूलकिट है. इसकी मदद से, टीमें Figma में यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट डिज़ाइन कर सकती हैं. साथ ही, उनका इस्तेमाल सीधे Jetpack Compose प्रोजेक्ट में कर सकती हैं. इससे डिज़ाइन के मुश्किल डिज़ाइन और QA साइकल की ज़रूरत नहीं पड़ती. इससे टीम को Android के यूज़र इंटरफ़ेस (यूआई) तेज़ी से डिलीवर करने में मदद मिलती है.

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

ज़रूरी शर्तें

Compose की सुविधा इस्तेमाल करने का बुनियादी अनुभव. अगर आपने अभी तक ऐसा नहीं किया है, तो Jetpack Compose की बुनियादी बातें कोडलैब को पूरा करें.
Kotlin सिंटैक्स के साथ अनुभव.

आपको इनके बारे में जानकारी मिलेगी

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

आपको क्या बनाना होगा

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

इस्तेमाल किया जा चुका ऐप्लिकेशन

आपको इन चीज़ों की ज़रूरत होगी

Android Studio इलेक्ट्रिक ईल या उसके बाद वाला वर्शन
मुफ़्त Figma खाता और निजी ऐक्सेस टोकन

2. सेट अप करें

कोड पाएं

इस कोडलैब के लिए कोड पाने के लिए, इनमें से कोई एक काम करें:

GitHub से relay-codelabs डेटा स्टोर करने की जगह का क्लोन बनाएं:

$ git clone https://github.com/googlecodelabs/relay-codelabs

GitHub पर relay-codelabs डेटा स्टोर करने की जगह पर जाएं और अपनी पसंद की ब्रांच चुनें. इसके बाद, कोड > पर क्लिक करें ZIP डाउनलोड करें और डाउनलोड की गई ZIP फ़ाइल को अनपैक करें.

दोनों मामलों में, main ब्रांच में स्टार्टर कोड और end ब्रांच में सलूशन कोड होता है.

Android Studio प्लगिन के लिए रिले इंस्टॉल करना

अगर आपके पास पहले से Android Studio के लिए रिले प्लगिन नहीं है, तो यह तरीका अपनाएं:

Android Studio में, सेटिंग > प्लगिन.
टेक्स्ट बॉक्स में, Relay for Android Studio डालें.
खोज के नतीजों में दिखने वाले एक्सटेंशन पर, इंस्टॉल करें पर क्लिक करें.

Android Studio की प्लग इन सेटिंग

अगर आपको तीसरे पक्ष के प्लगिन के लिए निजता नोट डायलॉग दिखता है, तो स्वीकार करें पर क्लिक करें.
OK > पर क्लिक करें रीस्टार्ट करें.
अगर आपको बाहर निकलने की पुष्टि करें डायलॉग दिखता है, तो बाहर निकलें पर क्लिक करें.

Android Studio को Figma से कनेक्ट करना

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

अगर आपने Android Studio को Figma से पहले से कनेक्ट नहीं किया है, तो यह तरीका अपनाएं:

अपने Figma खाते में जाकर, पेज पर सबसे ऊपर मौजूद प्रोफ़ाइल आइकॉन पर क्लिक करें और सेटिंग चुनें.
Personal Access टोकन सेक्शन में, टेक्स्ट बॉक्स में टोकन के लिए जानकारी डालें. इसके बाद, Enter (या macOS पर return) दबाएं. एक टोकन जनरेट किया गया.
इस टोकन को कॉपी करें पर क्लिक करें.

Figma में ऐक्सेस टोकन जनरेट किया गया

Android Studio में, टूल > चुनें रिले की सेटिंग. इसके बाद, रीले की सेटिंग वाला डायलॉग बॉक्स दिखेगा.
Figma Access Token टेक्स्ट बॉक्स में, ऐक्सेस टोकन चिपकाएं. इसके बाद, OK पर क्लिक करें. आपका एनवायरमेंट सेट अप हो गया है.

3. ऐप्लिकेशन के डिज़ाइन की समीक्षा करना

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

होम स्क्रीन की समीक्षा करें

होम स्क्रीन पर, उपयोगकर्ता के तय किए गए ट्रैकर की सूची दिखती है. इसकी मदद से, दिन में अलग-अलग समय पर वीडियो देखने के साथ-साथ, दूसरे ट्रैकर बनाने की सुविधा भी मिलती है.

होम स्क्रीन

Figma में, हमारे डिज़ाइनर ने इस स्क्रीन को कई कॉम्पोनेंट में बांटा, उनके एपीआई तय किए, और उन्हें Relay for Figma प्लगिन के साथ पैकेज किया. इन कॉम्पोनेंट को पैकेज करने के बाद, उन्हें Android Studio प्रोजेक्ट में इंपोर्ट किया जा सकता है.

होम स्क्रीन कॉम्पोनेंट

स्क्रीन जोड़ें/बदलाव करें की समीक्षा करें

ऐड/एडिट स्क्रीन पर, उपयोगकर्ता ट्रैकर जोड़ सकते हैं या उनमें बदलाव कर सकते हैं. दिखाया गया फ़ॉर्म, ट्रैकर टाइप के हिसाब से थोड़ा अलग होता है.

'जोड़ें/बदलाव करें' स्क्रीन

इसी तरह, इस स्क्रीन को कई पैकेज कॉम्पोनेंट में बांटा गया है.

स्क्रीन के कॉम्पोनेंट जोड़ें या उनमें बदलाव करें

थीम की समीक्षा करना

इस डिज़ाइन के लिए रंग और टाइपोग्राफ़ी, Material Design 3 के टोकन नामों के आधार पर Figma स्टाइल के तौर पर लागू किए जाते हैं. इससे, Compose की थीम और मटीरियल कॉम्पोनेंट की मदद से बेहतर इंटरऑपरेबिलिटी (दूसरे सिस्टम के साथ काम करने की सुविधा) मिलती है.

फ़िग्मा स्टाइल

4. यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें

Figma सोर्स का लिंक पाएं

अपने प्रोजेक्ट में यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करने से पहले, आपको डिज़ाइन का सोर्स Figma पर अपलोड करना होगा.

Figma स्रोत का लिंक पाने के लिए, यह तरीका अपनाएं:

Figma में, फ़ाइल इंपोर्ट करें पर क्लिक करें और फिर CompleteAppCodelab प्रोजेक्ट फ़ोल्डर में मिली ReflectDesign.fig फ़ाइल चुनें.
फ़ाइल पर राइट क्लिक करें. इसके बाद, लिंक कॉपी करें चुनें. अगले सेक्शन में इसकी जानकारी दी गई है.

प्रोजेक्ट में यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करना

Android Studio में, ./CompleteAppCodelab प्रोजेक्ट खोलें.
फ़ाइल > नया > यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें. आपको यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें डायलॉग दिखेगा.
Figma सोर्स यूआरएल टेक्स्ट बॉक्स में, पिछले सेक्शन में कॉपी किया गया यूआरएल चिपकाएं.

ऐप्लिकेशन थीम टेक्स्ट बॉक्स में, com.google.relay.example.reflect.ui.theme.ReflectTheme डालें. इससे पक्का होता है कि जनरेट की गई झलक, पसंद के मुताबिक बनाई गई थीम का इस्तेमाल करती हैं.
आगे बढ़ें पर क्लिक करें. आपको फ़ाइल के यूज़र इंटरफ़ेस (यूआई) पैकेज की झलक दिखती है.
बनाएं पर क्लिक करें. पैकेज आपके प्रोजेक्ट में इंपोर्ट हो जाते हैं.
प्रोजेक्ट टैब पर जाएं और फिर ui-packages फ़ोल्डर के बगल में मौजूद, एक्सपैंडर ऐरो पर क्लिक करें.

ui-packages फ़ोल्डर

किसी पैकेज फ़ोल्डर के बगल में मौजूद, एक्सपैंडर ऐरो पर क्लिक करें. इसके बाद, देखें कि इसमें JSON सोर्स फ़ाइल और ऐसेट डिपेंडेंसी शामिल हैं.
JSON की सोर्स फ़ाइल खोलें. रिले मॉड्यूल, पैकेज और उसके एपीआई की झलक दिखाता है.

कोड बनाना और जनरेट करना

Android Studio में सबसे ऊपर, प्रोजेक्ट बनाएं पर क्लिक करें. हर पैकेज के लिए जनरेट किया गया कोड, java/com.google.relay.example.reflect फ़ोल्डर में जोड़ दिया जाता है. जनरेट किए गए कंपोज़ेबल में Figma के डिज़ाइन से ली गई सभी लेआउट और स्टाइलिंग की जानकारी शामिल होती है.
com/google/relay/example/reflect/range/Range.kt फ़ाइल खोलें.
ध्यान दें कि हर कॉम्पोनेंट के अलग-अलग वर्शन के लिए, कंपोज़ की झलक तैयार की जाती है. अगर ज़रूरी हो, तो स्प्लिट करें पर क्लिक करें, ताकि आपको एक-दूसरे के बगल में कोड और झलक दिखाने वाले पैनल दिखें.

5. कॉम्पोनेंट इंटिग्रेट करना

इस सेक्शन में, स्विच ट्रैकर के लिए जनरेट किए गए कोड के बारे में ज़्यादा जानकारी दी गई है.

स्विच ट्रैकर का डिज़ाइन

Android Studio में, com/google/relay/example/reflect/switch/Switch.kt फ़ाइल खोलें.

Switch.kt (जनरेट किया गया)

/**
 * This composable was generated from the UI Package 'switch'.
 * Generated code; don't edit directly.
 */
@Composable
fun Switch(
    modifier: Modifier = Modifier,
    isChecked: Boolean = false,
    emoji: String = "",
    title: String = ""
) {
    TopLevel(modifier = modifier) {
        if (isChecked) {
            ActiveOverlay(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
        }
        TopLevelSynth(modifier = Modifier.rowWeight(1.0f)) {
            Label(modifier = Modifier.rowWeight(1.0f)) {
                Emoji(emoji = emoji)
                Title(
                    title = title,
                    modifier = Modifier.rowWeight(1.0f)
                )
            }
            Checkmark {
                if (isChecked) {
                    Icon()
                }
            }
        }
    }
}

इन बातों पर ध्यान दें:

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

ट्रैकर डालना

Android Studio में, java/com/google/relay/example/reflect/ui/components/TrackerControl.kt फ़ाइल खोलें. यह फ़ाइल, हैबिट ट्रैकर के लिए डेटा और इंटरैक्शन का लॉजिक उपलब्ध कराती है.
एम्युलेटर में ऐप्लिकेशन बनाएं और चलाएं. फ़िलहाल, यह कॉम्पोनेंट ट्रैकर मॉडल से रॉ डेटा देता है.

फ़ाइल में com.google.relay.example.reflect.switch.Switch पैकेज इंपोर्ट करें.
Text(text = trackerData.tracker.toString()) को when ब्लॉक से बदलें, जो trackerData.tracker.type फ़ील्ड में पिवट हो.
when ब्लॉक के मुख्य भाग में, TrackerType.BOOLEAN टाइप होने पर Switch() Composable फ़ंक्शन को कॉल करें.

आपका कोड कुछ ऐसा दिखना चाहिए:

TrackerControl.kt

// TODO: replace with Relay tracker components
when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        Switch(
          title = trackerData.tracker.name,
          emoji = trackerData.tracker.emoji
        )
    else ->
        Text(trackerData.tracker.toString())
}

प्रोजेक्ट फिर से बनाएं. अब होम पेज, Switch ट्रैकर को लाइव डेटा के हिसाब से सही तरीके से रेंडर करता है.

6. राज्य और इंटरैक्शन जोड़ें

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

कंट्रोलर के `Composable` फ़ंक्शन में यूज़र इंटरफ़ेस (यूआई) पैकेज रैप करें

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

स्विच ट्रैकर के लिए कंट्रोलर बनाने के लिए, यह तरीका अपनाएं:

Android Studio में, java/com/google/relay/example/reflect/ui/components/SwitchControl.kt फ़ाइल खोलें.
SwitchControl() Composable फ़ंक्शन में, ये पैरामीटर पास करें:

trackerData: एक TrackerData ऑब्जेक्ट
modifier: एक डेकोरेटर ऑब्जेक्ट
onLongClick: ट्रैकर को दबाकर रखने और उसमें बदलाव करने के लिए, एक इंटरैक्शन कॉलबैक

क्लिक करने और दबाकर रखने के लिए, Switch() फ़ंक्शन डालें और combinedClickable मॉडिफ़ायर में पास करें.
isToggled() तरीके के साथ-साथ, TrackerData ऑब्जेक्ट की वैल्यू को Switch() फ़ंक्शन में पास करें.

पूरा हो चुका SwitchControl() फ़ंक्शन इस कोड स्निपेट की तरह दिखता है:

SwitchControl.kt

package com.google.relay.example.reflect.ui.components

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.relay.example.reflect.model.Tracker
import com.google.relay.example.reflect.model.TrackerData
import com.google.relay.example.reflect.model.TrackerType
import com.google.relay.example.reflect.switch.Switch

/*
 * A component for controlling switch-type trackers.
 *
 * SwitchControl is responsible for providing interaction and state management to the stateless
 * composable [Switch] generated by Relay. [onLongClick] provides a way for callers to supplement
 * the control's intrinsic interactions with, for example, a context menu.
 */
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SwitchControl(
    trackerData: TrackerData,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
) {
    Switch(
        modifier
            .clip(shape = RoundedCornerShape(size = 32.dp))
            .combinedClickable(onLongClick = onLongClick) {
                trackerData.toggle()
            },
        emoji = trackerData.tracker.emoji,
        title = trackerData.tracker.name,
        isChecked = trackerData.isToggled(),
    )
}

@Preview
@Composable
fun SwitchControllerPreview() {
    val data = TrackerData(
        Tracker(
            emoji = "🍕",
            name = "Ate Pizza",
            type = TrackerType.BOOLEAN
        )
    )
    SwitchControl(data)
}

TrackerControl.kt फ़ाइल में, Switch इंपोर्ट को हटाएं. इसके बाद, Switch() फ़ंक्शन को SwitchControl() फ़ंक्शन को किए गए कॉल से बदलें.
TrackerType.RANGE और TrackerType.COUNT एन्यूमरेटर कॉन्सटेंट के लिए केस जोड़ें.

पूरा हो चुका when ब्लॉक इस कोड स्निपेट की तरह दिखता है:

TrackerControl.kt

when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        SwitchControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.RANGE ->
        RangeControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.COUNT ->
        ValueControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
}

प्रोजेक्ट फिर से बनाएं. अब ट्रैकर डिसप्ले किया जा सकता है और उनसे इंटरैक्ट किया जा सकता है. होम स्क्रीन पूरी हो गई है.

7. मौजूदा कॉम्पोनेंट को मैप करें

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

टेक्स्ट फ़ील्ड को मैप करें

नीचे दी गई इमेज, ट्रैकर जोड़ें/बदलाव करें डायलॉग में Tracker Settings कॉम्पोनेंट का डिज़ाइन है:

'सेटिंग स्विच करें' कॉम्पोनेंट के लिए डिज़ाइन

हमारे डिज़ाइनर ने डिज़ाइन में ReflectTextField का इस्तेमाल किया है, जिसके लिए हमारे पास पहले से ही Material Design 3 टेक्स्ट फ़ील्ड के ऊपर बनाए गए कोड में लागू करने की सुविधा मौजूद है. Figma मूल रूप से टेक्स्ट फ़ील्ड के साथ काम नहीं करता है. इसलिए, रिले से जनरेट किया गया डिफ़ॉल्ट कोड सिर्फ़ डिज़ाइन की तरह दिखता है; यह फ़ंक्शनल कंट्रोल नहीं है.

TrackerSettings को लागू करने के मौजूदा तरीके की जांच करने के लिए:

Android Studio में, एम्युलेटर में ऐप्लिकेशन बनाएं और चलाएं.
ट्रैकर की लाइन को दबाकर रखें और बदलाव करें को चुनें.
Title टेक्स्ट फ़ील्ड पर टैप करें और ध्यान दें कि यह इंटरैक्शन का जवाब नहीं दे रहा है.

इस एलिमेंट को असल में लागू करने के लिए, आपको दो चीज़ों की ज़रूरत होगी: टेक्स्ट फ़ील्ड यूज़र इंटरफ़ेस (यूआई) पैकेज और मैपिंग फ़ाइल. अच्छी बात यह है कि हमारे डिज़ाइनर ने पहले ही हमारे डिज़ाइन सिस्टम के कॉम्पोनेंट को Figma में पैक कर दिया है. साथ ही, Tracker Settings के लिए डिज़ाइन में टेक्स्ट फ़ील्ड कॉम्पोनेंट इस्तेमाल किया है. डिफ़ॉल्ट रूप से, यह नेस्ट किया गया पैकेज, डिपेंडेंसी के तौर पर जनरेट होता है. हालांकि, इसे बदलने के लिए कॉम्पोनेंट मैपिंग का इस्तेमाल किया जाता है.

ओवरले प्लगिन के साथ टेक्स्ट फ़ील्ड के लिए Figma कॉम्पोनेंट

मैपिंग फ़ाइल बनाना

Android Studio प्लगिन के लिए रिले, कॉम्पोनेंट मैपिंग फ़ाइलें बनाने का शॉर्टकट देता है.

मैपिंग फ़ाइल बनाने के लिए, यह तरीका अपनाएं:

Android Studio में, text_field यूज़र इंटरफ़ेस (यूआई) पैकेज पर राइट क्लिक करें. इसके बाद, मैपिंग फ़ाइल जनरेट करें को चुनें.

मैपिंग फ़ाइल का कॉन्टेक्स्ट मेन्यू आइटम जनरेट करें

मैपिंग फ़ाइल का डायलॉग दिखेगा. नीचे दिए गए विकल्प डालें:

टारगेट कंपोज़ेबल में, मौजूदा कंपोज़ेबल का इस्तेमाल करें चुनें और com.google.relay.example.reflect.ui.components.ReflectTextField डालें
जनरेट की गई फ़ाइल में, लागू करने की प्रोसेस जनरेट करें पर सही का निशान लगाएं. इसके बाद, Compose की झलक जनरेट करें से सही का निशान हटाएं

मैपिंग फ़ाइल जनरेट करें पर क्लिक करें. इससे यह मैपिंग फ़ाइल जनरेट होगी:

text_field.json

{
  "target": "ReflectTextField",
  "package": "com.google.relay.example.reflect.ui.components",
  "generateImplementation": true,
  "generatePreviews": false,
}

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

प्रोजेक्ट फिर से बनाएं.
trackersettings/ TrackerSettings.kt फ़ाइल में, जनरेट किया गया TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() कंपोज़ेबल फ़ंक्शन ढूंढें और ध्यान दें कि इसमें जनरेट किया गया ReflectTextField कॉम्पोनेंट शामिल है.

TrackerSettings.kt (जनरेट किया गया)

@Composable
fun TitleFieldStyleFilledStateEnabledTextConfigurationsInputText(
    onTitleChanged: (String) -> Unit,
    title: String,
    modifier: Modifier = Modifier
) {
    ReflectTextField(
        onChange = onTitleChanged,
        labelText = "Title",
        leadingIcon = "search",
        trailingIcon = "cancel",
        supportingText = "Supporting text",
        inputText = title,
        state = State.Enabled,
        textConfigurations = TextConfigurations.InputText,
        modifier = modifier.fillMaxWidth(1.0f).requiredHeight(56.0.dp)
    )
}

प्रोजेक्ट फिर से बनाएं. अब ट्रैकर की सेटिंग फ़ील्ड का इस्तेमाल किया जा सकता है. बदलाव करने की स्क्रीन पूरी हो गई है.

8. थीम लिखने के लिए मैप करें

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

गहरे रंग वाले मोड का इस्तेमाल करके होम स्क्रीन की झलक और गलत रंग दिखाना

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

स्टाइल-मैपिंग फ़ाइल बनाना

Android Studio में, src/main/ui-package-resources डायरेक्ट्री पर जाएं और style-mappings नाम की एक नई डायरेक्ट्री बनाएं. उस डायरेक्ट्री में, ऐसी figma_styles.json फ़ाइल बनाएं जिसमें यह कोड शामिल हो:

figma_styles.json

{
  "figma": {
    "colors": {
      "Reflect Light/background": "md.sys.color.background",
      "Reflect Dark/background": "md.sys.color.background",
      "Reflect Light/on-background": "md.sys.color.on-background",
      "Reflect Dark/on-background": "md.sys.color.on-background",
      "Reflect Light/surface": "md.sys.color.surface",
      "Reflect Dark/surface": "md.sys.color.surface",
      "Reflect Light/on-surface": "md.sys.color.on-surface",
      "Reflect Dark/on-surface": "md.sys.color.on-surface",
      "Reflect Light/surface-variant": "md.sys.color.surface-variant",
      "Reflect Dark/surface-variant": "md.sys.color.surface-variant",
      "Reflect Light/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Dark/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Light/primary": "md.sys.color.primary",
      "Reflect Dark/primary": "md.sys.color.primary",
      "Reflect Light/on-primary": "md.sys.color.on-primary",
      "Reflect Dark/on-primary": "md.sys.color.on-primary",
      "Reflect Light/primary-container": "md.sys.color.primary-container",
      "Reflect Dark/primary-container": "md.sys.color.primary-container",
      "Reflect Light/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Dark/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Light/secondary-container": "md.sys.color.secondary-container",
      "Reflect Dark/secondary-container": "md.sys.color.secondary-container",
      "Reflect Light/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Dark/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Light/outline": "md.sys.color.outline",
      "Reflect Dark/outline": "md.sys.color.outline",
      "Reflect Light/error": "md.sys.color.error",
      "Reflect Dark/error": "md.sys.color.error"
    },
    "typography": {
      "symbols": {
        "Reflect/headline/large": "md.sys.typescale.headline-large",
        "Reflect/headline/medium": "md.sys.typescale.headline-medium",
        "Reflect/headline/small": "md.sys.typescale.headline-small",
        "Reflect/title/large": "md.sys.typescale.title-large",
        "Reflect/title/medium": "md.sys.typescale.title-medium",
        "Reflect/title/small": "md.sys.typescale.title-small",
        "Reflect/body/large": "md.sys.typescale.body-large",
        "Reflect/body/medium": "md.sys.typescale.body-medium",
        "Reflect/body/small": "md.sys.typescale.body-small",
        "Reflect/label/large": "md.sys.typescale.label-large",
        "Reflect/label/medium": "md.sys.typescale.label-medium",
        "Reflect/label/small": "md.sys.typescale.label-small"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "md.sys.color.background": "MaterialTheme.colorScheme.background",
      "md.sys.color.error": "MaterialTheme.colorScheme.error",
      "md.sys.color.error-container": "MaterialTheme.colorScheme.errorContainer",
      "md.sys.color.inverse-on-surface": "MaterialTheme.colorScheme.inverseOnSurface",
      "md.sys.color.inverse-surface": "MaterialTheme.colorScheme.inverseSurface",
      "md.sys.color.on-background": "MaterialTheme.colorScheme.onBackground",
      "md.sys.color.on-error": "MaterialTheme.colorScheme.onError",
      "md.sys.color.on-error-container": "MaterialTheme.colorScheme.onErrorContainer",
      "md.sys.color.on-primary": "MaterialTheme.colorScheme.onPrimary",
      "md.sys.color.on-primary-container": "MaterialTheme.colorScheme.onPrimaryContainer",
      "md.sys.color.on-secondary": "MaterialTheme.colorScheme.onSecondary",
      "md.sys.color.on-secondary-container": "MaterialTheme.colorScheme.onSecondaryContainer",
      "md.sys.color.on-surface": "MaterialTheme.colorScheme.onSurface",
      "md.sys.color.on-surface-variant": "MaterialTheme.colorScheme.onSurfaceVariant",
      "md.sys.color.on-tertiary": "MaterialTheme.colorScheme.onTertiary",
      "md.sys.color.on-tertiary-container": "MaterialTheme.colorScheme.onTertiaryContainer",
      "md.sys.color.outline": "MaterialTheme.colorScheme.outline",
      "md.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "md.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "md.sys.color.secondary": "MaterialTheme.colorScheme.secondary",
      "md.sys.color.secondary-container": "MaterialTheme.colorScheme.secondaryContainer",
      "md.sys.color.surface": "MaterialTheme.colorScheme.surface",
      "md.sys.color.surface-variant": "MaterialTheme.colorScheme.surfaceVariant",
      "md.sys.color.tertiary": "MaterialTheme.colorScheme.tertiary",
      "md.sys.color.tertiary-container": "MaterialTheme.colorScheme.tertiaryContainer"
    },
    "typography": {
      "symbols": {
        "md.sys.typescale.display-large": "MaterialTheme.typography.displayLarge",
        "md.sys.typescale.display-medium": "MaterialTheme.typography.displayMedium",
        "md.sys.typescale.display-small": "MaterialTheme.typography.displaySmall",
        "md.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "md.sys.typescale.headline-medium": "MaterialTheme.typography.headlineMedium",
        "md.sys.typescale.headline-small": "MaterialTheme.typography.headlineSmall",
        "md.sys.typescale.title-large": "MaterialTheme.typography.titleLarge",
        "md.sys.typescale.title-medium": "MaterialTheme.typography.titleMedium",
        "md.sys.typescale.title-small": "MaterialTheme.typography.titleSmall",
        "md.sys.typescale.body-large": "MaterialTheme.typography.bodyLarge",
        "md.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium",
        "md.sys.typescale.body-small": "MaterialTheme.typography.bodySmall",
        "md.sys.typescale.label-large": "MaterialTheme.typography.labelLarge",
        "md.sys.typescale.label-medium": "MaterialTheme.typography.labelMedium",
        "md.sys.typescale.label-small": "MaterialTheme.typography.labelSmall"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

थीम मैपिंग फ़ाइलों को दो टॉप-लेवल ऑब्जेक्ट से बनाया जाता है: figma और compose. इन ऑब्जेक्ट में, रंग और टाइप की परिभाषाएं इंटरमीडिएट टोकन की मदद से दोनों एनवायरमेंट के बीच जुड़ी होती हैं. इससे कई Figma स्टाइल को एक ही Compose की थीम में मैप किया जा सकता है. यह स्टाइल तब काम आती है, जब हल्के और गहरे रंग वाली थीम काम करती हैं.

मैपिंग फ़ाइल की समीक्षा करें. खास तौर पर, यह देखें कि यह Figma से टाइपोग्राफ़ी की प्रॉपर्टी को फिर से कैसे मैप करता है और Compose को कैसा परफ़ॉर्म करना चाहिए.

यूज़र इंटरफ़ेस (यूआई) पैकेज फिर से इंपोर्ट करें

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

यूज़र इंटरफ़ेस (यूआई) पैकेज को फिर से इंपोर्ट करने के लिए, यह तरीका अपनाएं:

Android Studio में, फ़ाइल > नया > यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें. आपको यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें डायलॉग दिखेगा.
Figma सोर्स यूआरएल टेक्स्ट बॉक्स में, Figma सोर्स फ़ाइल का यूआरएल डालें.
Figma स्टाइल का अनुवाद थीम बनाने के लिए करें चेकबॉक्स को चुनें.
कस्टम कॉन्फ़िगरेशन इंपोर्ट करें चुनें. फ़ोल्डर आइकॉन पर क्लिक करें और फिर वह फ़ाइल चुनें जो आपने अभी-अभी बनाई है: src/main/ui-package-resources/style-mappings/figma_styles.json.
आगे बढ़ें पर क्लिक करें. आपको फ़ाइल के यूज़र इंटरफ़ेस (यूआई) पैकेज की झलक दिखती है.
बनाएं पर क्लिक करें. पैकेज आपके प्रोजेक्ट में इंपोर्ट हो जाते हैं.

यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें डायलॉग

अपना प्रोजेक्ट फिर से बनाएं और जनरेट किया गया कोड देखने के लिए, switch/Switch.kt फ़ाइल खोलें.

Switch.kt (जनरेट किया गया)

@Composable
fun ActiveOverlay(
    modifier: Modifier = Modifier,
    content: @Composable RelayContainerScope.() -> Unit
) {
    RelayContainer(
        backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
        isStructured = false,
        radius = 32.0,
        content = content,
        modifier = modifier.fillMaxWidth(1.0f).fillMaxHeight(1.0f)
    )
}

ध्यान दें कि थीम ऑब्जेक्ट में backgroundColor पैरामीटर को MaterialTheme.colorScheme.surfaceVariant फ़ील्ड पर कैसे सेट किया गया है.
प्रोजेक्ट चलाएं और एम्युलेटर में गहरे रंग वाला मोड चालू करें. थीम सही तरीके से लागू की गई है और विज़ुअल गड़बड़ियां ठीक की गई हैं.

9. बधाई हो

बधाई हो! आपने अपने Compose ऐप्लिकेशन में रिले सेवा को इंटिग्रेट करने का तरीका सीख लिया है!

Relay और Jetpack Compose की मदद से एक ऐप्लिकेशन बनाएं

1. शुरू करने से पहले

ज़रूरी शर्तें

आपको इनके बारे में जानकारी मिलेगी

आपको क्या बनाना होगा

आपको इन चीज़ों की ज़रूरत होगी

2. सेट अप करें

कोड पाएं

Android Studio प्लगिन के लिए रिले इंस्टॉल करना

Android Studio को Figma से कनेक्ट करना

3. ऐप्लिकेशन के डिज़ाइन की समीक्षा करना

होम स्क्रीन की समीक्षा करें

स्क्रीन जोड़ें/बदलाव करें की समीक्षा करें

थीम की समीक्षा करना

4. यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें

Figma सोर्स का लिंक पाएं

प्रोजेक्ट में यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करना

कोड बनाना और जनरेट करना

5. कॉम्पोनेंट इंटिग्रेट करना

Switch.kt (जनरेट किया गया)

ट्रैकर डालना

TrackerControl.kt

6. राज्य और इंटरैक्शन जोड़ें

कंट्रोलर के Composable फ़ंक्शन में यूज़र इंटरफ़ेस (यूआई) पैकेज रैप करें

SwitchControl.kt

TrackerControl.kt

7. मौजूदा कॉम्पोनेंट को मैप करें

टेक्स्ट फ़ील्ड को मैप करें

मैपिंग फ़ाइल बनाना

text_field.json

TrackerSettings.kt (जनरेट किया गया)

8. थीम लिखने के लिए मैप करें

स्टाइल-मैपिंग फ़ाइल बनाना

figma_styles.json

यूज़र इंटरफ़ेस (यूआई) पैकेज फिर से इंपोर्ट करें

Switch.kt (जनरेट किया गया)

9. बधाई हो

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

कंट्रोलर के `Composable` फ़ंक्शन में यूज़र इंटरफ़ेस (यूआई) पैकेज रैप करें