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"
新增依附元件後，即可開始在應用程式中加入質感設計系統，包括顏色、字體排版和形狀。
實驗性 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 顏色。舉例來說，表面可與 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 主題設定，可協助您打造出美觀的 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 3 提供各種元件套件，例如按鈕、應用程式列、導覽元件，專為不同用途和螢幕大小而設計。
導覽元件
Material Design 也提供多個導覽元件，協助您根據不同的螢幕大小和狀態實作導覽功能。
NavigationBar 適用於小型裝置，以便指定 5 個以下的目的地：
NavigationBar(modifier = Modifier.fillMaxWidth()) {
Destinations.entries.forEach { replyDestination ->
NavigationBarItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
NavigationRail 用於中小型大小平板電腦或橫向模式的手機。這個 API 可為使用者提供人體工學，並改善這些裝置的使用者體驗。
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 Ripple 在 Android 系統中使用平台 RippleDrawable，因此 Android 12 以上版本適用於所有 Material 元件。
過度捲動
過度捲動現在會在捲動容器的邊緣使用延展效果。在捲動容器可組合項中 (例如 LazyColumn、LazyRow 和 LazyVerticalGrid)，無論 API 級別為何，「Stretch Overscroll」預設為開啟。
無障礙功能
Material 元件內建的無障礙功能標準旨在為產品設計奠定基礎。瞭解產品的無障礙設計可以提升所有使用者的可用性，包括視障、失明、聽障、認知障礙、動作障礙或環境障礙 (例如手臂損壞) 的使用者。
顏色無障礙
動態色彩的設計符合無障礙標準，用於色彩對比。色調調色盤系統是預設存取任何色彩配置的關鍵。
Material 的色彩系統提供標準色調值和測量結果，可用於達到一目瞭然的對比度。
所有 Material Design 元件和動態主題設定都已使用一組調色盤中的上述顏色角色，並選取符合無障礙需求。不過，如果您要自訂元件，請務必使用適當的顏色角色，並避免不相符。
在原色上使用 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 提供不同類型的導覽，協助您在大型裝置上提供更優質的使用者體驗。
進一步瞭解 Android 的大螢幕指南，並參閱 Reply 範例，瞭解自動調整式和無障礙設計。
瞭解詳情
如要進一步瞭解 Compose 中的 Material Design 主題設定，請參閱下列資源：
範例應用程式
文件
API 參考資料和原始碼
影片
為您推薦
- 注意：系統會在 JavaScript 關閉時顯示連結文字
- 在 Compose 中從 Material 2 遷移至 Material 3
- Compose 中的 Material Design 2
- Compose 中的自訂設計系統