ב-Jetpack Compose יש הטמעה של Material Design 3, הגרסה הבאה של Material Design. Material 3 כולל עיצוב נושאים, רכיבים ותכונות של התאמה אישית של Material You, כמו צבעים דינמיים, שעודכנו. הוא תוכנן כך שיהיה עקבי עם הסגנון החזותי החדש וממשק המשתמש של המערכת ב-Android 12 ואילך.
בהמשך נסביר איך מטמיעים את Material Design 3 באמצעות האפליקציה לדוגמה Reply. הדוגמה של Reply מבוססת לחלוטין על Material Design 3.
תלות
כדי להתחיל להשתמש ב-Material 3 באפליקציית Compose, מוסיפים את התלות Compose Material 3 לקובצי build.gradle:
implementation "androidx.compose.material3:material3:$material3_version"
אחרי שמוסיפים את התלות, אפשר להתחיל להוסיף לאפליקציות מערכות של Material Design, כולל צבע, טיפוגרפיה וצורה.
ממשקי API ניסיוניים
חלק מממשקי ה-API של M3 נחשבים לניסיוניים. במקרים כאלה, צריך להביע הסכמה ברמת הפונקציה או הקובץ באמצעות ההערה ExperimentalMaterial3Api:
// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
// M3 composables
}
התאמת העיצוב של Google Material Design
ערכת עיצוב של M3 מכילה את תת-המערכות הבאות: סכמת צבעים, טיפוגרפיה וצורות. כשמתאימים אישית את הערכים האלה, השינויים משתקפים באופן אוטומטי ברכיבי M3 שבהם אתם משתמשים כדי לפתח את האפליקציה.
ב-Jetpack Compose, המושגים האלה מיושמים באמצעות ה-composable M3 MaterialTheme:
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
כדי להגדיר עיצוב לתוכן של האפליקציה, צריך להגדיר את ערכת הצבעים, הגופנים והצורות הספציפיים לאפליקציה.
ערכת צבעים
הבסיס של ערכת צבעים הוא קבוצה של חמישה צבעים מרכזיים. כל אחד מהצבעים האלה קשור ל-palette של 13 גוונים, שבהם נעשה שימוש ברכיבי Material 3. לדוגמה, זו ערכת הצבעים של העיצוב הבהיר של תשובה:
מידע נוסף על ערכת הצבעים ותפקידי הצבעים
יצירת ערכות צבעים
אפשר ליצור ColorScheme בהתאמה אישית באופן ידני, אבל בדרך כלל קל יותר ליצור אותו באמצעות צבעים מקוריים מהמותג שלכם. אפשר לעשות זאת באמצעות הכלי Material Theme Builder, ואפשר גם לייצא קוד של נושאים ב-Compose. הקבצים הבאים נוצרים:
Color.ktמכיל את הצבעים של העיצוב, עם כל התפקידים שמוגדרים גם לצבעים בהירים וגם לצבעים כהים של העיצוב.
val md_theme_light_primary = Color(0xFF476810) val md_theme_light_onPrimary = Color(0xFFFFFFFF) val md_theme_light_primaryContainer = Color(0xFFC7F089) // .. // .. val md_theme_dark_primary = Color(0xFFACD370) val md_theme_dark_onPrimary = Color(0xFF213600) val md_theme_dark_primaryContainer = Color(0xFF324F00) // .. // ..
Theme.ktמכיל הגדרה של ערכות צבעים בהירות וכהות ושל עיצוב האפליקציה.
private val LightColorScheme = lightColorScheme(
primary = md_theme_light_primary,
onPrimary = md_theme_light_onPrimary,
primaryContainer = md_theme_light_primaryContainer,
// ..
)
private val DarkColorScheme = darkColorScheme(
primary = md_theme_dark_primary,
onPrimary = md_theme_dark_onPrimary,
primaryContainer = md_theme_dark_primaryContainer,
// ..
)
@Composable
fun ReplyTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colorScheme =
if (!darkTheme) {
LightColorScheme
} else {
DarkColorScheme
}
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
כדי לתמוך בעיצוב בהיר ועיצוב כהה, משתמשים ב-isSystemInDarkTheme(). בהתאם להגדרת המערכת, מגדירים את ערכת הצבעים שבה רוצים להשתמש: בהירה או כהה.
ערכות צבעים דינמיות
צבע דינמי הוא החלק העיקרי של Material You, שבו אלגוריתם מסיק צבעים מותאמים אישית מהטפט של המשתמש כדי להחיל אותם על האפליקציות ועל ממשק המשתמש של המערכת. לוח הצבעים הזה משמש כנקודת ההתחלה ליצירת ערכות צבעים בהירות וכהות.
התכונה 'צבע דינמי' זמינה ב-Android מגרסה 12 ואילך. אם הצבע הדינמי זמין, אפשר להגדיר ColorScheme דינמי. אם לא, צריך להשתמש ב-ColorScheme בהיר או כהה בהתאמה אישית.
ColorScheme מספק פונקציות build ליצירת ערכת צבעים דינמית בהירה או כהה:
// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
שימוש בצבע
אפשר לגשת לצבעי העיצוב של Material באפליקציה דרך MaterialTheme.colorScheme:
Text(
text = "Hello theming",
color = MaterialTheme.colorScheme.primary
)
אפשר להשתמש בכל תפקיד צבע במגוון מקומות, בהתאם למצב, לבולטות ולמיקוד של הרכיב.
- הצבע הראשי הוא צבע הבסיס, שמשמש לרכיבים הראשיים כמו לחצנים בולטים, מצבים פעילים והגוון של משטחים מודגשים.
- צבע המפתח המשני משמש לרכיבים פחות בולטים בממשק המשתמש, כמו צ'יפים של מסננים, ומרחיב את האפשרויות לביטוי באמצעות צבעים.
- צבע המפתח המשני משמש להסיק את התפקידים של צבעים מודגשים מנוגדים, שאפשר להשתמש בהם כדי לאזן בין צבעים ראשיים לצבעים משניים או כדי למשוך תשומת לב מוגברת לאלמנט.
בעיצוב של אפליקציית Reply לדוגמה, נעשה שימוש בצבע on-primary-container מעל primary-container כדי להדגיש את הפריט שנבחר.
Card(
colors = CardDefaults.cardColors(
containerColor =
if (isSelected) MaterialTheme.colorScheme.primaryContainer
else
MaterialTheme.colorScheme.surfaceVariant
)
) {
Text(
text = "Dinner club",
style = MaterialTheme.typography.bodyLarge,
color =
if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
else MaterialTheme.colorScheme.onSurface,
)
}
כאן אפשר לראות בחלונית הניווט של התשובות איך נעשה שימוש בצבעים משניים ושלישיים של הקונטיינרים בניגודיות כדי ליצור הדגשה ואווירה.
טיפוגרפיה
בגרסה השלישית של Material Design מוגדר סולם סוגים, כולל סגנונות טקסט שהותאמו מגרסה 2 של Material Design. שמות הפריטים והקיבוצים פשוטים יותר: תצוגה, כותרת ראשית, כותרת, גוף ותווית, עם גדלים גדול, בינוני וקטן לכל אחד מהם.
| M3 | גודל גופן/גובה שורה שמוגדרים כברירת מחדל |
displayLarge |
Roboto 57/64 |
displayMedium |
Roboto 45/52 |
displaySmall |
Roboto 36/44 |
headlineLarge |
Roboto 32/40 |
headlineMedium |
Roboto 28/36 |
headlineSmall |
Roboto 24/32 |
titleLarge |
New- Roboto Medium 22/28 |
titleMedium |
Roboto Medium 16/24 |
titleSmall |
Roboto Medium 14/20 |
bodyLarge |
Roboto 16/24 |
bodyMedium |
Roboto 14/20 |
bodySmall |
Roboto 12/16 |
labelLarge |
Roboto Medium 14/20 |
labelMedium |
Roboto Medium 12/16 |
labelSmall |
New Roboto Medium, 11/16 |
הגדרת טיפוגרפיה
Compose מספק את הכיתה M3 Typography – יחד עם הכיתות הקיימות TextStyle ושקשורות לגופנים – כדי ליצור מודל לסולם הסוגים של Material 3. ה-constructor של Typography מציע ברירת מחדל לכל סגנון, כך שאפשר להשמיט פרמטרים שלא רוצים להתאים אישית:
val replyTypography = Typography(
titleLarge = TextStyle(
fontWeight = FontWeight.SemiBold,
fontSize = 22.sp,
lineHeight = 28.sp,
letterSpacing = 0.sp
),
titleMedium = TextStyle(
fontWeight = FontWeight.SemiBold,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.15.sp
),
// ..
)
// ..
סביר להניח שלא תצטרכו להשתמש בכל 15 הסגנונות שמוגדרים כברירת מחדל בסולם הסוגים של Material Design. בדוגמה הזו, נבחרו חמישה גדלים לקבוצה מוקטנת, והשאר הושמטו.
אפשר להתאים אישית את הגופן על ידי שינוי ערכי ברירת המחדל של TextStyle
ומאפיינים שקשורים לגופן כמו fontFamily ו-letterSpacing.
bodyLarge = TextStyle(
fontWeight = FontWeight.Normal,
fontFamily = FontFamily.SansSerif,
fontStyle = FontStyle.Italic,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.15.sp,
baselineShift = BaselineShift.Subscript
),
אחרי שמגדירים את Typography, מעבירים אותו ל-M3 MaterialTheme:
MaterialTheme(
typography = replyTypography,
) {
// M3 app Content
}
שימוש בסגנונות טקסט
אפשר לאחזר את הגופנים שסופקו ל-MaterialTheme של M3 באמצעות MaterialTheme.typography:
Text(
text = "Hello M3 theming",
style = MaterialTheme.typography.titleLarge
)
Text(
text = "you are learning typography",
style = MaterialTheme.typography.bodyMedium
)
מידע נוסף על ההנחיות של Material Design זמין במאמר שימוש בגופנים.
צורות
אפשר להציג משטחי חומרים בצורות שונות. יצירת תשומת לב ישירה, זיהוי רכיבים, העברת מצב והבעת המותג.
סולם הצורות מגדיר את הסגנון של פינות המארז, ומציע מגוון רמות של עיגול – ממרובע ועד עגול לגמרי.
הגדרת צורות
ב-Compose, הכיתה M3 Shapes כוללת פרמטרים מורחבים לתמיכה בצורות M3 חדשות. סולם הצורות של M3 דומה יותר לסולם הסוגים, ומאפשר להשתמש במגוון רחב של צורות בממשק המשתמש.
יש צורות בגדלים שונים:
- קטן במיוחד
- קטן
- בינוני
- גדול
- גדול במיוחד
כברירת מחדל, לכל צורה יש ערך ברירת מחדל, אבל אפשר לשנות את הערכים האלה:
val replyShapes = Shapes(
extraSmall = RoundedCornerShape(4.dp),
small = RoundedCornerShape(8.dp),
medium = RoundedCornerShape(12.dp),
large = RoundedCornerShape(16.dp),
extraLarge = RoundedCornerShape(24.dp)
)
אחרי שמגדירים את Shapes, אפשר להעביר אותו ל-M3 MaterialTheme:
MaterialTheme(
shapes = replyShapes,
) {
// M3 app Content
}
שימוש בצורות
אפשר להתאים אישית את קנה המידה של הצורות לכל הרכיבים ב-MaterialTheme, או לעשות זאת על בסיס רכיב.
החלת צורה בינונית וגדולה עם ערכי ברירת מחדל:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
shape = MaterialTheme.shapes.large,
onClick = {
}
) {
/* fab content */
}
יש עוד שני סמלים – RectangleShape ו-CircleShape – שהם חלק מ-Compose. בצורת המלבן אין רדיוס גבול, ובצורת העיגול יש קצוות מעגליים מלאים:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
הדוגמאות הבאות מציגות חלק מהרכיבים עם ערכי ברירת מחדל של הצורה שחלים עליהם:
מידע נוסף על ההנחיות של Material Design זמין במאמר החלת צורה.
הדגשה
הדגשה ב-M3 מתבצעת באמצעות וריאציות של צבע ושילובים של צבע זהה. ב-M3 יש שתי דרכים להוסיף דגש לממשק המשתמש:
- שימוש בצבעים של משטח, וריאנט של משטח ורקע, לצד צבעים של משטח, וריאנט של משטח ממערכת הצבעים המורחבת M3. לדוגמה, אפשר להשתמש ב-surface עם on-surface-variant, וב-surface-variant עם on-surface כדי לספק רמות שונות של הדגשה.
- שימוש בעוצמות שונות של גופן לטקסט. למעלה ראינו שאפשר להקצות משקלים מותאמים אישית לסולם הסוגים שלנו כדי להדגיש פריטים שונים.
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
עליות/ירידות
בחומר 3, הגובה מוצג בעיקר באמצעות שכבות צבע טונאליות. זוהי דרך חדשה להבדיל בין קונטיינרים לבין משטחים – כדי להגדיל את ההגבהה הטונלית משתמשים בטון בולט יותר – בנוסף לצללים.
גם שכבות-על של גובה בנושאים כהים השתנו לשכבות-על של צבעים כהים ב-Material 3. צבע שכבת-העל מגיע משקע הצבע הראשי.
Surface של M3 – הרכיב הבסיסי שמאחורי רוב הרכיבים של M3 – כולל תמיכה גם בהגבהה של גוונים וגם בהגבהה של צללים:
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
רכיבי חומר
Material Design כולל קבוצה עשירה של רכיבי Material (כמו לחצנים, צ'יפים, כרטיסים, סרגל ניווט) שכבר עומדים בדרישות של Material Theme ומאפשרים ליצור אפליקציות יפות בעיצוב Material Design. אפשר להתחיל להשתמש ברכיבים עם מאפייני ברירת מחדל כבר מההתחלה.
Button(onClick = { /*..*/ }) {
Text(text = "My Button")
}
ב-M3 יש גרסאות רבות של אותם רכיבים, שאפשר להשתמש בהן בתפקידים שונים בהתאם להדגשה ולתשומת הלב.
- לחצן פעולה צף מורחב לפעולה עם הדגש הגבוה ביותר:
ExtendedFloatingActionButton(
onClick = { /*..*/ },
modifier = Modifier
) {
Icon(
imageVector = Icons.Default.Edit,
contentDescription = stringResource(id = R.string.edit),
)
Text(
text = stringResource(id = R.string.add_entry),
)
}
- לחצן מלא לפעולה עם דגש גבוה:
Button(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.view_entry))
}
- לחצן טקסט לפעולה עם דגש נמוך:
TextButton(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.replated_articles))
}
כאן אפשר לקרוא מידע נוסף על לחצנים ורכיבים אחרים של Material Design. ב-Material 3 יש מגוון רחב של חבילות רכיבים, כמו לחצנים, סרגי אפליקציות ורכיבי ניווט, שמיועדים במיוחד לתרחישי שימוש שונים ולגדלים שונים של מסכים.
רכיבי ניווט
ב-Material יש גם כמה רכיבי ניווט שיעזרו לכם להטמיע ניווט בהתאם לגדלים ולמצבים שונים של המסך.
NavigationBar משמש במכשירים קומפקטיים כשרוצים לטרגט 5 יעדים או פחות:
NavigationBar(modifier = Modifier.fillMaxWidth()) {
Destinations.entries.forEach { replyDestination ->
NavigationBarItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
NavigationRail משמש לטאבלטים או לטלפונים בגודל קטן עד בינוני במצב לרוחב. היא מספקת למשתמשים ארגונומיה ומשפרת את חוויית השימוש במכשירים האלה.
NavigationRail(
modifier = Modifier.fillMaxHeight(),
) {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
BottomNavigationBar (שמאל) ושל NavigationRail (ימין)אפשר להשיב באמצעות שני הנושאים שמוגדרים כברירת מחדל כדי לספק חוויית משתמש עשירה לכל גדלי המכשירים.
NavigationDrawer משמש בטאבלטים בגודל בינוני עד גדול, שבהם יש מספיק מקום להצגת פרטים. אפשר להשתמש גם ב-PermanentNavigationDrawer וגם ב-ModalNavigationDrawer יחד עם NavigationRail.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { },
label = { }
)
}
}) {
}
אפשרויות הניווט משפרות את חוויית המשתמש, הארגונומיה והנגישות. מידע נוסף על רכיבי הניווט של Material מופיע בCodelab ליצירת רכיבים מותאמים.
התאמה אישית של העיצוב של רכיב
M3 מעודדת התאמה אישית וגמישות. לכל הרכיבים מוגדרים צבעים שמוגדרים כברירת מחדל, אבל הם חושפים ממשקי API גמישים להתאמה אישית של הצבעים שלהם במקרה הצורך.
רוב הרכיבים, כמו כרטיסים ולחצנים, מספקים אובייקט ברירת מחדל שחשוף לממשקי צבע והגבהה שאפשר לשנות כדי להתאים אישית את הרכיב:
val customCardColors = CardDefaults.cardColors(
contentColor = MaterialTheme.colorScheme.primary,
containerColor = MaterialTheme.colorScheme.primaryContainer,
disabledContentColor = MaterialTheme.colorScheme.surface,
disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
defaultElevation = 8.dp,
pressedElevation = 2.dp,
focusedElevation = 4.dp
)
Card(
colors = customCardColors,
elevation = customCardElevation
) {
// m3 card content
}
מידע נוסף על התאמה אישית של Material 3
ממשק משתמש של המערכת
חלק מהמאפיינים של Material You מגיעים מהסגנון החזותי החדש ומממשק המשתמש של המערכת ב-Android מגרסה 12 ואילך. שני תחומים עיקריים שבהם יש שינויים הם תנודות (ripple) וגלילה מעבר לקצה המסך. לא נדרשת עבודה נוספת כדי להטמיע את השינויים האלה.
גל
התכונה 'רטט' משתמשת עכשיו בזוהר עדין כדי להאיר משטחים כשמקישים עליהם. Compose Material Ripple משתמש ב-RippleDrawable בפלטפורמה ב-Android, כך שתנודות גליות נוצצות זמינות ב-Android מגרסה 12 ואילך לכל הרכיבים של Material.
גלילה מעבר לקצה
עכשיו, כשגוללים מעבר לקצה המסך, המערכת משתמשת באפקט מתיחה בקצה של קונטיינרים לגלילה.
התכונה 'התאמת תוכן לגלילה' מופעלת כברירת מחדל ברכיבי Compose בקונטיינרים לגלילה – למשל, LazyColumn, LazyRow ו-LazyVerticalGrid – ב-Compose Foundation בגרסה 1.1.0 ואילך, ללא קשר לרמת ה-API.
נגישות
סטנדרטים של נגישות שמובנים ברכיבי Material נועדו לספק בסיס לתכנון מוצרים שמתאים לכולם. הבנת הנגישות של המוצר יכולה לשפר את נוחות השימוש לכל המשתמשים, כולל משתמשים עם ראייה חלשה, עיוורון, לקויות שמיעה, לקויות קוגניטיביות, לקויות מוטוריות או מוגבלויות זמניות (למשל, זרוע שבורה).
נגישות של צבעים
הצבע הדינמי תוכנן לעמוד בתקני הנגישות של ניגודיות צבעים. המערכת של לוחות הצבעים הטונליים חיונית כדי להפוך כל ערכת צבעים לנגישה כברירת מחדל.
מערכת הצבעים של Material מספקת ערכי גוון וערכים סטנדרטיים שאפשר להשתמש בהם כדי לעמוד ביחסי ניגודיות שזמינים לכולם.
כל הרכיבים של Material והעיצוב הדינמי כבר משתמשים בתפקידי הצבעים שלמעלה מתוך קבוצה של לוחות צבעים טונאליים שנבחרו כדי לעמוד בדרישות הנגישות. עם זאת, אם אתם מתאימים אישית רכיבים, חשוב להשתמש בתפקידי צבע מתאימים ולהימנע מחוסר התאמה.
כדי לספק למשתמשים ניגודיות נגישה, צריך להשתמש ב-on-primary מעל primary, ב-on-primary-container מעל primary-container ובאותו אופן בצבעים ניטרליים ובצבעים אחרים של פס מודגש.
שימוש בקונטיינר שלישי מעל הקונטיינר הראשי גורם ללחצן עם ניגודיות נמוכה:
// ✅ Button with sufficient contrast ratio
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary
)
) {
}
// ❌ Button with poor contrast ratio
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
contentColor = MaterialTheme.colorScheme.primaryContainer
)
) {
}
נגישות של טיפוגרפיה
סולם הסוג M3 מעדכן את הערכים והרמפה של הסוג הסטטי כדי לספק מסגרת פשוטה אך דינמית של קטגוריות גודל שניתן להתאים למכשירים שונים.
לדוגמה, ב-M3, אפשר להקצות ל-Display Small ערכים שונים בהתאם להקשר של המכשיר, כמו טלפון או טאבלט.
מסכים גדולים
ב-Material יש הנחיות לגבי פריסות מותאמות ומכשירים מתקפלים, כדי להפוך את האפליקציות שלכם לנגישות ולשפר את הארגונומיה של משתמשים שמחזיקים במכשירים גדולים.
ב-Material Design יש סוגים שונים של ניווט שיעזרו לכם לספק חוויית משתמש טובה יותר במכשירים גדולים.
מידע נוסף על הנחיות האיכות לאפליקציות למסכים גדולים ב-Android זמין כאן. בנוסף, אפשר לעיין בדוגמה לתשובה שלנו לגבי עיצוב רספונסיבי ונגיש.
מידע נוסף
למידע נוסף על נושאים ב-Material Design ב-Compose, תוכלו לעיין במקורות המידע הבאים:
אפליקציות לדוגמה
Docs
הפניית API וקוד מקור
סרטונים
מומלץ עבורך
- הערה: טקסט הקישור מוצג כש-JavaScript מושבת
- העברה מחומר 2 לחומר 3 ב-Compose
- עיצוב Material 2 ב-Compose
- מערכות עיצוב בהתאמה אישית ב-Compose