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

নির্ভরতা

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

এম২.৫

এম৩

Color

এর নাম পরিবর্তন করে ColorScheme রাখা হয়েছে

১৩টি রঙ

২৮টি রঙ

নিষিদ্ধ

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

নিষিদ্ধ

আরও প্রকাশের জন্য নতুন তৃতীয় রঙ

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

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 শেপ মর্ফিং প্রবর্তন করে: মিথস্ক্রিয়ার প্রতিক্রিয়ায় আকারগুলি এখন রূপান্তরিত হয়।

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

বোতাম

আকৃতি রূপান্তর ফাংশন

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 এর সমতুল্যগুলির তুলনায় বেশি বৈচিত্র্য রয়েছে।

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

উপাদান 2.5

উপাদান 3

androidx.wear.compose.material.dialog.সতর্কতা

androidx.wear.compose.material3.AlertDialog সম্পর্কে

androidx.wear.compose.material.বোতাম

androidx.wear.compose.material3.IconButton অথবা androidx.wear.compose.material3.TextButton

androidx.wear.compose.material.কার্ড

androidx.wear.compose.material3.কার্ড

androidx.wear.compose.material.TitleCard সম্পর্কে

androidx.wear.compose.material3.টাইটলকার্ড

androidx.wear.compose.material.AppCard সম্পর্কে

androidx.wear.compose.material3.অ্যাপকার্ড

androidx.wear.compose.material.চেকবক্স

M3 সমতুল্য নয়, androidx.wear.compose.material3.CheckboxButton অথবা androidx.wear.compose.material3.SplitCheckboxButton- এ মাইগ্রেট করুন।

androidx.wear.compose.material.chip সম্পর্কে

androidx.wear.compose.material3. বোতাম অথবা
androidx.wear.compose.material3. আউটলাইন করা বোতাম অথবা
androidx.wear.compose.material3.FilledTonalButton অথবা
androidx.wear.compose.material3.ChildButton সম্পর্কে

androidx.wear.compose.material.CompactChip সম্পর্কে

androidx.wear.compose.material3.কম্প্যাক্ট বোতাম

androidx.wear.compose.material.InlineSlider সম্পর্কে

androidx.wear.compose.material3.স্লাইডার

androidx.wear.compose.material.LocalContentAlpha সম্পর্কে

উপাদান 3-এ Text বা Icon দ্বারা ব্যবহৃত না হওয়ায় এটি সরানো হয়েছে

androidx.wear.compose.material.পজিশন ইন্ডিকেটর

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.স্ক্যাফোল্ড

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. চেকবক্সবোতাম অথবা
androidx.wear.compose.material3.RadioButton অথবা
androidx.wear.compose.material3.সুইচবাটন

androidx.wear.compose.material.ভিগনেট

Wear OS এর জন্য Material 3 Expressive ডিজাইনে অন্তর্ভুক্ত না হওয়ায় সরানো হয়েছে।

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

উপাদান 3

উপাদান 2.5 সমতুল্য উপাদান (যদি M3 তে নতুন না হয়)

androidx.wear.compose.material3.AlertDialog সম্পর্কে

androidx.wear.compose.material.dialog.সতর্কতা

androix.wear.compose.material3.অ্যানিমেটেডপৃষ্ঠা

নতুন

androidx.wear.compose.material3.অ্যানিমেটেডটেক্সট

নতুন

androidx.wear.compose উপাদান3.AppScaffold

android.wear.compose.material.Scaffold ( androidx.wear.compose.material3.ScreenScaffold সহ)

androidx.wear.compose.material3.বোতাম

androidx.wear.compose.material.chip সম্পর্কে

androidx.wear.compose.material3.বোতামগ্রুপ

নতুন

androidx.wear.compose.material3.কার্ড

androidx.wear.compose.material.কার্ড

androidx.wear.compose.material3.চেকবক্স বোতাম

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.কম্প্যাক্ট বোতাম

androidx.wear.compose.material.CompactChip সম্পর্কে

androidx.wear.compose.material3.নিশ্চিতকরণ সংলাপ

androidx.wear.compose.material.dialog.নিশ্চিতকরণ

androidx.wear.compose.material3.curvedটেক্সট

androidx.wear.compose.material.curvedটেক্সট

androidx.wear.compose.material3.DatePicker সম্পর্কে

নতুন

androidx.wear.compose.material3.সংলাপ

androidx.wear.compose.material.dialog.ডায়ালগ

androidx.wear.compose.material3.EdgeButton

নতুন

androidx.wear.compose.material3.ফেইডিংএক্সপান্ডিংলেবেল

নতুন

androidx.wear.compose.material3.FilledTonalButton

androidx.wear.compose.material.Chip যখন টোনাল বোতামের ব্যাকগ্রাউন্ড প্রয়োজন হয়

androidx.wear.compose.material3.অনুভূমিকপৃষ্ঠানির্দেশক

