Jetpack Compose 可讓您實作 Material Design 3,這是新一代的 Material Design。Material 3 提供更新後的主題設定、元件和動態色彩等 Material You 個人化功能,且在設計上與 Android 12 以上版本中的全新視覺風格和系統 UI 相呼應。
以下使用 Reply 範例應用程式來示範 Material Design 3 實作方式。Reply 範例完全以 Material Design 3 為基礎。
依附元件
如要在 Compose 應用程式中開始使用 Material 3,請將 Compose Material 3 依附元件新增至 build.gradle
檔案:
implementation "androidx.compose.material3:material3:$material3_version"
新增依附元件後,您就可以開始在應用程式中新增質感設計系統,包括顏色、字體排版和形狀。
實驗性 API
某些 M3 API 屬於實驗性質。在此情況下,您必須使用 ExperimentalMaterial3Api
註解,在函式或檔案層級選擇加入:
// import androidx.compose.material3.ExperimentalMaterial3Api @OptIn(ExperimentalMaterial3Api::class) @Composable fun AppComposable() { // M3 composables }
Material Design 主題設定
M3 主題包含下列子系統:色彩配置、字體排版和形狀。自訂這些值時,系統會自動在您用於建構應用程式的 M3 元件中反映變更。
Jetpack Compose 利用 M3 MaterialTheme
可組合項實作這些概念:
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
如要為應用程式內容設定主題,請定義應用程式專屬的色彩配置、字體排版和形狀。
色彩配置
色彩配置的基礎是五種主要顏色。這些顏色每種顏色都與 13 種色調的色調調色盤有關,後者可供 Material 3 元件使用。舉例來說,這是 Reply 的淺色主題色彩配置:
如想進一步瞭解色彩配置和顏色角色,請前往這個網頁。
產生色彩配置
雖然您可以手動建立自訂 ColorScheme
,但使用品牌的來源色彩來產生這個類別是較容易的方式。您可以使用 Material Design 主題建構工具執行這項操作,並視需要匯出 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 的關鍵部分,其中演算法會從使用者的桌布衍生自訂色彩,並套用至其應用程式和系統 UI。這個調色盤是用來做為產生淺色和深色色彩配置的起點。
動態色彩適用於 Android 12 以上版本。如有動態顏色可用,您可以設定動態 ColorScheme
。如果沒有,您應改回使用自訂淺色或深色 ColorScheme
。
ColorScheme
提供建構工具函式來建立動態淺色或深色色彩配置:
// 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 }
色彩使用
您可以透過 MaterialTheme.colorScheme
在應用程式中存取 Material Design 主題色彩:
Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )
每個顏色角色都可以用在各種位置,視元件的狀態、顯眼程度和強調效果而定。
- Primary 是基本顏色,用於主要元件,例如醒目按鈕、啟用狀態和進階表面的色調。
- 次要按鍵顏色是用於 UI 中較不顯眼的元件 (例如篩選器方塊),並擴大套用顏色運算式的機會。
- 第三色鍵顏色是用來衍生對比強調色的角色,該強調色可用來平衡主要和次要顏色,或為元素加強吸引力。
Reply 範例應用程式設計會在 primary-container 上使用 on-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, ) }
在這邊,您可以在 Reply 導覽匣中看到使用次要和第三容器顏色的對比,以形成強調和重音。
字體排版
Material Design 3 定義了輸入比例,包括從 Material Design 2 改編的文字樣式。此外,命名和分組功能也經過簡化,包括顯示、廣告標題、標題、內文和標籤 (皆有大、中和小三種尺寸)。
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 的類型縮放型式。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 ), // .. ) // ..
您的產品不一定要使用 Material Design 輸入比例的 15 個預設樣式。在本例中,您為縮減組合選擇了五種大小,而忽略其餘的大小。
您可以藉由變更 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.typography
擷取提供給 M3 MaterialTheme
可組合項的字體排版:
Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )
如要進一步瞭解 Material Design 指南,請參閱「套用字體排版」。
形狀
Material 表面可用不同形狀顯示。形狀可用於吸引註意、識別元件、傳達狀態,以及呈現品牌風格。
形狀比例會定義容器邊角的樣式,提供從正方形到全圓形的圓角。
定義形狀
Compose 提供含有擴展參數的 M3 Shapes
類別,以支援新的 M3 形狀。M3 形狀縮放比例更類似類型縮放,以便在 UI 上顯示變化豐富的形狀。
以下是不同大小的形狀:
- 特小
- 小
- 中
- 大
- 特大
根據預設,每個形狀都有預設值,但您可以覆寫:
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 */ }
Compose 還有另外兩種形狀:RectangleShape
和 CircleShape
。矩形沒有框線半徑,圓形則會顯示完整的圓形邊緣:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
以下範例示範部分含有預設形狀值的元件:
您可以在套用形狀時,進一步瞭解 Material Design 指南。
強調效果
M3 中的強調效果是透過顏色變化及其色彩組合提供。在 M3 中,有兩種方法可在 UI 中新增強調效果:
- 使用表面、surface-variant 和背景,搭配已擴充 M3 色彩系統的 on-surface 和 on-surface-variants 顏色。舉例來說,surface 可與 on-surface-variant 和 surface-variant 搭配使用,可與 on-surface 搭配使用,藉此提供不同程度的強調效果。
- 為文字使用不同的字型粗細。如上所述,您可以為我們的類型尺度提供自訂權重,以達到不同的強調效果。
bodyLarge = TextStyle( fontWeight = FontWeight.Bold ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal )
高度
Material 3 主要使用色調色彩重疊來表示高度。這是區分容器和表面的新方式,除了使用陰影之外,還使用更加顯眼的色調來提高色調高度。
深色主題中的高度重疊在 Material 3 中也已改為色調色彩重疊。重疊顏色來自主要色彩運算單元。
M3 Surface (多數 M3 元件背後的幕後可組合項) 支援色調和陰影高度:
Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }
Material 元件
Material Design 隨附一組豐富的質感元件 (例如按鈕、方塊、資訊卡、導覽列),這些元件都遵循 Material Design 主題設定,可協助您打造精美的 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 按鈕和其他元件。Material 3 提供多種元件套件,例如按鈕、應用程式列、導覽元件,專為不同用途和螢幕大小設計。
導覽元件
Material Design 也提供多個導覽元件,協助您根據不同的螢幕大小和狀態實作導覽功能。
如要指定 5 個以下的目的地,在精簡版裝置中使用 NavigationBar
:
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 = { } ) } }
請以預設主題設定回覆,針對所有裝置尺寸提供沉浸式使用者體驗。
NavigationDrawer
適用於中大型平板電腦,當中有足夠空間可顯示詳細資料。PermanentNavigationDrawer
或 ModalNavigationDrawer
可與 NavigationRail
搭配使用。
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { }, label = { } ) } }) { }
導覽選項可改善使用者體驗、人體工學和可連性。如要進一步瞭解 Material 導覽元件,請參閱 Compose 自動調整程式碼研究室。
自訂元件的主題設定
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。
系統 UI
Material You 的某些面向,來自 Android 12 以上版本的全新視覺風格和系統 UI。有兩個主要部分是漣漪效果和過度捲動變更。您無須採取其他工作就能導入這些變更。
漣漪
按下時,分享關係圖現在使用細微的火花來照亮途徑。 Compose Material 分享關係圖在 Android 環境中使用平台 RippleDrawable,因此在 Android 12 以上版本中,所有 Material Design 元件均可使用火花分享關係圖。
過度捲動
過度捲動現在可以在捲動容器的邊緣使用延展效果。無論 API 級別為何,在 Compose Foundation 1.1.0 以上版本中,捲動容器可組合項 (例如 LazyColumn
、LazyRow
和 LazyVerticalGrid
) 預設會啟用延展過度捲動。
無障礙功能
Material 元件內建無障礙功能標準,專為實現多元包容產品設計的基礎。瞭解產品的無障礙設計有助於提升所有使用者的可用性,包括視障、失明、聽障、認知障礙、動作障礙或身心障礙者 (例如手臂損壞) 等。
顏色無障礙功能
動態色彩應符合無障礙工具的色彩對比度標準。色調調色盤系統對於讓任何色彩配置預設可供存取非常重要。
Material 的色彩系統提供標準色調值和測量方法,可用於達到一目瞭然的對比度。
所有 Material Design 元件和動態主題設定都已從一組色調調色盤中選用上述色彩角色,以符合無障礙需求。不過,如果您要自訂元件,請務必使用適當的顏色角色,並避免不相符。
在 primary 上使用 on-primary,在 primary-container 上使用 on-primary-container,並對其他強調色和中性色採取相同做法,為使用者提供可存取的對比度。
在 primary 之上使用第三容器,為使用者帶來低對比的按鈕:
// ✅ 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 Design 提供了自動調整式版面配置和折疊式裝置的指南,讓您更容易使用應用程式,並改善使用者手持大型裝置的人體工學。
Material 提供不同類型的導覽功能,協助您為大型裝置提供更優質的使用者體驗。
您可以進一步瞭解 Android 大螢幕指南,並參閱回覆範例,瞭解會自動調整的無障礙設計。
瞭解詳情
如要進一步瞭解 Compose 中的 Material Design 主題設定,請參閱下列資源:
範例應用程式
文件
API 參考資料和原始碼
影片
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 在 Compose 中從質感設計 2 遷移至質感設計 3
- Compose 中的質感設計 2
- Compose 中的自訂設計系統