Material 3 Expressive تکامل بعدی متریال دیزاین است. این شامل تم به روز شده، اجزا و ویژگی های شخصی سازی مانند رنگ پویا است.

این راهنما بر انتقال از کتابخانه 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.5.0-beta01")

آخرین نسخه های M3 را در صفحه انتشار Wear Compose Material 3 ببینید.

کتابخانه Wear Compose Foundation نسخه 1.5.0-beta01 برخی مؤلفه‌های جدید را معرفی می‌کند که برای کار با مؤلفه‌های Material 3 طراحی شده‌اند. به طور مشابه، SwipeDismissableNavHost از کتابخانه Wear Compose Navigation دارای یک انیمیشن به روز شده هنگام اجرا در Wear OS 6 (سطح API 36) یا بالاتر است. هنگام به‌روزرسانی به نسخه Wear Compose Material 3، پیشنهاد می‌کنیم کتابخانه‌های Wear Compose Foundation و Navigation را نیز به‌روزرسانی کنید:

implementation("androidx.wear.compose:compose-foundation:1.5.0-beta01")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta01")

موضوع بندی

در هر دو 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 تم رنگی پویا است. اگر کاربران رنگ‌های صفحه ساعت را تغییر دهند، رنگ‌ها در رابط کاربری مطابقت دارند.

از تابع 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
)

فونت های فلکس

فونت‌های فلکس به طراحان اجازه می‌دهند تا نوع عرض و وزن را برای اندازه‌های خاص مشخص کنند.

سبک های متن

TextStyles زیر در 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
)

از نگاشت پارامتر Shapes از Migrate from Material 2 به Material 3 در Compose به عنوان نقطه شروع استفاده کنید.

شکل گیری شکل

M3 شکل‌سازی شکل را معرفی می‌کند: شکل‌ها اکنون در پاسخ به تعاملات شکل می‌گیرند.

رفتار شکل‌گیری شکل به‌عنوان یک تغییر در تعدادی از دکمه‌های گرد موجود است، زیر را ببینید:

اجزا و چیدمان

اکثر اجزا و طرح‌بندی‌های M2.5 در M3 موجود هستند. با این حال، برخی از مؤلفه‌ها و طرح‌بندی‌های M3 در M2.5 وجود نداشتند. علاوه بر این، برخی از اجزای M3 تغییرات بیشتری نسبت به معادل های خود در M2.5 دارند.

در حالی که برخی از مؤلفه ها نیاز به ملاحظات خاصی دارند، نگاشت تابع زیر به عنوان نقطه شروع توصیه می شود:

در اینجا لیست کاملی از تمام اجزای Material 3 آمده است:

و در نهایت لیستی از برخی اجزای مرتبط از کتابخانه Wear Compose Foundation نسخه 1.5.0-beta01:

دکمه ها

دکمه ها در M3 با M2.5 متفاوت هستند. تراشه M2.5 با دکمه جایگزین شده است. پیاده سازی 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 همچنین شامل تغییرات دکمه های جدید است. آنها را در نمای کلی مرجع Compose Material 3 API بررسی کنید.

M3 یک دکمه جدید معرفی می کند: EdgeButton . EdgeButton در 4 اندازه مختلف موجود است: بسیار کوچک، کوچک، متوسط ​​و بزرگ. پیاده سازی EdgeButton بسته به اندازه ای که می تواند سفارشی شود، یک مقدار پیش فرض برای maxLines ارائه می دهد.

اگر TransformingLazyColumn و ScalingLazyColumn استفاده می‌کنید، EdgeButton را به ScreenScaffold منتقل کنید تا تغییر شکل دهد و شکل آن را با اسکرول تغییر دهید. برای بررسی نحوه استفاده از EdgeButton با ScreenScaffold و TransformingLazyColumn به کد زیر مراجعه کنید.

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 جدید composable جایگزین Scaffold شده‌اند. AppScaffold و ScreenScaffold ساختار یک صفحه را ترسیم می کنند و انتقال اجزای ScrollIndicator و TimeText هماهنگ می کنند.

AppScaffold به عناصر صفحه نمایش ثابت مانند TimeText اجازه می دهد تا در حین انتقال درون برنامه مانند Swipe-to-Dimiss قابل مشاهده باشند. این یک اسلات برای محتوای اصلی برنامه فراهم می کند که معمولاً توسط یک مؤلفه ناوبری مانند SwipeDismissableNavHost تأمین می شود.

