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

নির্ভরশীলতা

M3-এর জন্য M2.5 থেকে আলাদা প্যাকেজ ও সংস্করণ রয়েছে:

এম২.৫ 

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

এম৩ 

implementation("androidx.wear.compose:compose-material3:1.7.0-alpha01")

Wear Compose Material 3 রিলিজ পেজে M3-এর সর্বশেষ সংস্করণগুলো দেখুন।

Wear Compose Foundation লাইব্রেরির 1.7.0-alpha01 সংস্করণে কিছু নতুন কম্পোনেন্ট যুক্ত করা হয়েছে, যা 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.7.0-alpha01")
implementation("androidx.wear.compose:compose-navigation:1.7.0-alpha01")

থিম

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 এর মধ্যে প্রধান পার্থক্যগুলো বর্ণনা করা হয়েছে:

এম২.৫ এম৩
Color এর নাম পরিবর্তন করে ColorScheme রাখা হয়েছে
১৩টি রঙ ২৮টি রঙ
প্রযোজ্য নয় নতুন গতিশীল রঙের থিমিং
প্রযোজ্য নয় আরও অভিব্যক্তির জন্য নতুন তৃতীয় স্তরের রঙ

গতিশীল রঙের থিমিং

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

ফ্লেক্স ফন্ট

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

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

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

টাইপোগ্রাফি টেক্সটস্টাইল
প্রদর্শন বড় করে দেখান, মাঝারি করে দেখান, ছোট করে দেখান
শিরোনাম শিরোনামবড়, শিরোনামমাঝারি, শিরোনামছোট
লেবেল লেবেলবড়, লেবেলমাঝারি, লেবেলছোট
শরীর বডি লার্জ, বডি মাঝারি, বডি স্মল, বডি এক্সট্রা স্মল
সংখ্যাসূচক numeralExtraLarge, numeralLarge, numeralMedium, numeralSmall, numeralExtraSmall
আর্ক arcLarge, arcMedium, arcSmall

আকৃতি

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-তে Migrate করা Shapes প্যারামিটার ম্যাপিংটি ব্যবহার করুন।

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

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

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

বোতাম আকৃতি পরিবর্তন ফাংশন
IconButton IconButtonDefaults.animatedShape চাপলে আইকন বাটনটিকে অ্যানিমেট করে।
IconToggleButton IconToggleButtonDefaults.animatedShape চাপলে আইকন টগল বাটনটিকে অ্যানিমেট করে।
IconToggleButtonDefaults.variantAnimatedShapes আইকন টগল বাটনটিকে চাপলে এবং চেক/আনচেক করলে অ্যানিমেট করে।
TextButton TextButtonDefaults.animatedShape চাপলে টেক্সট বাটনটিকে অ্যানিমেট করে।
TextToggleButton TextToggleButtonDefaults.animatedShapes চাপ দিলে টেক্সট টগল করে এবং TextToggleButtonDefaults.variantAnimatedShapes চাপ দেওয়া ও চেক/আনচেক করার সময় টেক্সট টগল করে।

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

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

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

উপাদান ২.৫ উপাদান ৩
androidx.wear.compose.material.dialog.Alert androidx.wear.compose.material3.AlertDialog
androidx.wear.compose.material.Button androidx.wear.compose.material3.IconButton অথবা androidx.wear.compose.material3.TextButton
androidx.wear.compose.material.Card androidx.wear.compose.material3.Card
androidx.wear.compose.material.TitleCard androidx.wear.compose.material3.TitleCard
androidx.wear.compose.material.AppCard androidx.wear.compose.material3.AppCard
androidx.wear.compose.material.Checkbox M3-এর কোনো সমতুল্য নেই, androidx.wear.compose.material3.CheckboxButton অথবা androidx.wear.compose.material3.SplitCheckboxButton ব্যবহার করুন।
androidx.wear.compose.material.Chip androidx.wear.compose.material3.Button অথবা
androidx.wear.compose.material3.OutlinedButton অথবা
androidx.wear.compose.material3.FielddTonalButton অথবা
androidx.wear.compose.material3.ChildButton
androidx.wear.compose.material.CompactChip androidx.wear.compose.material3.CompactButton
androidx.wear.compose.material.InlineSlider androidx.wear.compose.material3.Slider
androidx.wear.compose.material.LocalContentAlpha() ম্যাটেরিয়াল ৩-এ Text বা Icon হিসেবে ব্যবহৃত না হওয়ায় সরিয়ে ফেলা হয়েছে।
androidx.wear.compose.material.PositionIndicator androidx.wear.compose.material3.ScrollIndicator
androidx.wear.compose.material.RadioButton M3-এর কোনো সমতুল্য নেই, androidx.wear.compose.material3.RadioButton অথবা androidx.wear.compose.material3.SplitRadioButton- এ স্থানান্তরিত হন।
androidx.wear.compose.material.SwipeToRevealCard androidx.wear.compose.material3.SwipeToReveal
androidx.wear.compose.material.SwipeToRevealChip androidx.wear.compose.material3.SwipeToReveal
android.wear.compose.material.Scaffold androidx.wear.compose.material3.AppScaffold এবং androidx.wear.compose.material3.ScreenScaffold
androidx.wear.compose.material.SplitToggleChip M3-এর কোনো সমতুল্য বিকল্প না থাকায় androidx.wear.compose.material3.SplitCheckboxButton , androidx.wear.compose.material3.SplitSwitchButton , অথবা androidx.wear.compose.material3.SplitRadioButton ব্যবহার করুন।
androidx.wear.compose.material.Switch M3-এর কোনো সমতুল্য নেই, androidx.wear.compose.material3.SwitchButton অথবা androidx.wear.compose.material3.SplitSwitchButton- এ স্থানান্তরিত হন।
androidx.wear.compose.material.ToggleButton androidx.wear.compose.material3.IconToggleButton অথবা androidx.wear.compose.material3.TextToggleButton
androidx.wear.compose.material.ToggleChip androidx.wear.compose.material3.CheckboxButton অথবা
androidx.wear.compose.material3.RadioButton অথবা
androidx.wear.compose.material3.SwitchButton
androidx.wear.compose.material.Vignette Wear OS-এর জন্য Material 3 Expressive design-এ অন্তর্ভুক্ত না থাকায় সরিয়ে ফেলা হয়েছে।

