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 তে স্থানান্তর করার জন্য, কম্পোজ ম্যাটেরিয়াল মাইগ্রেশন ফোন নির্দেশিকাতে বর্ণিত একই পদ্ধতি অনুসরণ করুন, বিশেষ করে:

• আপনার দীর্ঘমেয়াদী একটি অ্যাপে M2.5 এবং M3 উভয়ই ব্যবহার করা উচিত নয়।
• ধাপে ধাপে পদ্ধতি গ্রহণ করুন

নির্ভরতা

M3 এর M2.5 এর জন্য একটি পৃথক প্যাকেজ এবং সংস্করণ রয়েছে:

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

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

Wear Compose Material 3 রিলিজ পৃষ্ঠায় সর্বশেষ M3 সংস্করণগুলি দেখুন।

Wear Compose Foundation লাইব্রেরি সংস্করণ 1.6.0-alpha04 কিছু নতুন উপাদান চালু করেছে যা 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-alpha04")
implementation("androidx.wear.compose:compose-navigation:1.6.0-alpha04")

থিম

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 = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

রঙ

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
)

নিম্নলিখিত টেবিলটি M2.5 এবং M3 এর মধ্যে মূল পার্থক্যগুলি বর্ণনা করে:

ডায়নামিক কালার থিমিং

M3-এর একটি নতুন বৈশিষ্ট্য হল ডাইনামিক কালার থিমিং । ব্যবহারকারীরা যদি ঘড়ির মুখের রঙ পরিবর্তন করেন, তাহলে UI-এর রঙগুলি ম্যাচ করার জন্য পরিবর্তিত হয়।

ডায়নামিক কালার স্কিম বাস্তবায়নের জন্য dynamicColorScheme ফাংশন ব্যবহার করুন এবং যদি ডায়নামিক কালার স্কিম উপলব্ধ না থাকে তবে ফলব্যাক হিসেবে একটি defaultColorScheme প্রদান করুন।

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

টাইপোগ্রাফি

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
)

ফ্লেক্স ফন্ট

ফ্লেক্স ফন্ট ডিজাইনারদের নির্দিষ্ট আকারের জন্য প্রকার প্রস্থ এবং ওজন নির্দিষ্ট করার সুযোগ দেয়।

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

নিম্নলিখিত টেক্সট স্টাইলগুলি M3 তে উপলব্ধ। এগুলি M3 বিভিন্ন উপাদান দ্বারা ডিফল্টরূপে ব্যবহৃত হয়।

আকৃতি

M3 এর আকৃতি ব্যবস্থা M2 এর থেকে আলাদা। আকৃতির প্যারামিটারের সংখ্যা বৃদ্ধি পেয়েছে, তাদের নামকরণ ভিন্ন হয়েছে এবং তারা M3 উপাদানগুলিতে ভিন্নভাবে ম্যাপ করে। নিম্নলিখিত আকৃতির আকারগুলি উপলব্ধ:

• অতি-ছোট
• ছোট
• মাঝারি
• বড়
• অতিরিক্ত-বড়

কম্পোজে, এটি 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
)

শুরুর বিন্দু হিসেবে Compose-এ Material 2 থেকে Material 3-এ Migrate থেকে Shapes প্যারামিটার ম্যাপিং ব্যবহার করুন।

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

M3 শেপ মর্ফিং প্রবর্তন করে: মিথস্ক্রিয়ার প্রতিক্রিয়ায় আকারগুলি এখন রূপান্তরিত হয়।

শেপ মর্ফিং আচরণটি বেশ কয়েকটি গোলাকার বোতামে বিভিন্ন রূপে উপলব্ধ, শেপ মর্ফিং সমর্থন করে এমন বোতামগুলির নিম্নলিখিত তালিকাটি দেখুন:

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

M2.5 এর বেশিরভাগ উপাদান এবং লেআউট M3 তে পাওয়া যায়। তবে, কিছু M3 উপাদান এবং লেআউট M2.5 তে বিদ্যমান ছিল না। তদুপরি, কিছু M3 উপাদানের M2.5 এর সমতুল্যগুলির তুলনায় বেশি বৈচিত্র্য রয়েছে।

যদিও কিছু উপাদানের জন্য বিশেষ বিবেচনার প্রয়োজন হয়, নিম্নলিখিত ফাংশন ম্যাপিংগুলি শুরু করার জন্য সুপারিশ করা হয়:

এখানে সমস্ত উপাদান 3 উপাদানের একটি সম্পূর্ণ তালিকা রয়েছে:

এবং পরিশেষে Wear Compose Foundation লাইব্রেরি থেকে কিছু প্রাসঙ্গিক উপাদানের তালিকা, যা প্রথম সংস্করণ 1.6.0-alpha04-এ প্রবর্তিত হয়েছিল:

বোতাম

M3-এর বোতামগুলি M2.5 থেকে আলাদা। M2.5 চিপটি Button দ্বারা প্রতিস্থাপিত হয়েছে। Button বাস্তবায়ন Text maxLines এবং textAlign জন্য ডিফল্ট মান প্রদান করে। এই ডিফল্ট মানগুলি Text উপাদানে ওভাররাইড করা যেতে পারে।

import androidx.wear.compose.material.Chip

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

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

M3 তে নতুন বোতামের ধরণও অন্তর্ভুক্ত রয়েছে। কম্পোজ মেটেরিয়াল 3 API রেফারেন্স ওভারভিউতে সেগুলি দেখুন।

M3 একটি নতুন বোতাম চালু করেছে: EdgeButton । EdgeButton 4টি ভিন্ন আকারে পাওয়া যায়: অতিরিক্ত ছোট, ছোট, মাঝারি এবং বড়। EdgeButton বাস্তবায়ন maxLines এর জন্য একটি ডিফল্ট মান প্রদান করে যা আকারের উপর নির্ভর করে যা কাস্টমাইজ করা যেতে পারে।

যদি আপনি TransformingLazyColumn এবং ScalingLazyColumn ব্যবহার করেন, তাহলে EdgeButton টি ScreenScaffold এ দিন যাতে এটি আকার পরিবর্তন করে, স্ক্রোল করার সময় এর আকৃতি পরিবর্তন করে। ScreenScaffold এবং TransformingLazyColumn সাথে EdgeButton কীভাবে ব্যবহার করবেন তা পরীক্ষা করতে নিম্নলিখিত কোডটি দেখুন।

import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold

ScreenScaffold(
   scrollState = state,
   contentPadding = contentPadding,
   edgeButton = {
      EdgeButton(...)
   }
){ contentPadding ->
   TransformingLazyColumn(state = state, contentPadding = contentPadding,){
   // additional code here
   }
}

ভারা

M3-তে স্ক্যাফোল্ড M2.5 থেকে আলাদা। M3-তে, AppScaffold এবং নতুন ScreenScaffold কম্পোজেবল Scaffold-কে প্রতিস্থাপন করেছে। AppScaffold এবং ScreenScaffold একটি স্ক্রিনের কাঠামো তৈরি করে এবং ScrollIndicator এবং TimeText উপাদানগুলির রূপান্তর সমন্বয় করে।

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

আপনি অ্যাক্টিভিটির জন্য একটি AppScaffold ঘোষণা করুন এবং প্রতিটি স্ক্রিনের জন্য একটি ScreenScaffold ব্যবহার করুন।

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

যদি আপনি HorizontalPager ব্যবহার করেন, তাহলে আপনি HorizontalPagerScaffold এ মাইগ্রেট করতে পারেন। HorizontalPagerScaffold একটি AppScaffold HorizontalPagerScaffold মধ্যে স্থাপন করা হয়। AppScaffold এবং HorizontalPagerScaffold একটি পেজারের কাঠামো তৈরি করে এবং HorizontalPageIndicator এবং TimeText উপাদানগুলির ট্রানজিশন সমন্বয় করে।

HorizontalPagerScaffold ডিফল্টরূপে স্ক্রিনের কেন্দ্র-প্রান্তে HorizontalPageIndicator প্রদর্শন করে এবং Pager পেজ করা হচ্ছে কিনা তার উপর নির্ভর করে TimeText এবং HorizontalPageIndicator দেখানো এবং লুকানোর স্থানাঙ্ক করে, এটি 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 এর মতো একই প্যাটার্ন অনুসরণ করে:

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

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

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

স্থানধারক

M2.5 এবং M3 এর মধ্যে কিছু API পরিবর্তন রয়েছে। Placeholder.PlaceholderDefaults এখন দুটি মডিফায়ার প্রদান করে:

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

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

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

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

রূপান্তরকারী অলস কলাম

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

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

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

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

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

উপকারী সংজুক

কম্পোজে M2.5 থেকে M3 তে স্থানান্তর সম্পর্কে আরও জানতে, নিম্নলিখিত অতিরিক্ত সংস্থানগুলি দেখুন।

নমুনা

• GitHub-এ Wear OS নমুনা
• Wear OS কোডল্যাবের জন্য রচনা করুন
• জেটকাস্টার নমুনা

API রেফারেন্স এবং সোর্স কোড

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

ডিজাইন

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