Wear OS पर Jetpack Compose का इस्तेमाल करना

Wear OS के लिए Compose, मोबाइल के लिए Compose की तरह ही है. हालांकि, इनमें कुछ मुख्य अंतर हैं. इस गाइड में, इन दोनों के बीच के अंतर और समानताओं के बारे में बताया गया है.

Wear OS के लिए Compose, Android Jetpack का हिस्सा है. यह Wear Jetpack की उन अन्य लाइब्रेरी की तरह ही काम करती है जिनका इस्तेमाल किया जाता है. इससे आपको बेहतर कोड को तेज़ी से लिखने में मदद मिलती है. Wear OS ऐप्लिकेशन के लिए यूज़र इंटरफ़ेस बनाने का यह हमारा सुझाया गया तरीका है.

अगर आपको Jetpack Compose टूलकिट का इस्तेमाल करने के बारे में नहीं पता है, तो Compose पाथवे देखें. मोबाइल के लिए Compose के डेवलपमेंट के कई सिद्धांत, Wear OS के लिए Compose पर लागू होते हैं. एलान वाले यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क के सामान्य फ़ायदों के बारे में ज़्यादा जानकारी के लिए, Compose क्यों देखें. Wear OS के लिए Compose के बारे में ज़्यादा जानने के लिए, GitHub पर Compose for Wear OS पाथवे और Wear OS के सैंपल रिपॉज़िटरी देखें.

Wear OS पर Jetpack Compose में मटीरियल डिज़ाइन

Wear OS पर Jetpack Compose की मदद से, Material 2.5 को लागू किया जा सकता है. इससे, आपको ऐप्लिकेशन के ज़्यादा दिलचस्प अनुभव डिज़ाइन करने में मदद मिलती है. Wear OS पर, Material Design कॉम्पोनेंट, Wear Material थीम के आधार पर बनाए गए हैं. थीमिंग, Material Design को पसंद के मुताबिक बनाने और अपने प्रॉडक्ट के ब्रैंड को बेहतर तरीके से दिखाने का एक व्यवस्थित तरीका है.

इनके साथ काम करता है

Compose for Wear OS, Wear OS 3.0 (एपीआई लेवल 30) और Wear OS 2.0 (एपीआई लेवल 25 और उसके बाद के वर्शन) पर काम करने वाली स्मार्टवॉच पर काम करता है. Wear OS के लिए Compose के 1.4 वर्शन का इस्तेमाल करने के लिए, androidx.compose लाइब्रेरी के 1.7 वर्शन और Kotlin 1.9.0 का इस्तेमाल करना ज़रूरी है. Compose के साथ काम करने की सुविधा की जांच करने के लिए, BOM मैपिंग और Compose से Kotlin के साथ काम करने की सुविधा के मैप का इस्तेमाल किया जा सकता है.

प्लैटफ़ॉर्म

Compose for Wear OS की मदद से, Wear OS पर ऐप्लिकेशन बनाना आसान हो जाता है. ज़्यादा जानकारी के लिए, ऐप्लिकेशन देखें. Wear OS के दिशा-निर्देशों के मुताबिक उपयोगकर्ता अनुभव देने के लिए, पहले से मौजूद हमारे कॉम्पोनेंट का इस्तेमाल करें. कॉम्पोनेंट के बारे में ज़्यादा जानकारी के लिए, डिज़ाइन से जुड़े दिशा-निर्देश देखें.

सेट अप किया जा रहा है

Wear OS के साथ Jetpack Compose का इस्तेमाल करना, किसी भी दूसरे Android प्रोजेक्ट के लिए Jetpack Compose का इस्तेमाल करने जैसा ही है. मुख्य अंतर यह है कि Wear के लिए Jetpack Compose, Wear के हिसाब से लाइब्रेरी जोड़ता है. इन लाइब्रेरी की मदद से, स्मार्टवॉच के हिसाब से यूज़र इंटरफ़ेस बनाना आसान हो जाता है. कुछ मामलों में, उन कॉम्पोनेंट का नाम वही होता है जो उनके नॉन-वियर वर्शन का होता है. जैसे, androidx.wear.compose.material.Button और androidx.compose.material.Button.

Android Studio में नया ऐप्लिकेशन बनाना

Jetpack Compose का इस्तेमाल करके नया प्रोजेक्ट बनाने के लिए, यह तरीका अपनाएं:

