Material 3 Expressive הוא הדור הבא של העיצוב החדשני והתלת-ממדי. הוא כולל עיצוב, רכיבים ותכונות התאמה אישית מעודכנים, כמו צבע דינמי.

המדריך הזה מתמקד בהעברה של אפליקציות מספריית Jetpack ‏Wear Compose Material 2.5‏ (androidx.wear.compose) לספריית Jetpack ‏Wear Compose Material 3‏ (androidx.wear.compose.material3).

גישות

כדי להעביר את קוד האפליקציה מ-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 יש אנימציה מעודכנת כשהיא פועלת ב-Wear OS 6 (רמת API 36) ואילך. כשמעדכנים לגרסה 3 של Wear Compose Material, מומלץ לעדכן גם את ספריות 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, ה-theme composable נקרא 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 מהמאמר העברה מ-Material 2 ל-Material 3 ב-Compose כנקודת התחלה.

טרנספורמציה של צורה

ב-M3 הוספנו את התכונה Shape Morphing: עכשיו הצורות משתנות בתגובה לאינטראקציות.

ההתנהגות של 'שינוי צורה' זמינה כגרסה של כמה לחצנים עגולים, כפי שמפורט בהמשך:

רכיבים ופריסה

רוב הרכיבים והפריסות מ-M2.5 זמינים ב-M3. עם זאת, חלק מהרכיבים והפריסות של M3 לא היו קיימים ב-M2.5. בנוסף, לחלק מהרכיבים של M3 יש יותר וריאציות מאשר לרכיבים המקבילים של M2.5.

יש רכיבים שדורשים שיקולים מיוחדים, אבל מומלץ להתחיל עם המיפויים הבאים של הפונקציות:

זוהי רשימה מלאה של כל הרכיבים של Material 3:

ולסיום, רשימה של כמה רכיבים רלוונטיים מספריית Wear Compose Foundation בגרסה 1.5.0-beta01:

לחצנים

הלחצנים ב-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 כוללת גם וריאציות חדשות של לחצנים. אפשר לקרוא עליהם בסקירה הכללית על ה-API של Compose Material 3.

ב-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 החליפו את Scaffold. AppScaffold ו-ScreenScaffold מגדירים את המבנה של המסך ומרכזים את המעברים של הרכיבים ScrollIndicator ו-TimeText.

AppScaffold מאפשר לרכיבים סטטיים במסך, כמו TimeText, להישאר גלויים במהלך מעברים באפליקציה, כמו החלקה כדי לסגור. ​​היא מספקת מקום לתוכן הראשי של האפליקציה, שבדרך כלל מסופק על ידי רכיב ניווט כמו SwipeDismissableNavHost

מגדירים AppScaffold אחד לפעילות ומשתמשים ב-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 מגדירים את המבנה של Pager ומתאמים את המעברים של הרכיבים HorizontalPageIndicator ו-TimeText.

HorizontalPagerScaffold מציג את HorizontalPageIndicator בחלק האמצעי-הסופי של המסך כברירת מחדל, ומרכז את הצגת TimeText ו-HorizontalPageIndicator בהתאם לכך אם Pager מחולק לדפים. הדבר נקבע על ידי PagerState.

יש גם רכיב חדש בשם AnimatedPage, שמוסיף אנימציה לדף בתוך Pager עם אפקט של שינוי גודל ו-scrim על סמך המיקום שלו.

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 {
        …
   }
}

Placeholder

יש כמה שינויים ב-API בין גרסה M2.5 ל-M3. Placeholder.PlaceholderDefaults עכשיו כולל שני משתני שינוי:

• Modifier.placeholder, שמוצג במקום תוכן שעדיין לא נטען
• אפקט placeholder shimmer Modifier.placeholderShimmer שמספק אפקט placeholder shimmer שפועל בלולאת אנימציה בזמן ההמתנה לטעינה של הנתונים.

בהמשך מפורטים שינויים נוספים ברכיב Placeholder.

SwipeDismissableNavHost

SwipeDismissableNavHost הוא חלק מ-wear.compose.navigation. כשמשתמשים ברכיב הזה עם M3, ה-MaterialTheme של M3 מעדכן את 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, אפשר לעיין במקורות המידע הנוספים הבאים.

דוגמיות

דוגמאות ל-Wear OS בהסתעפות Material3 ב-GitHub

codelab ל-Compose for Wear OS

הפניית API וקוד מקור

• הפניית API של Compose Material 3
• כתיבה של דוגמאות ל-Material 3 בקוד המקור

עיצוב

• הנחיות לעיצוב