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，請在 build.gradle 檔案中加入 Compose Material 3 依附元件：
implementation "androidx.compose.material3:material3:$material3_version"
新增依附元件後，就可以開始在應用程式中新增 Material Design 系統，包括顏色、字體排版和形狀。
實驗性 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 種色調的色調調色盤有關，而材質 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 color，以強調所選項目。
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 Navigation 導覽匣中查看次要和第三容器顏色如何對比，以建立強調效果和強調色。
字體排版
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 指南，請參閱套用字體排版的說明文章。
形狀
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 介面 (大部分 M3 元件背後的備用可組合項) 同時支援色調和陰影高度：
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
Material 元件
Material Design 提供一套豐富的 Material 元件 (例如按鈕、方塊、資訊卡、導覽列)，它們皆已遵循 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 = { }
)
}
}
BottomNavigationBar (左圖) 和 NavigationRail (右圖)只要使用兩個預設主題設定回覆，即可針對不同裝置大小提供沉浸式使用者體驗。
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 級別為何，捲動容器可組合項 (例如 LazyColumn、LazyRow 和 LazyVerticalGrid) 都會啟用延展過度捲動功能。
無障礙功能
Material Design 元件內建的無障礙標準旨在提供多元包容產品設計的基礎。瞭解產品的無障礙設計有助於提升所有使用者的使用便利性，包括低視能、失明、聽障、認知障礙、動作障礙或情境障礙 (例如手臂破裂)。
顏色無障礙功能
動態色彩經過特殊設計，符合色彩對比的無障礙標準。色調調色盤系統對於讓任何色彩配置預設為存取至關重要。
Material 的色彩系統提供標準色調值和測量方法，可用於達到一目瞭然的對比度。
所有 Material 元件和動態主題設定都已使用一組色調調色盤中的上述顏色角色，以符合無障礙要求。不過，如果您要自訂元件，請務必使用適當的顏色角色，並避免不相符。
在 primary-container 上使用 on-primary，在 primary-container 上使用 on-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 Design 針對自動調整式版面配置和折疊式裝置提供相關指南，可協助您讓應用程式方便使用，並改善持有大型裝置使用者的人體工學。
Material Design 提供不同類型的導覽，協助您在大型裝置上提供更優質的使用者體驗。
您可以進一步瞭解 Android 大螢幕應用程式品質指南，並參閱 Reply 範例，瞭解可自動調整的無障礙設計。
瞭解詳情
如要進一步瞭解 Compose 中的材質主題設定，請參閱下列資源：
範例應用程式
文件
API 參考資料和原始碼
影片
為您推薦
- 注意：系統會在 JavaScript 關閉時顯示連結文字
- 在 Compose 中從 Material 2 遷移至 Material 3
- Compose 中的質感設計 2
- Compose 中的自訂設計系統