এখানে মেটেরিয়াল ৩-এর সমস্ত উপাদানের একটি পূর্ণাঙ্গ তালিকা দেওয়া হলো:

উপাদান ৩ উপাদান ২.৫ সমতুল্য উপাদান (যদি M3-তে নতুন না হয়)
androidx.wear.compose.material3.AlertDialog androidx.wear.compose.material.dialog.Alert
androidx.wear.compose.material3.AnimatedPage নতুন
androidx.wear.compose.material3.AnimatedText নতুন
androidx.wear.compose.material3.AppScaffold android.wear.compose.material.Scaffold ( androidx.wear.compose.material3.ScreenScaffold এর সাথে)
androidx.wear.compose.material3.Button androidx.wear.compose.material.Chip
androidx.wear.compose.material3.ButtonGroup নতুন
androidx.wear.compose.material3.Card androidx.wear.compose.material.Card
androidx.wear.compose.material3.CheckboxButton androidx.wear.compose.material.ToggleChip একটি চেকবক্স টগল কন্ট্রোল সহ
androidx.wear.compose.material3.ChildButton androidx.wear.compose.material.Chip (শুধুমাত্র যখন কোনো ব্যাকগ্রাউন্ডের প্রয়োজন হয় না)
androidx.wear.compose.material3.CircularProgressIndicator androidx.wear.compose.material.CircularProgressIndicator
androidx.wear.compose.material3.CompactButton androidx.wear.compose.material.CompactChip
androidx.wear.compose.material3.ConfirmationDialog androidx.wear.compose.material.dialog.Confirmation
androidx.wear.compose.material3.curvedText androidx.wear.compose.material.curvedText
androidx.wear.compose.material3.DatePicker নতুন
androidx.wear.compose.material3.Dialog androidx.wear.compose.material.dialog.Dialog
androidx.wear.compose.material3.EdgeButton নতুন
androidx.wear.compose.material3.FadingExpandingLabel নতুন
androidx.wear.compose.material3.FieldTonalButton যখন একটি টোনাল বোতাম ব্যাকগ্রাউন্ড প্রয়োজন হয় তখন androidx.wear.compose.material.Chip ব্যবহার করুন।
androidx.wear.compose.material3.HorizontalPageIndicator androidx.wear.compose.material.HorizontalPageIndicator
androidx.wear.compose.material3.HorizontalPagerScaffold নতুন
androidx.wear.compose.material3.Icon androidx.wear.compose.material.Icon
androidx.wear.compose.material3.IconButton androidx.wear.compose.material.Button
androidx.wear.compose.material3.IconToggleButton androidx.wear.compose.material.ToggleButton
androidx.wear.compose.material3.LevelIndicator নতুন
androidx.wear.compose.material3.LinearProgressIndicator নতুন
androidx.wear.compose.material3.ListHeader androidx.wear.compose.material.ListHeader
androidx.wear.compose.material3.ListSubHeader নতুন
androidx.wear.compose.material3.MaterialTheme androidx.wear.compose.material.MaterialTheme
androidx.wear.compose.material3.OpenOnPhoneDialog নতুন
androidx.wear.compose.material3.Picker androidx.wear.compose.material.Picker
androidx.wear.compose.material3.PickerGroup androidx.wear.compose.material.PickerGroup
androidx.wear.compose.material3.RadioButton androidx.wear.compose.material.ToggleChip একটি রেডিও বাটন টগল কন্ট্রোল সহ
androidx.wear.compose.material3.ScreenScaffold android.wear.compose.material.Scaffold ( androidx.wear.compose.material3.AppScaffold এর সাথে)
androidx.wear.compose.material3.ScrollIndicator androidx.wear.compose.material.PositionIndicator
androidx.wear.compose.material3.scrollAway androidx.wear.compose.material.scrollAway
androidx.wear.compose.material3.SegmentedCircularProgressIndicator নতুন
androidx.wear.compose.material3.Slider androidx.wear.compose.material.InlineSlider
androidx.wear.compose.material3.SplitRadioButton androidx.wear.compose.material.SplitToggleChip
androidx.wear.compose.material3.SplitCheckboxButton androidx.wear.compose.material.SplitToggleChip
androidx.wear.compose.material3.SplitSwitchButton androidx.wear.compose.material.SplitToggleChip
androidx.wear.compose.material3.Stepper androidx.wear.compose.material.Stepper
androidx.wear.compose.material3.SwipeToDismissBox androidx.wear.compose.material.SwipeToDismissBox
androidx.wear.compose.material3.SwipeToReveal androidx.wear.compose.material.SwipeToRevealCard এবং androidx.wear.compose.material.SwipeToRevealChip
androidx.wear.compose.material3.SwitchButton androidx.wear.compose.material.ToggleChip একটি সুইচ টগল কন্ট্রোল সহ
androidx.wear.compose.material3.Text androidx.wear.compose.material.Text
androidx.wear.compose.material3.TextButton androidx.wear.compose.material.Button
androidx.wear.compose.material3.TextToggleButton androidx.wear.compose.material.ToggleButton
androidx.wear.compose.material3.TimeText androidx.wear.compose.material.TimeText
androidx.wear.compose.material3.VerticalPagerScaffold নতুন