androidx.wear.compose.material.HorizontalPageIndicator সম্পর্কে

androidx.wear.compose.material3.অনুভূমিকপেজারস্ক্যাফোল্ড

নতুন

androidx.wear.compose.material3.আইকন

androidx.wear.compose.material.আইকন

androidx.wear.compose.material3.আইকন বোতাম

androidx.wear.compose.material.বোতাম

androidx.wear.compose.material3.আইকনটগল বোতাম

androidx.wear.compose.material.ToggleButton সম্পর্কে

androidx.wear.compose.material3.LevelIndicator সম্পর্কে

নতুন

androidx.wear.compose.material3.লিনিয়ারপ্রোগ্রেসইন্ডিকেটর

নতুন

androidx.wear.compose.material3.ListHeader সম্পর্কে

androidx.wear.compose.material.ListHeader সম্পর্কে

androidx.wear.compose.material3.ListSubHeader সম্পর্কে

নতুন

androidx.wear.compose.material3.Materialথিম

androidx.wear.compose.material.Materialথিম

androidx.wear.compose.material3.OpenOnPhoneDialog

নতুন

androidx.wear.compose.material3.পিকার

androidx.wear.compose.material.পিকার

androidx.wear.compose.material3.PickerGroup

androidx.wear.compose.material.PickerGroup সম্পর্কে

androix.wear.compose.material3.রেডিওবাটন

androidx.wear.compose.material.ToggleChip একটি রেডিও বোতাম টগল নিয়ন্ত্রণ সহ

androidx.wear.compose.material3.স্ক্রিনস্ক্যাফোল্ড

android.wear.compose.material.Scaffold ( androidx.wear.compose material3.AppScaffold সহ)

androidx.wear.compose.material3.ScrollIndicator সম্পর্কে

androidx.wear.compose.material.পজিশন ইন্ডিকেটর

androidx.wear.compose.material3.scrollaway সম্পর্কে

androidx.wear.compose.material.scrollaway সম্পর্কে

androidx.wear.compose.material3.বিভাজিতবৃত্তাকারপ্রগতি নির্দেশক

নতুন

androidx.wear.compose.material3.স্লাইডার

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.স্টেপার

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.সুইচবাটন

androidx.wear.compose.material.ToggleChip একটি সুইচ টগল নিয়ন্ত্রণ সহ

androidx.wear.compose.material3.টেক্সট

androidx.wear.compose.material.টেক্সট

androidx.wear.compose.material3.টেক্সটবাটন

androidx.wear.compose.material.বোতাম

androidx.wear.compose.material3.TextToggleButton

androidx.wear.compose.material.ToggleButton সম্পর্কে

androidx.wear.compose.material3.TimeText সম্পর্কে

androidx.wear.compose.material.TimeText সম্পর্কে

androidx.wear.compose.material3.উল্লম্বপেজারস্ক্যাফোল্ড

নতুন

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

ওয়্যার কম্পোজ ফাউন্ডেশন 1.6.0-alpha04

androidx.wear.compose.foundation.hierarchicalফোকাসগ্রুপ

একটি অ্যাপ্লিকেশনে কম্পোজেবল টীকা তৈরি করতে, কম্পোজিশনের সক্রিয় অংশের উপর নজর রাখতে এবং ফোকাস সমন্বয় করতে ব্যবহৃত হয়।

androidx.compose.foundation.pager.HorizontalPager সম্পর্কে

একটি অনুভূমিকভাবে স্ক্রলিং পেজার, যা Wear-নির্দিষ্ট বর্ধিতকরণ সহ Compose Foundation উপাদানগুলির উপর নির্মিত, যা Wear OS নির্দেশিকাগুলির কর্মক্ষমতা উন্নত করতে এবং মেনে চলতে সহায়তা করে।

androidx.compose.foundation.pager.VerticalPager সম্পর্কে

একটি উল্লম্বভাবে স্ক্রোলিং পেজার, যা Wear-নির্দিষ্ট বর্ধিতকরণ সহ Compose Foundation উপাদানগুলির উপর নির্মিত, যা Wear OS নির্দেশিকাগুলির কর্মক্ষমতা উন্নত করতে এবং মেনে চলতে সহায়তা করে।

androidx.wear.foundation.lazy.রূপান্তরিতঅলসকলাম

প্রতিটি আইটেমে স্ক্রোল ট্রান্সফর্ম ইফেক্ট যোগ করতে ScalingLazyColumn এর পরিবর্তে ব্যবহার করা যেতে পারে।

বোতাম

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 একটি নতুন বোতাম চালু করেছে: EdgeButtonEdgeButton 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
        // ...

যদি আপনি 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")
                            }
                        }
                    }
                }

            }
        }
    }
}

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

এম২.৫

এম৩

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 হল 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,
                )
            }
        }
    }
}

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

নমুনা

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

ডিজাইন