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

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

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

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

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

ज़रूरी शर्तें

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

आपको क्या सीखने को मिलेगा

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

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

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

पूरा किया गया ऐप्लिकेशन

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

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

2. सेट अप करें

कोड पाना

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

GitHub से relay-codelabs रिपॉज़िटरी का क्लोन बनाएं:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

होम स्क्रीन

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

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

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

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

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

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

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

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

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

Figma स्टाइल

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 फ़ील्ड पर पिवट करने वाले 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())
}

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

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 मॉडिफ़ायर पास करें.
TrackerData ऑब्जेक्ट से Switch() फ़ंक्शन में वैल्यू पास करें. इसमें isToggled() तरीका भी शामिल है.

पूरा 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. मौजूदा कॉम्पोनेंट को मैप करना

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

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

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

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

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

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

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

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

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

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

Relay for 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 ऑब्जेक्ट का वैकल्पिक कलेक्शन भी पहचानती हैं. इन फ़ील्ड मैपिंग की मदद से, पैकेज पैरामीटर को उम्मीद के मुताबिक Compose पैरामीटर में बदला जा सकता है. इस मामले में, एपीआई एक जैसे हैं. इसलिए, आपको सिर्फ़ टारगेट क्लास तय करनी होगी.

प्रोजेक्ट को फिर से बनाएं.
trackersettings/ TrackerSettings.kt फ़ाइल में, जनरेट किया गया TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() Composable फ़ंक्शन ढूंढें और ध्यान दें कि इसमें जनरेट किया गया 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. Compose की थीम के लिए मैप

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

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

दिन के नेविगेशन कॉम्पोनेंट को देखना मुश्किल है और रंग गलत हैं. इस समस्या को ठीक करने के लिए, Relay में स्टाइल-मैपिंग की सुविधा का इस्तेमाल करके, जनरेट किए गए कोड में Figma स्टाइल को Compose थीम टोकन से लिंक करें. इससे, Relay और Material Design 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 स्टाइल को Compose थीम में बदलें चेकबॉक्स को चुनें.
कस्टम कॉन्फ़िगरेशन इंपोर्ट करें को चुनें. फ़ोल्डर आइकॉन पर क्लिक करें. इसके बाद, वह फ़ाइल चुनें जो आपने अभी बनाई है: 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)
    )
}

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

9. बधाई हो

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

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

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

ज़रूरी शर्तें

आपको क्या सीखने को मिलेगा

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

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

2. सेट अप करें

कोड पाना

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

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

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

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

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

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

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

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

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

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

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

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

ट्रैकर डालना

TrackerControl.kt

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

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

SwitchControl.kt

TrackerControl.kt

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

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

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

text_field.json

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

8. Compose की थीम के लिए मैप

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

figma_styles.json

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

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

9. बधाई हो

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

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