Compose for Wear OS-এ Material 2.5 থেকে Material 3-তে মাইগ্রেট করা

Material 3 Expressive হল Material Design-এর পরবর্তী বিবর্তন। এর মধ্যে আপডেট করা থিমিং, কম্পোনেন্ট ও ডাইনামিক কালারের মতো পছন্দমতো বেছে নেওয়ার ফিচার অন্তর্ভুক্ত।

এই গাইড অ্যাপের জন্য 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.7.0")

Wear Compose রিলিজ পৃষ্ঠা থেকে লেটেস্ট M3 ভার্সন দেখুন।

Wear Compose Foundation লাইব্রেরির 1.7.0 ভার্সনে কিছু নতুন কম্পোনেন্ট যোগ করা হয়েছে যেগুলি Material 3 কম্পোনেন্টের সাথে কাজ করার জন্য ডিজাইন করা হয়েছে। একইভাবে, Wear OS 6 (API লেভেল 36) বা তার পরের যেকোনও ভার্সনে রান করলে, Wear Compose Navigation লাইব্রেরির SwipeDismissableNavHost-এ আপডেট করা অ্যানিমেশন থাকে। Wear Compose Material 3 ভার্সনে আপডেট করার সময়, আমরা Wear Compose Foundation এবং নেভিগেশন লাইব্রেরিও আপডেট করার সাজেশন দিই:

implementation("androidx.wear.compose:compose-foundation:1.7.0")
implementation("androidx.wear.compose:compose-navigation:1.7.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-তে নতুন ফিচার হল ডায়নামিক কালার থিমিং। ব্যবহারকারীরা ওয়াচফেসের রঙ পরিবর্তন করলে, UI-এর রঙও ম্যাচ করার জন্য পরিবর্তিত হয়।

ডায়নামিক কালার স্কিম প্রয়োগ করতে 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

ফ্লেক্স ফন্ট

Flex Fonts, ডিজাইনারদের নির্দিষ্ট সাইজের জন্য টাইপ উইডথ ও ওয়েট নির্দিষ্ট করতে দেয়।

টেক্সট স্টাইল

M3-তে নিম্নলিখিত TextStyle উপলভ্য। এগুলি বিভিন্ন M3 কম্পোনেন্ট ডিফল্ট হিসেবে ব্যবহার করে।

আকার

M3-তে শেপ সিস্টেম M2.5-এর থেকে আলাদা। শেপ প্যারামিটারের সংখ্যা বেড়েছে, সেগুলির নাম আলাদা আলাদা এবং সেগুলি M3 কম্পোনেন্টের সাথে আলাদাভাবে ম্যাপ করে। নিম্নলিখিত সাইজের শেপ উপলভ্য:

• অত্যন্ত ছোট
• ছোট
• মাঝারি
• বড়
• অত্যন্ত বড়

Compose-এ, এটি M2.5 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 কম্পোনেন্ট এবং সেগুলির Material 2.5 সমতুল্য কম্পোনেন্টের তালিকা দেওয়া হল:

এবং সবশেষে 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-কে চূড়ান্ত তালিকা আইটেম হিসেবে যোগ করার পরিবর্তে, এটি মরফ হয়। ScreenScaffold ও TransformingLazyColumn-এর সাথে EdgeButton কীভাবে ব্যবহার করতে হয় তা চেক করতে নিচের কোডটি দেখুন।

val state = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = state,
    edgeButton = {
        EdgeButton(
            onClick = { },
            modifier = Modifier.scrollable(
                state,
                orientation = Orientation.Vertical,
                reverseDirection = true,
                // Apply overscroll to the EdgeButton for proper scrolling behavior.
                overscrollEffect = rememberOverscrollEffect(),
            ),
        ) {
            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 transformationSpec = rememberTransformationSpec()

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

আপনি HorizontalPageIndicator-এর সাথে HorizontalPager ব্যবহার করলে, আপনি HorizontalPagerScaffold-এ মাইগ্রেট করতে পারবেন। HorizontalPagerScaffold-কে AppScaffold-এর মধ্যে রাখা হয়েছে। AppScaffold এবং HorizontalPagerScaffold পেজারের স্ট্রাকচার লে আউট করে এবং HorizontalPageIndicator ও TimeText কম্পোনেন্টের ট্রানজিশন কো অর্ডিনেট করে।

HorizontalPagerScaffold ডিফল্ট হিসেবে স্ক্রিনের মাঝখানে-শেষের দিকে HorizontalPageIndicator দেখায় এবং Pager পেজ করা হচ্ছে কিনা সেই অনুযায়ী TimeText ও HorizontalPageIndicator দেখানোর ও লুকানোর কোঅর্ডিনেট করে, এটি PagerState দ্বারা নির্ধারিত হয়।

এছাড়াও, একটি নতুন AnimatedPage কম্পোনেন্ট আছে, যা Pager-এর মধ্যে একটি পৃষ্ঠা অ্যানিমেট করে। এটি পজিশনের উপর ভিত্তি করে স্কেলিং এবং স্ক্রিম এফেক্ট ব্যবহার করে।

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

    HorizontalPagerScaffold(pagerState = pagerState) {
        HorizontalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(
                    state = pagerState
                ),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                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 = "Pager sample")
                            }
                        }
                        item {
                            Card(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .transformedHeight(this, transformationSpec)
                                    .minimumVerticalContentPadding(
                                        CardDefaults.minimumVerticalListContentPadding
                                    ),
                                transformation = SurfaceTransformation(transformationSpec),
                            ) {
                                if (page == 0) {
                                    Text(text = "Page #$page. Swipe right")
                                } else {
                                    Text(text = "Page #$page. Swipe left and right")
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
Pager.kt

সবশেষে, M3 একটি VerticalPagerScaffold নিয়ে আসে যা HorizontalPagerScaffold-এর মতো একই প্যাটার্ন অনুসরণ করে:

@Composable
fun VerticalPagerScaffoldSample() {
    AppScaffold {
        val pagerState = rememberPagerState(pageCount = { 10 })

        VerticalPagerScaffold(pagerState = pagerState) {
            VerticalPager(
                state = pagerState,
                flingBehavior =
                    PagerScaffoldDefaults.snapWithSpringFlingBehavior(
                        state = pagerState
                    ),
            ) { page ->
                AnimatedPage(pageIndex = page, pagerState = pagerState) {
                    ScreenScaffold {
                        Column(
                            modifier = Modifier.fillMaxSize(),
                            horizontalAlignment = Alignment.CenterHorizontally,
                            verticalArrangement = Arrangement.Center,
                        ) {
                            Text(text = "Page #$page")
                            Spacer(modifier = Modifier.height(8.dp))
                            Text(text = "Swipe up and down")
                        }
                    }
                }
            }
        }
    }
}
Pager.kt

প্লেসহোল্ডার

M2.5 ও M3-এর মধ্যে কিছু API পরিবর্তন আছে। M3-তে দুটি প্লেসহোল্ডার মডিফায়ার আছে:

• Modifier.placeholder, যা এখনও লোড করা হয়নি এমন কন্টেন্টের পরিবর্তে আঁকা হয়
• একটি প্লেসহোল্ডার ঝিকিমিকি এফেক্ট Modifier.placeholderShimmer যা একটি প্লেসহোল্ডার ঝিকিমিকি এফেক্ট প্রদান করে যা ডেটা লোড হওয়ার জন্য অপেক্ষা করার সময় একটি অ্যানিমেশন লুপে চলে।

Placeholder কম্পোনেন্টে করা অতিরিক্ত পরিবর্তন সম্পর্কে জানতে নিম্নলিখিত টেবিল দেখুন।

SwipeDismissableNavHost

SwipeDismissableNavHost হল wear.compose.navigation-এর অংশ। M3-এর সাথে এই কম্পোনেন্ট ব্যবহার করা হলে, M3 MaterialTheme LocalSwipeToDismissBackgroundScrimColor ও LocalSwipeToDismissContentScrimColor আপডেট করে।

TransformingLazyColumn

TransformingLazyColumn হল androidx.wear.compose.foundation.lazy-এর অংশ এবং স্ক্রল করার সময় তালিকা আইটেমে স্কেলিং ও মর্ফিং অ্যানিমেশনের জন্য সহায়তা যোগ করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। অ্যাপগুলিকে 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 স্যাম্পেল
• Wear OS-এর জন্য Compose কোডল্যাব
• Jetcaster স্যাম্পেল

API রেফারেন্স ও সোর্স কোড

• Compose Material 3 API রেফারেন্স
• সোর্স কোডে Material 3 স্যাম্পেল কম্পোজ করা

ডিজাইন

• ডিজাইন সংক্রান্ত নির্দেশিকা