Wear OS के लिए Compose में, Material 2.5 से Material 3 पर माइग्रेट करना

मटीरियल 3 एक्सप्रेसिव, मटीरियल डिज़ाइन का अगला वर्शन है. इसमें अपडेट की गई थीम, कॉम्पोनेंट, और मनमुताबिक़ बनाने की सुविधाएँ शामिल हैं. जैसे, डाइनैमिक कलर.

इस गाइड में, ऐप्लिकेशन के लिए Wear Compose Material 2.5 (androidx.wear.compose) Jetpack लाइब्रेरी से Wear Compose Material 3 (androidx.wear.compose.material3) Jetpack लाइब्रेरी पर माइग्रेट करने के बारे में बताया गया है.

तरीके

अपने ऐप्लिकेशन के कोड को M2.5 से M3 पर माइग्रेट करने के लिए, Compose Material को फ़ोन पर माइग्रेट करने से जुड़े दिशा-निर्देश में बताया गया तरीका अपनाएं. खास तौर पर:

• आपको एक ही ऐप्लिकेशन में लंबे समय तक M2.5 और M3, दोनों का इस्तेमाल नहीं करना चाहिए.
• अब आपको Horologist Composables, Compose Layout या Compose Material लाइब्रेरी का इस्तेमाल नहीं करना चाहिए. इसके बजाय, M3 में मौजूद कॉम्पोनेंट का इस्तेमाल करें.
• फ़ेज़ के हिसाब से रणनीति अपनाएं.

डिपेंडेंसी

M3 का पैकेज और वर्शन, M2.5 से अलग है:

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:1.6.0")

Wear Compose Material 3 की रिलीज़ के पेज पर जाकर, M3 के नए वर्शन देखें.

Wear Compose Foundation लाइब्रेरी के वर्शन 1.6.0 में कुछ नए कॉम्पोनेंट जोड़े गए हैं. इन्हें Material 3 कॉम्पोनेंट के साथ काम करने के लिए डिज़ाइन किया गया है. इसी तरह, Wear Compose Navigation लाइब्रेरी में मौजूद SwipeDismissableNavHost को Wear OS 6 (एपीआई लेवल 36) या उसके बाद के वर्शन पर चलाने पर, अपडेट किया गया ऐनिमेशन दिखता है. Wear Compose के Material 3 वर्शन पर अपडेट करते समय, हमारा सुझाव है कि आप Wear Compose Foundation और Navigation लाइब्रेरी को भी अपडेट करें:

implementation("androidx.wear.compose:compose-foundation:1.6.0")
implementation("androidx.wear.compose:compose-navigation:1.6.0")

थीम

M2.5 और M3, दोनों में थीम कंपोज़ेबल का नाम MaterialTheme है. हालांकि, इंपोर्ट पैकेज और पैरामीटर अलग-अलग हैं. M3 में, Colors पैरामीटर का नाम बदलकर ColorScheme कर दिया गया है. साथ ही, ट्रांज़िशन लागू करने के लिए MotionScheme को पेश किया गया है.

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
    colors = AppColors,
    typography = AppTypography,
    shapes = AppShapes,
    content = content
)

import androidx.wear.compose.material3.MaterialTheme
// ...
    MaterialTheme(
        colorScheme = ColorScheme(),
        typography = Typography(),
        shapes = Shapes(),
        motionScheme = MotionScheme.standard(),
        content = { /*content here*/ }
    )
Theme.kt

रंग

M3 में इस्तेमाल किया गया कलर सिस्टम, M2.5 से काफ़ी अलग है. कलर पैरामीटर की संख्या बढ़ गई है. इनके नाम अलग-अलग हैं और ये M3 कॉम्पोनेंट से अलग तरीके से मैप होते हैं. Compose में, यह M2.5 Colors क्लास, M3 ColorScheme क्लास, और इनसे जुड़े फ़ंक्शन पर लागू होता है:

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme
// ...
    val appColorScheme: ColorScheme = ColorScheme(
        // M3 ColorScheme parameters
    )
Color.kt

यहां दी गई टेबल में, M2.5 और M3 के बीच के मुख्य अंतर के बारे में बताया गया है:

डाइनैमिक कलर थीम

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

डाइनैमिक कलर स्कीम लागू करने के लिए, dynamicColorScheme फ़ंक्शन का इस्तेमाल करें. साथ ही, अगर डाइनैमिक कलर स्कीम उपलब्ध नहीं है, तो फ़ॉलबैक के तौर पर defaultColorScheme उपलब्ध कराएं.

