Wear OS-এর জন্য কম্পোজ-এ Material 2.5 থেকে Material 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 উভয়ই ব্যবহার করা উচিত নয়।
• পর্যায়ক্রমিক পদ্ধতি অবলম্বন করুন

নির্ভরশীলতা

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 (API লেভেল 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-এর একটি নতুন ফিচার হলো ডাইনামিক কালার থিমিং । ব্যবহারকারীরা ওয়াচ ফেসের রঙ পরিবর্তন করলে, 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 থেকে ভিন্ন এবং এতে নিম্নলিখিত বৈশিষ্ট্যগুলো অন্তর্ভুক্ত রয়েছে:

• নয়টি নতুন টেক্সট স্টাইল
• ফ্লেক্স ফন্ট, যা বিভিন্ন ওজন, প্রস্থ এবং গোলাকারত্বের জন্য টাইপ স্কেল কাস্টমাইজ করার সুযোগ দেয়।

• 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-তে নিম্নলিখিত টেক্সটস্টাইলগুলো উপলব্ধ আছে। M3-এর বিভিন্ন কম্পোনেন্টে এগুলো ডিফল্টভাবে ব্যবহৃত হয়।

আকৃতি

M3-এর শেপ সিস্টেমটি M2 থেকে ভিন্ন। শেপ প্যারামিটারের সংখ্যা বেড়েছে, সেগুলোর নাম ভিন্ন এবং সেগুলো 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-তে Migrate করা Shapes প্যারামিটার ম্যাপিংটি ব্যবহার করুন।

আকৃতি পরিবর্তন

M3-তে যুক্ত হয়েছে শেপ মর্ফিং: এখন ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় আকার পরিবর্তিত হয়।

বেশ কিছু গোলাকার বাটনে একটি ভিন্নতা হিসেবে শেপ মর্ফিং বৈশিষ্ট্যটি পাওয়া যায়; যে বাটনগুলো শেপ মর্ফিং সমর্থন করে, তার তালিকাটি নিচে দেখুন:

উপাদান এবং বিন্যাস

M2.5-এর বেশিরভাগ কম্পোনেন্ট এবং লেআউট M3-তে পাওয়া যায়। তবে, M3-এর কিছু কম্পোনেন্ট এবং লেআউট M2.5-এ ছিল না। এছাড়াও, M3-এর কিছু কম্পোনেন্টের M2.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 মধ্যে পাস করুন, যাতে স্ক্রোল করার সাথে সাথে এটির আকৃতি পরিবর্তিত হয়। ScreenScaffold এবং TransformingLazyColumn সাথে EdgeButton কীভাবে ব্যবহার করতে হয় তা জানতে নিচের কোডটি দেখুন।

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 কম্পোজেবলটি এসেছে। AppScaffold এবং ScreenScaffold একটি স্ক্রিনের কাঠামো বিন্যাস করে এবং ScrollIndicator ও TimeText কম্পোনেন্টগুলোর ট্রানজিশন সমন্বয় করে।

AppScaffold সোয়াইপ-টু-ডিসমিস-এর মতো ইন-অ্যাপ ট্রানজিশনের সময় TimeText মতো স্ট্যাটিক স্ক্রিন এলিমেন্টগুলোকে দৃশ্যমান রাখতে সাহায্য করে। এটি অ্যাপ্লিকেশনের মূল কন্টেন্টের জন্য একটি স্লট প্রদান করে, যা সাধারণত SwipeDismissableNavHost এর মতো কোনো নেভিগেশন কম্পোনেন্ট দ্বারা সরবরাহ করা হয়।

আপনি Activity-র জন্য একটি AppScaffold ডিক্লেয়ার করেন এবং প্রতিটি Screen-এর জন্য একটি 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 একটি Pager-এর কাঠামো বিন্যস্ত করে এবং HorizontalPageIndicator ও TimeText কম্পোনেন্টগুলোর ট্রানজিশন সমন্বয় করে।

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

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

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-এর মধ্যে API-তে কিছু পরিবর্তন আনা হয়েছে। Placeholder.PlaceholderDefaults এখন দুটি মডিফায়ার প্রদান করে:

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

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

সোয়াইপডিসমিসেবলন্যাভহোস্ট

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

TransformingLazyColumn

TransformingLazyColumn হলো wear.compose.lazy.foundation এর একটি অংশ এবং এটি স্ক্রোল করার সময় তালিকার আইটেমগুলিতে স্কেলিং ও মর্ফিং অ্যানিমেশনের সুবিধা যোগ করে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

ScalingLazyColumn এর মতোই, এটি একটি TransformingLazyColumnState তৈরি করার জন্য rememberTransformingLazyColumnState() প্রদান করে, যা বিভিন্ন কম্পোজিশন জুড়ে মনে রাখা হয়।

স্কেলিং এবং মর্ফিং অ্যানিমেশন যোগ করার জন্য, প্রতিটি লিস্ট আইটেমে নিম্নলিখিতগুলি যোগ করুন:

• Modifier.transformedHeight , যা আপনাকে TransformationSpec ব্যবহার করে আইটেমগুলির রূপান্তরিত উচ্চতা গণনা করতে দেয়, তার পরিবর্তে আপনি rememberTransformationSpec() ব্যবহার করতে পারেন, যদি না আপনার আরও কাস্টমাইজেশনের প্রয়োজন হয়।
• একটি SurfaceTransformation

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-তে স্থানান্তরের বিষয়ে আরও জানতে, নিম্নলিখিত অতিরিক্ত রিসোর্সগুলো দেখুন।

নমুনা

• গিটহাবে Wear OS নমুনা
• Wear OS কোডল্যাবের জন্য কম্পোজ
• জেটকাস্টার নমুনা

এপিআই রেফারেন্স এবং সোর্স কোড

• কম্পোজ মেটেরিয়াল ৩ এপিআই রেফারেন্স
• সোর্স কোডে কম্পোজ মেটেরিয়াল ৩-এর নমুনা

ডিজাইন

• নকশা নির্দেশিকা