شما یک AppScaffold برای Activity اعلام می کنید و برای هر صفحه از ScreenScaffold استفاده می کنید.

import androidx.wear.compose.material.Scaffold

Scaffold {...}

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold

AppScaffold {
   // Define the navigation hierarchy within the AppScaffold,
   // such as using SwipeDismissableNavHost.
   SwipeDismissableNavHost(...) {
      composable("home") {
         HomeScreen()
      }
      //other screens
   }
}
fun HomeScreen() {
    val scrollState = rememberScrollState()
    ScreenScaffold(scrollState = scrollState) {
    //rest of the screen code
    }
}

اگر از HorizontalPager با HorizontalPagerIndicator استفاده می کنید، می توانید به HorizontalPagerScaffold مهاجرت کنید. HorizontalPagerScaffold درون یک AppScaffold قرار می گیرد. AppScaffold و HorizontalPagerScaffold ساختار یک پیجر را ترسیم می کنند و انتقال اجزای HorizontalPageIndicator andv TimeText را هماهنگ می کنند.

HorizontalPagerScaffold به طور پیش‌فرض HorizontalPageIndicator را در انتهای مرکز صفحه نمایش می‌دهد و مختصات نمایش/مخفی کردن TimeText و HorizontalPageIndicator با توجه به اینکه Pager در حال صفحه‌بندی است، نشان می‌دهد، این توسط PagerState تعیین می‌شود.

همچنین یک جزء جدید AnimatedPage وجود دارد که یک صفحه را در یک پیجر با یک افکت مقیاس‌بندی و اسکریم بر اساس موقعیت آن متحرک می‌کند.

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

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

    HorizontalPagerScaffold(pagerState = pagerState) {
       HorizontalPager(
          state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
…
   }
}

در نهایت، 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 {
        …
   }
}

جای جای

برخی تغییرات API بین M2.5 و M3 وجود دارد. Placeholder.PlaceholderDefaults اکنون دو اصلاح کننده را ارائه می دهد:

• Modifier.placeholder ، که به جای محتوایی که هنوز بارگیری نشده است ترسیم می شود
• یک جلوه درخشش نگهدارنده مکان Modifier.placeholderShimmer که یک جلوه درخشش نگهدارنده مکان را ارائه می دهد که در یک حلقه انیمیشن اجرا می شود در حالی که منتظر بارگذاری داده است.

برای تغییرات بیشتر در مؤلفه Placeholder به زیر مراجعه کنید.

SwipeDisissableNavHost

SwipeDismissableNavHost بخشی از wear.compose.navigation است. هنگامی که این مؤلفه با M3 استفاده می شود، M3 MaterialTheme LocalSwipeToDismissBackgroundScrimColor و LocalSwipeToDismissContentScrimColor به روز می کند.

TransformingLazyColumn

TransformingLazyColumn بخشی از wear.compose.lazy.foundation است و پشتیبانی از مقیاس‌بندی و شکل‌دهی انیمیشن‌ها را در آیتم‌های فهرست در حین پیمایش اضافه می‌کند و تجربه کاربر را بهبود می‌بخشد.

مشابه ScalingLazyColumn ، rememberTransformingLazyColumnState() را برای ایجاد یک TransformingLazyColumnState فراهم می کند که در بین ترکیبات به خاطر سپرده می شود.

برای افزودن مقیاس‌بندی و شکل‌گیری انیمیشن‌ها، موارد زیر را به هر آیتم فهرست اضافه کنید:

• Modifier.transformedHeight ، که به شما امکان می دهد ارتفاع تبدیل شده آیتم ها را با استفاده از TransformationSpec محاسبه کنید، می توانید از rememberTransformationSpec() استفاده کنید مگر اینکه نیاز به سفارشی سازی بیشتری داشته باشید.
• یک SurfaceTransformation

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
   ScreenScaffold(state) { contentPadding ->
      TransformingLazyColumn(state = state, contentPadding = contentPadding) {
         items(count = 50) {
            Button(
               onClick = {},
               modifier =
                        Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Item $it")
                    }
                }
            }
        }
    }

لینک های مفید

برای کسب اطلاعات بیشتر در مورد مهاجرت از M2.5 به M3 در Compose، به منابع اضافی زیر مراجعه کنید.

نمونه ها

نمونه های سیستم عامل را در شاخه Material3 در GitHub بپوشید

نوشتن برای Wear OS Codelab

مرجع API و کد منبع

• مرجع API Material 3 Compose
• نمونه های Material 3 را در کد منبع بنویسید

طراحی

• راهنمایی طراحی