@Composable
fun myApp() {
    val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
    MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {}
}

internal val myBrandColors: ColorScheme = ColorScheme( /* Specify colors here */)
Color.kt

मुद्रण कला

M3 में टाइपोग्राफ़ी सिस्टम, M2.5 से अलग है. इसमें ये सुविधाएं शामिल हैं:

• नौ नई टेक्स्ट स्टाइल
• फ़्लेक्स फ़ॉन्ट, जिनकी मदद से अलग-अलग वेट, चौड़ाई, और गोलाई के लिए टाइप स्केल को पसंद के मुताबिक बनाया जा सकता है

• AnimatedText, जिसमें फ़्लेक्स फ़ॉन्ट का इस्तेमाल किया गया है

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
    // M3 TextStyle parameters
)
Typography.kt

फ़्लेक्स फ़ॉन्ट

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

टेक्स्ट स्टाइल

M3 में ये TextStyles उपलब्ध हैं. इनका इस्तेमाल, M3 के अलग-अलग कॉम्पोनेंट डिफ़ॉल्ट रूप से करते हैं.

आकार

M3 में शेप सिस्टम, M2.5 से अलग है. शेप पैरामीटर की संख्या बढ़ गई है. इनके नाम अलग-अलग हैं और ये M3 कॉम्पोनेंट से अलग तरीके से मैप होते हैं. ये शेप साइज़ उपलब्ध हैं:

• ज़्यादा छोटा
• छोटा
• मध्यम
• बड़ा
• ज़्यादा बड़ा

Compose में, यह M2 Shapes क्लास और M3 Shapes क्लास पर लागू होता है:

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
    // M3 Shapes parameters
)
Shape.kt

शुरुआत करने के लिए, Compose में Material 2 से Material 3 पर माइग्रेट करें लेख में दी गई, Shapes पैरामीटर मैपिंग का इस्तेमाल करें.

शेप मॉर्फ़िंग

M3 में शेप मॉर्फ़िंग की सुविधा जोड़ी गई है: अब इंटरैक्शन के हिसाब से शेप मॉर्फ़ होते हैं.

शेप मॉर्फ़िंग की सुविधा, कई गोल बटन पर उपलब्ध है. शेप मॉर्फ़िंग की सुविधा वाले बटन की सूची यहां दी गई है:

कॉम्पोनेंट और लेआउट

M2.5 के ज़्यादातर कॉम्पोनेंट और लेआउट, M3 में उपलब्ध हैं. हालांकि, M3 के कुछ कॉम्पोनेंट और लेआउट, M2.5 में मौजूद नहीं थे. इसके अलावा, M3 के कुछ कॉम्पोनेंट में, M2.5 के कॉम्पोनेंट की तुलना में ज़्यादा वेरिएशन होते हैं.

कुछ कॉम्पोनेंट के लिए खास बातों का ध्यान रखना ज़रूरी है. हालांकि, यहां दिए गए फ़ंक्शन मैपिंग को शुरुआती तौर पर इस्तेमाल करने का सुझाव दिया गया है:

यहां Material 3 के सभी कॉम्पोनेंट की पूरी सूची दी गई है:

आखिर में, Wear Compose Foundation लाइब्रेरी के कुछ काम के कॉम्पोनेंट की सूची:

बटन

M3 में मौजूद बटन, M2.5 से अलग हैं. M2.5 चिप की जगह बटन को शामिल किया गया है. Button को लागू करने पर, Text maxLines और textAlign के लिए डिफ़ॉल्ट वैल्यू मिलती हैं. डिफ़ॉल्ट वैल्यू को Text एलिमेंट में बदला जा सकता है.

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

//M3 Buttons
Button(onClick = { }){}
CompactButton(onClick = { }){}
IconButton(onClick = { }){}
TextButton(onClick = { }){}
Button.kt

M3 में बटन के नए वैरिएशन भी शामिल हैं. इन्हें Compose Material 3 API के बारे में खास जानकारी में देखें.

M3 में एक नया बटन जोड़ा गया है: EdgeButton. EdgeButton चार अलग-अलग साइज़ में उपलब्ध है: बहुत छोटा, छोटा, मीडियम, और बड़ा. EdgeButton लागू करने के तरीके के आधार पर, साइज़ के हिसाब से maxLines के लिए डिफ़ॉल्ट वैल्यू दी जाती है. हालांकि, इसे अपनी ज़रूरत के हिसाब से बदला जा सकता है.

