Material 3 Expressive הוא השלב הבא בהתפתחות של Material Design. הוא כולל עדכונים של ערכות נושא, רכיבים ותכונות התאמה אישית כמו צבע דינמי.
המדריך הזה מתמקד בהעברה מהספרייה Wear Compose Material 2.5 (androidx.wear.compose) Jetpack לספרייה Wear Compose Material 3 (androidx.wear.compose.material3) Jetpack לאפליקציות.
גישות
כדי להעביר את קוד האפליקציה מ-M2.5 ל-M3, פועלים לפי אותה גישה שמתוארת במדריך להעברת חומרים ב-Compose לטלפון, ובמיוחד:
תלויות
ל-M3 יש חבילה וגרסה נפרדות מ-M2.5:
M2.5
implementation("androidx.wear.compose:compose-material:1.4.0")
M3
implementation("androidx.wear.compose:compose-material3:1.5.0-beta05")
אפשר לראות את הגרסאות האחרונות של M3 בדף הגרסאות של Wear Compose Material 3.
בספריית Wear Compose Foundation בגרסה 1.5.0-beta01 נוספו כמה רכיבים חדשים שנועדו לעבוד עם רכיבי Material 3. באופן דומה, SwipeDismissableNavHost מהספרייה Wear Compose Navigation
כולל אנימציה מעודכנת כשמריצים אותו ב-Wear OS 6 (רמת API 36) או בגרסה
עדכנית יותר. כשמעדכנים לגרסה 3 של Wear Compose Material, מומלץ לעדכן גם את ספריות Wear Compose Foundation ו-Navigation:
implementation("androidx.wear.compose:compose-foundation:1.5.0-beta05")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta05")
קביעת עיצוב
גם ב-M2.5 וגם ב-M3, הקומפוזיציה של הנושא נקראת MaterialTheme, אבל חבילות הייבוא והפרמטרים שונים. ב-M3, הפרמטר Colors שונה ל-ColorScheme, והפרמטר MotionScheme נוסף כדי להטמיע מעברים.
M2.5
import androidx.wear.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes,
content = content
)
M3
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 ועל פונקציות שקשורות אליהן:
M2.5
import androidx.wear.compose.material.Colors
val appColorScheme: Colors = Colors(
// M2.5 Color parameters
)
M3
import androidx.wear.compose.material3.ColorScheme
val appColorScheme: ColorScheme = ColorScheme(
// M3 ColorScheme parameters
)
בטבלה הבאה מפורטים ההבדלים העיקריים בין M2.5 לבין M3:
M2.5 |
M3 |
|---|---|
|
השם של המרחב השתנה ועכשיו הוא |
13 צבעים |
28 צבעים |
לא רלוונטי |
עיצוב חדש של צבע דינמי |
לא רלוונטי |
צבעים שלישוניים חדשים שמאפשרים להביע את עצמכם בצורה טובה יותר |
עיצוב של צבע דינמי
תכונה חדשה ב-M3 היא ערכות נושא עם צבעים דינמיים. אם המשתמשים משנים את הצבעים בתצוגת השעון, הצבעים בממשק המשתמש משתנים בהתאם.
משתמשים בפונקציה dynamicColorScheme כדי להטמיע ערכת צבעים דינמית ומספקים defaultColorScheme כגיבוי למקרה שערכת הצבעים הדינמית לא זמינה.
@Composable
fun myApp() {
val myColorScheme = myBrandColors()
val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}
טיפוגרפיה
מערכת הטיפוגרפיה ב-M3 שונה מזו שב-M2, והיא כוללת את התכונות הבאות:
- תשעה סגנונות טקסט חדשים
- גופנים גמישים, שמאפשרים להתאים אישית את סולמות הסוגים למשקלים, לרוחבים ולעיגולים שונים
AnimatedText, שמשתמש בגופנים גמישים
M2.5
import androidx.wear.compose.material.Typography
val Typography = Typography(
// M2.5 TextStyle parameters
)
M3
import androidx.wear.compose.material3.Typography
val Typography = Typography(
// M3 TextStyle parameters
)
גופנים של Flex
גופנים גמישים מאפשרים למעצבים לציין את רוחב ומשקל הסוג לגדלים ספציפיים.
סגנונות טקסט
ב-M3 זמינים סגנונות הטקסט הבאים. הם מופעלים כברירת מחדל על ידי רכיבים שונים של M3.
טיפוגרפיה |
TextStyle |
|---|---|
תצוגה |
displayLarge, displayMedium, displaySmall |
כותרת |
titleLarge, titleMedium, titleSmall |
תווית |
labelLarge, labelMedium, labelSmall |
גוף |
bodyLarge, bodyMedium, bodySmall, bodyExtraSmall |
מספרים |
numeralExtraLarge, numeralLarge, numeralMedium, numeralSmall, numeralExtraSmall |
קשת |
arcLarge, arcMedium, arcSmall |
צורה
מערכת הצורות ב-M3 שונה מזו שב-M2. מספר הפרמטרים של הצורה גדל, השמות שלהם שונים והמיפוי שלהם לרכיבי M3 שונה. אלה הגדלים של הצורות שזמינים:
- קטן במיוחד
- קטן
- בינוני
- גדול
- גדול במיוחד
במצב כתיבה, זה חל על המחלקה M2 Shapes ועל המחלקה M3 Shapes:
M2.5
import androidx.wear.compose.material.Shapes
val Shapes = Shapes(
// M2.5 Shapes parameters
)
M3
import androidx.wear.compose.material3.Shapes
val Shapes = Shapes(
// M3 Shapes parameters
)
אפשר להשתמש במיפוי הפרמטרים של הצורות מתוך המאמר בנושא מעבר מ-Material 2 ל-Material 3 ב-Compose כנקודת התחלה.
שינוי צורה
M3 מציג שינוי צורה: הצורות משתנות עכשיו בתגובה לאינטראקציות.
התנהגות של שינוי צורה זמינה כווריאציה במספר לחצנים עגולים, כמו שמוצג בהמשך:
לחצנים |
פונקציית מורפינג של צורות |
|---|---|
|
IconButtonDefaults.animatedShape() מפעיל אנימציה של לחצן הסמל בלחיצה |
|
IconToggleButtonDefaults.animatedShape() מנפיש את לחצן ההפעלה/השבתה של הסמל בלחיצה ו IconToggleButtonDefaults.variantAnimatedShapes() מפעיל אנימציה של לחצן ההפעלה/ההשבתה של הסמל בלחיצה ובסימון/ביטול סימון |
|
TextButtonDefaults.animatedShape() מוסיף אנימציה ללחצן הטקסט בלחיצה |
|
TextToggleButtonDefaults.animatedShapes() מוסיף אנימציה ללחצן הטקסט למעבר בין מצבים כשלוחצים עליו, ו-TextToggleButtonDefaults.variantAnimatedShapes() מוסיף אנימציה ללחצן הטקסט למעבר בין מצבים כשלוחצים עליו וכשמסמנים או מבטלים את הסימון שלו. |
רכיבים ופריסה
רוב הרכיבים והפריסות מ-M2.5 זמינים ב-M3. עם זאת, חלק מהרכיבים והפריסות של M3 לא היו קיימים ב-M2.5. בנוסף, לחלק מהרכיבים של M3 יש יותר וריאציות מאשר לרכיבים המקבילים ב-M2.5.
יש רכיבים שצריך להתייחס אליהם באופן מיוחד, אבל מומלץ להתחיל עם מיפוי הפונקציות הבא:
זו רשימה מלאה של כל רכיבי Material 3:
Material 3 |
רכיב מקביל ל-Material 2.5 (אם הוא לא חדש ב-M3) |
|---|---|
חדש |
|
חדש |
|
android.wear.compose.material.Scaffold (עם androidx.wear.compose.material3.ScreenScaffold ) |
|
חדש |
|
androidx.wear.compose.material.ToggleChip עם תיבת סימון להחלפת מצב |
|
androidx.wear.compose.material.Chip (רק כשלא נדרש רקע) |
|
חדש |
|
חדש |
|
חדש |
|
androidx.wear.compose.material.Chip כשנדרש רקע של לחצן עם גוון |
|
חדש |
|
חדש |
|
חדש |
|
חדש |
|
חדש |
|
androidx.wear.compose.material.ToggleChip עם מתג כפתור בחירה |
|
android.wear.compose.material.Scaffold (עם androidx.wear.compose material3.AppScaffold) |
|
androidx.wear.compose.material3.SegmentedCircularProgressIndicator |
חדש |
androidx.wear.compose.material.SwipeToRevealCard ו-androidx.wear.compose.material.SwipeToRevealChip |
|
androidx.wear.compose.material.ToggleChip עם מתג להחלפת מצב |
|
חדש |
ולבסוף, רשימה של כמה רכיבים רלוונטיים מגרסה 1.5.0-beta01 של ספריית Wear Compose Foundation:
Wear Compose Foundation 1.5.0-beta |
|
|---|---|
המאפיין הזה משמש להוספת הערות לתכנים קומפוזביליים באפליקציה, כדי לעקוב אחרי החלק הפעיל של הקומפוזיציה ולתאם את המיקוד. |
|
רכיב pager עם גלילה אופקית, שמבוסס על רכיבי Compose Foundation עם שיפורים ספציפיים ל-Wear כדי לשפר את הביצועים ולעמוד בהנחיות של Wear OS. |
|
רכיב pager עם גלילה אנכית, שמבוסס על רכיבי Compose Foundation עם שיפורים ספציפיים ל-Wear כדי לשפר את הביצועים ולעמוד בהנחיות של Wear OS. |
|
אפשר להשתמש במקום ScalingLazyColumn כדי להוסיף לכל פריט אפקטים של שינוי גודל בזמן גלילה. |
|
לחצנים
הלחצנים ב-M3 שונים מאלה שב-M2.5. הצ'יפ M2.5 הוחלף בלחצן. הטמעה של Button מספקת ערכי ברירת מחדל למאפיינים Text, maxLines ו-textAlign. אפשר לשנות את ערכי ברירת המחדל האלה ברכיב Text.
M2.5
import androidx.wear.compose.material.Chip
//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)
M3
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
}
}
פיגום
ה-Scaffold ב-M3 שונה מזה שב-M2.5. ב-M3, AppScaffold ורכיב ה-Composable החדש ScreenScaffold החליפו את Scaffold. AppScaffold ו-ScreenScaffold מגדירים את המבנה של המסך ומתאמים את המעברים של הרכיבים ScrollIndicator ו-TimeText.
AppScaffold מאפשרת לרכיבים סטטיים במסך, כמו TimeText, להישאר גלויים במהלך מעברים באפליקציה, כמו החלקה לסגירה. הוא מספק משבצת לתוכן האפליקציה הראשי, שבדרך כלל מסופק על ידי רכיב ניווט כמו SwipeDismissableNavHost
מצהירים על AppScaffold אחד לפעילות ומשתמשים ב-ScreenScaffold לכל מסך.
M2.5
import androidx.wear.compose.material.Scaffold
Scaffold {...}
M3
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 עם אפקט של שינוי גודל וכיסוי, על סמך המיקום שלו.
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
Modifier.placeholderShimmerשפועל בלולאת אנימציה בזמן ההמתנה לטעינת הנתונים.
בהמשך מפורטים שינויים נוספים ברכיב Placeholder.
M2.5 |
M3 |
|---|---|
|
הוסר |
|
הוסר |
|
השם החדש הוא |
|
הוסר |
|
הוסר |
|
הוסר |
|
הוסר |
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 זמין במקורות המידע הנוספים הבאים.