1. अगर आप Android Studio में आपका स्वागत है विंडो में हैं, तो Android Studio में नया प्रोजेक्ट शुरू करें पर क्लिक करें. अगर आपके पास पहले से ही Android Studio प्रोजेक्ट खुला है, तो मेन्यू बार से फ़ाइल > नया > सैंपल इंपोर्ट करें चुनें.
2. Compose for Wear खोजें और Compose for Wear OS Starter चुनें.
3. अपना प्रोजेक्ट कॉन्फ़िगर करें विंडो में, ये काम करें:
   1. ऐप्लिकेशन का नाम सेट करें.
   2. अपने सैंपल के लिए प्रोजेक्ट की जगह चुनें.
4. पूरा करें पर क्लिक करें.
5. पुष्टि करें कि प्रोजेक्ट की build.gradle फ़ाइल को सही तरीके से कॉन्फ़िगर किया गया है, जैसा कि Gradle प्रॉपर्टी फ़ाइलों में बताया गया है.

अब आपके पास Wear OS के लिए Compose का इस्तेमाल करके, ऐप्लिकेशन डेवलप करने का विकल्प है.

Jetpack Compose टूलकिट की डिपेंडेंसी

Wear OS के साथ Jetpack Compose का इस्तेमाल करने के लिए, आपको अपने ऐप्लिकेशन की build.gradle फ़ाइल में Jetpack Compose टूलकिट की डिपेंडेंसी शामिल करनी होंगी. Wear OS से जुड़ी ज़्यादातर डिपेंडेंसी में हुए बदलाव, आर्किटेक्चर की सबसे ऊपरी लेयर में हैं. इन्हें नीचे दी गई इमेज में लाल बॉक्स में दिखाया गया है.

<img 'foundation',="" 'material',="" 'runtime'.="" 'ui',="" 2="" 4="" a="" alt="" and="" are="" bottom,="" box""="" by="" contain="" from="" rectangles="" rectangles.="" red="" src="/static/wear/images/components/ComposeDependencies.png" surrounded="" the="" to="" top="" />

इसका मतलब है कि Wear OS को टारगेट करते समय, Jetpack Compose के साथ पहले से इस्तेमाल की जा रही कई डिपेंडेंसी में कोई बदलाव नहीं होता. उदाहरण के लिए, यूज़र इंटरफ़ेस, रनटाइम, कंपाइलर, और ऐनिमेशन डिपेंडेंसी पहले जैसी ही रहती हैं.

हालांकि, Wear OS के पास material, foundation, और navigation लाइब्रेरी के अपने वर्शन हैं. इसलिए, पक्का करें कि आपने सही लाइब्रेरी का इस्तेमाल किया हो.

जहां भी हो सके, एपीआई के WearComposeMaterial वर्शन का इस्तेमाल करें. Compose Material के मोबाइल वर्शन का इस्तेमाल तकनीकी तौर पर किया जा सकता है. हालांकि, इसे Wear OS की खास ज़रूरतों के हिसाब से ऑप्टिमाइज़ नहीं किया गया है. इसके अलावा, Wear OS के लिए Compose Material को Compose Material के साथ मिक्स करने पर, अनचाहा व्यवहार हो सकता है. उदाहरण के लिए, हर लाइब्रेरी की अपनी MaterialTheme क्लास होती है. इसलिए, दोनों वर्शन का इस्तेमाल करने पर, रंग, टाइपोग्राफ़ी या आकार में अंतर हो सकता है.

यहां दी गई टेबल में, Wear OS और मोबाइल के बीच डिपेंडेंसी के अंतर के बारे में बताया गया है:

यहां दिया गया स्निपेट, build.gradle फ़ाइल का एक उदाहरण दिखाता है, जिसमें ये डिपेंडेंसी शामिल हैं:

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")

    // General compose dependencies
    implementation(composeBom)
    implementation("androidx.activity:activity-compose:1.9.3")
    implementation("androidx.compose.ui:ui-tooling-preview:1.7.5")
    // Other compose dependencies

    // Compose for Wear OS Dependencies
    implementation("androidx.wear.compose:compose-material:1.4.0")

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation("androidx.wear.compose:compose-foundation:1.4.0")

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.4.0")

    // If you are using Compose Navigation, use the Wear OS version (NOT THE MOBILE VERSION).
    // Uncomment the line below and update the version number.
    // implementation("androidx.wear.compose:compose-navigation:1.4.0")

    // Testing
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.3")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.3")
    debugImplementation("androidx.compose.ui:ui-tooling:1.0.3")
}