अगर TransformingLazyColumn या ScalingLazyColumn का इस्तेमाल किया जा रहा है, तो EdgeButton को ScreenScaffold में पास करें, ताकि यह स्क्रोल करने पर अपना आकार बदल ले. इसके बजाय, EdgeButton को सूची के आखिरी आइटम के तौर पर न जोड़ें. EdgeButton को ScreenScaffold और TransformingLazyColumn के साथ इस्तेमाल करने का तरीका जानने के लिए, यहां दिया गया कोड देखें.

val state = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = state,
    contentPadding =
        rememberResponsiveColumnPadding(
            first = ColumnItemType.ListHeader
        ),
    edgeButton = {
        EdgeButton(
            onClick = { }
        ) {
            Text(stringResource(R.string.show))
        }
    }
){ contentPadding ->
    TransformingLazyColumn(state = state, contentPadding = contentPadding,){
        // additional code here
    }
}
Button.kt

स्काफ़ोल्ड

M3 में स्कैफ़ोल्ड, M2.5 से अलग है. M3 में, AppScaffold और नए ScreenScaffold कंपोज़ेबल ने Scaffold की जगह ले ली है. AppScaffold और ScreenScaffold, स्क्रीन के स्ट्रक्चर को ले आउट करते हैं. साथ ही, ScrollIndicator और TimeText कॉम्पोनेंट के ट्रांज़िशन को मैनेज करते हैं.

AppScaffold की मदद से, स्टैटिक स्क्रीन एलिमेंट जैसे कि TimeText को ऐप्लिकेशन में ट्रांज़िशन के दौरान भी देखा जा सकता है. जैसे, स्वाइप करके खारिज करना. ​​यह मुख्य ऐप्लिकेशन कॉन्टेंट के लिए एक स्लॉट उपलब्ध कराता है. यह कॉन्टेंट आम तौर पर नेविगेशन कॉम्पोनेंट से मिलता है. जैसे, SwipeDismissableNavHost

गतिविधि के लिए एक AppScaffold का एलान किया जाता है और हर स्क्रीन के लिए ScreenScaffold का इस्तेमाल किया जाता है. AppScaffold, स्क्रीन में डिफ़ॉल्ट TimeTextकॉम्पोनेंट जोड़ता है. अगर आपको इसे पसंद के मुताबिक बनाना है, तो timeText पैरामीटर का इस्तेमाल करके इसे बदला जा सकता है.

import androidx.wear.compose.material.Scaffold

Scaffold {...}

    AppScaffold {
        val navController = rememberSwipeDismissableNavController()
        SwipeDismissableNavHost(
            navController = navController,
            startDestination = "message_list"
        ) {
            composable("message_list") {
                MessageList(onMessageClick = { id ->
                    navController.navigate("message_detail/$id")
                })
            }
            composable("message_detail/{id}") {
                MessageDetail(id = it.arguments?.getString("id")!!)
            }
        }
    }
}

// Implementation of one of the screens in the navigation
@Composable
fun MessageDetail(id: String) {
    // .. Screen level content goes here
    val scrollState = rememberTransformingLazyColumnState()

    val padding = rememberResponsiveColumnPadding(
        first = ColumnItemType.BodyText
    )

    ScreenScaffold(
        scrollState = scrollState,
        contentPadding = padding
    ) { scaffoldPaddingValues ->
        // Screen content goes here
        // ...
Navigation.kt

अगर HorizontalPagerIndicator के साथ HorizontalPager का इस्तेमाल किया जा रहा है, तो HorizontalPagerScaffold पर माइग्रेट किया जा सकता है. HorizontalPagerScaffold को AppScaffold में रखा गया है. AppScaffold और HorizontalPagerScaffold, पेज पर मौजूद कॉन्टेंट को व्यवस्थित करने के लिए इस्तेमाल किए जाते हैं. साथ ही, ये HorizontalPageIndicator और TimeText कॉम्पोनेंट के ट्रांज़िशन को मैनेज करते हैं.

HorizontalPagerScaffold, डिफ़ॉल्ट रूप से स्क्रीन के बीच से आखिर तक HorizontalPageIndicator दिखाता है. साथ ही, TimeText और HorizontalPageIndicator को दिखाने और छिपाने के लिए कोऑर्डिनेट करता है. यह इस बात पर निर्भर करता है कि Pager को पेज पर दिखाया जा रहा है या नहीं. इसका फ़ैसला PagerState करता है.

इसमें एक नया AnimatedPage कॉम्पोनेंट भी है. यह कॉम्पोनेंट, पेज को ऐनिमेट करता है. साथ ही, यह पेज को उसकी पोज़िशन के हिसाब से स्केल करता है और उस पर स्क्रिम इफ़ेक्ट डालता है.

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })
    val columnState = rememberTransformingLazyColumnState()
    val contentPadding = rememberResponsiveColumnPadding(
        first = ColumnItemType.ListHeader,
        last = ColumnItemType.BodyText,
    )
    HorizontalPagerScaffold(pagerState = pagerState) {
        HorizontalPager(
            state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold(
                    scrollState = columnState,
                    contentPadding = contentPadding
                ) { contentPadding ->
                    TransformingLazyColumn(
                        state = columnState,
                        contentPadding = contentPadding
                    ) {
                        item {
                            ListHeader(
                                modifier = Modifier.fillMaxWidth()
                            ) {
                                Text(text = "Pager sample")
                            }
                        }
                        item {
                            if (page == 0) {
                                Text(text = "Page #$page. Swipe right")
                            }
                            else{
                                Text(text = "Page #$page. Swipe left and right")
                            }
                        }
                    }
                }

            }
        }
    }
}
Pager.kt