এবং পরিশেষে Wear Compose Foundation লাইব্রেরি থেকে কিছু প্রাসঙ্গিক উপাদানের তালিকা:

Wear Compose Foundation 1.7.0-alpha01
androidx.wear.compose.foundation.hierarchicalFocusGroup কোনো অ্যাপ্লিকেশনে রচনাযোগ্য বিষয়বস্তুতে টীকা যোগ করতে, কম্পোজিশনের সক্রিয় অংশের খোঁজ রাখতে এবং ফোকাস সমন্বয় করতে এটি ব্যবহৃত হয়।
androidx.wear.compose.foundation.pager.HorizontalPager একটি হরাইজন্টালি স্ক্রলিং পেজার, যা কম্পোজ ফাউন্ডেশন কম্পোনেন্টের উপর ভিত্তি করে নির্মিত এবং এর পারফরম্যান্স উন্নত করতে ও Wear OS নির্দেশিকা মেনে চলার জন্য এতে Wear-নির্দিষ্ট কিছু বর্ধন যোগ করা হয়েছে।
androidx.wear.compose.foundation.pager.VerticalPager একটি উল্লম্বভাবে স্ক্রোলিং পেজার, যা কম্পোজ ফাউন্ডেশন কম্পোনেন্টের উপর ভিত্তি করে নির্মিত এবং এর কর্মক্ষমতা উন্নত করতে ও Wear OS নির্দেশিকা মেনে চলার জন্য এতে Wear-নির্দিষ্ট বর্ধিতকরণ করা হয়েছে।
androidx.wear.compose.foundation.lazy.TransformingLazyColumn প্রতিটি আইটেমে স্ক্রল ট্রান্সফর্ম এফেক্ট যোগ করতে ScalingLazyColumn এর পরিবর্তে এটি ব্যবহার করা যেতে পারে।

বোতাম

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 যোগ করার পরিবর্তে, 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 কম্পোনেন্টের অতিরিক্ত পরিবর্তনগুলোর জন্য নিচের সারণিটি দেখুন।

এম২.৫ এম৩
PlaceholderState.startPlaceholderAnimation অপসারণ করা হয়েছে
PlaceholderState.placeholderProgression অপসারণ করা হয়েছে
PlaceholderState.isShowContent এর নাম পরিবর্তন করে !PlaceholderState.isVisible রাখা হয়েছে।
PlaceholderState.isWipeOff অপসারণ করা হয়েছে
PlaceholderDefaults.painterWithPlaceholderOverlayBackgroundBrush অপসারণ করা হয়েছে
PlaceholderDefaults.placeholderBackgroundBrush অপসারণ করা হয়েছে
PlaceholderDefaults.placeholderChipColors অপসারণ করা হয়েছে

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

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

TransformingLazyColumn

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

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

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

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

নমুনা

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

ডিজাইন