आखिर में, M3 में VerticalPagerScaffold को शामिल किया गया है. यह HorizontalPagerScaffold के पैटर्न को फ़ॉलो करता है:

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    ///…
                }
            }
        }
    }
}
Pager.kt

प्लेसहोल्डर

M2.5 और M3 के बीच, एपीआई में कुछ बदलाव किए गए हैं. Placeholder.PlaceholderDefaults अब दो मॉडिफ़ायर उपलब्ध कराता है:

• Modifier.placeholder, जिसे अब तक लोड नहीं किए गए कॉन्टेंट की जगह पर दिखाया जाता है
• प्लेसहोल्डर शाइन इफ़ेक्ट Modifier.placeholderShimmer. यह एक प्लेसहोल्डर शाइन इफ़ेक्ट है. यह डेटा लोड होने का इंतज़ार करते समय, ऐनिमेशन लूप में चलता है.

Placeholder कॉम्पोनेंट में हुए अन्य बदलावों के बारे में जानने के लिए, यहां दी गई टेबल देखें.

SwipeDismissableNavHost

SwipeDismissableNavHost, wear.compose.navigation का हिस्सा है. इस कॉम्पोनेंट का इस्तेमाल M3 के साथ करने पर, M3 MaterialTheme, LocalSwipeToDismissBackgroundScrimColor और LocalSwipeToDismissContentScrimColor को अपडेट करता है.

TransformingLazyColumn

TransformingLazyColumn, wear.compose.lazy.foundation का हिस्सा है. यह स्क्रोलिंग के दौरान, सूची के आइटम पर ऐनिमेशन को स्केल करने और बदलने की सुविधा जोड़ता है. इससे उपयोगकर्ता अनुभव बेहतर होता है. हमारा सुझाव है कि ऐप्लिकेशन को ScalingLazyColumn से TransformingLazyColumn पर माइग्रेट किया जाए

ScalingLazyColumn की तरह, यह rememberTransformingLazyColumnState() उपलब्ध कराता है, ताकि TransformingLazyColumnState बनाया जा सके. इसे सभी कंपोज़िशन में याद रखा जाता है.

स्केलिंग और मॉर्फ़िंग ऐनिमेशन जोड़ने के लिए, सूची के हर आइटम में यह जानकारी जोड़ें:

• Modifier.transformedHeight की मदद से, TransformationSpec का इस्तेमाल करके आइटम की बदली हुई ऊंचाई का हिसाब लगाया जा सकता है. अगर आपको और बदलाव नहीं करने हैं, तो rememberTransformationSpec() का इस्तेमाल किया जा सकता है.
• SurfaceTransformation

यह पुष्टि करने के लिए कि सूची के ऊपर और नीचे पैडिंग सही है, minimumVerticalContentPadding मॉडिफ़ायर का इस्तेमाल करें.

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

काम के लिंक

Compose में M2.5 से M3 पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, यहां दिए गए अतिरिक्त संसाधन देखें.

सैंपल

• GitHub पर Wear OS के सैंपल
• Compose for Wear OS कोडलैब
• Jetcaster का सैंपल

एपीआई का रेफ़रंस और सोर्स कोड

• Compose Material 3 API के बारे में जानकारी
• सोर्स कोड में Material 3 के सैंपल कंपोज़ करना

डिज़ाइन

• डिज़ाइन से जुड़े दिशा-निर्देश