Material 3 Expressive はマテリアル デザインの進化版です。最新のテーマ設定、コンポーネント、パーソナライズ機能（ダイナミック カラーなど）などが含まれています。
このガイドでは、アプリの Wear Compose Material 2.5（androidx.wear.compose）Jetpack ライブラリから Wear Compose Material 3（androidx.wear.compose.material3）Jetpack ライブラリへの移行に焦点を当てます。
アプローチ
アプリコードを M2.5 から M3 に移行するには、Compose Material の移行に関するスマートフォンのガイダンスで説明されているアプローチと同じ方法を使用します。特に、次の点に注意してください。
依存関係
M3 には、M2.5 とは別個のパッケージとバージョンがあります。
M2.5
implementation("androidx.wear.compose:compose-material:1.4.0")
M3
implementation("androidx.wear.compose:compose-material3:1.6.0-alpha03")
最新の M3 バージョンについては、Wear Compose Material 3 のリリースページをご覧ください。
Wear Compose Foundation ライブラリ バージョン 1.6.0-alpha03 では、Material 3 コンポーネントと連携するように設計された新しいコンポーネントが導入されました。同様に、Wear Compose Navigation ライブラリの SwipeDismissableNavHost は、Wear OS 6（API レベル 36）以降で実行されるとアニメーションが更新されます。Wear Compose Material 3 バージョンに更新する際は、Wear Compose Foundation ライブラリと Navigation ライブラリも更新することをおすすめします。
implementation("androidx.wear.compose:compose-foundation:1.6.0-alpha03")
implementation("androidx.wear.compose:compose-navigation:1.6.0-alpha03")
テーマ
テーマ コンポーザブルは 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 色 |
なし |
新しいダイナミック カラーテーマ設定 |
なし |
表現の幅を広げる新しい第 3 の色 |
ダイナミック カラー テーマ設定
M3 の新機能に動的なカラーテーマ設定があります。ユーザーが文字盤の色を変更すると、UI の色もそれに合わせて変更されます。
dynamicColorScheme 関数を使用してダイナミック カラーパターンを実装し、ダイナミック カラーパターンが使用できない場合にフォールバックとして defaultColorScheme を指定します。
@Composable
fun myApp() {
val myColorScheme = myBrandColors()
val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}
タイポグラフィ
M3 のタイポグラフィ システムは M2 とは異なり、次の機能が含まれています。
- 9 つの新しいテキスト スタイル
- さまざまな太さ、幅、丸みでタイプスケールをカスタマイズできるフレキシブル フォント
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 Fonts
Flex Fonts を使用すると、特定のサイズに対して文字幅と太さを指定できます。
テキストのスタイル
M3 では、次の TextStyle を使用できます。これらは、M3 のさまざまなコンポーネントでデフォルトで使用されます。
タイポグラフィ |
TextStyle |
|---|---|
ディスプレイ |
displayLarge、displayMedium、displaySmall |
タイトル |
titleLarge、titleMedium、titleSmall |
ラベル |
labelLarge、labelMedium、labelSmall |
本文 |
bodyLarge、bodyMedium、bodySmall、bodyExtraSmall |
数字 |
numeralExtraLarge、numeralLarge、numeralMedium、numeralSmall、numeralExtraSmall |
Arc |
arcLarge、arcMedium、arcSmall |
シェイプ
M3 のシェイプ システムは M2 とは異なります。シェイプ パラメータの数が増えており、名前と M3 コンポーネントへのマッピングが異なります。次の図形のサイズを使用できます。
- 極小
- 小
- 中
- 大
- 特大
これは、Compose では、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
)
Compose でマテリアル 2 からマテリアル 3 に移行するのシェイプ パラメータ マッピングを出発点として使用します。
シェイプ モーフィング
M3 では、シェイプ モーフィングが導入されました。シェイプが操作に応じてモーフィングするようになりました。
シェイプ モーフィング動作は、いくつかの丸いボタンのバリエーションとして利用できます。シェイプ モーフィングをサポートするボタンのリストは次のとおりです。
ボタン |
シェイプ モーフィング関数 |
|---|---|
|
IconButtonDefaults.animatedShape() は、押されたときにアイコンボタンをアニメーション化します。 |
|
IconToggleButtonDefaults.animatedShape() は、押下時にアイコン切り替えボタンをアニメーション化し、 IconToggleButtonDefaults.variantAnimatedShapes() は、押下時とチェック/チェック解除時にアイコン切り替えボタンをアニメーション化します |
|
TextButtonDefaults.animatedShape() は、押されたときにテキスト ボタンをアニメーション化します。 |
|
TextToggleButtonDefaults.animatedShapes() は、押下時にテキスト トグルをアニメーション化し、TextToggleButtonDefaults.variantAnimatedShapes() は、押下時とチェック/チェック解除時にテキスト トグルをアニメーション化します。 |
コンポーネントとレイアウト
M2.5 のコンポーネントとレイアウトのほとんどは M3 でも提供されています。ただし、M3 のコンポーネントとレイアウトの一部は M2.5 に存在しませんでした。さらに、一部の M3 コンポーネントには、M2.5 の同等のコンポーネントよりも多くのバリエーションがあります。
コンポーネントによっては特別な考慮が必要ですが、出発点として次の関数マッピングを使用することをおすすめします。
Material 3 のコンポーネントの完全なリストは次のとおりです。
マテリアル 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.6.0-alpha03 で初めて導入された Wear Compose Foundation ライブラリの関連コンポーネントのリストを示します。
Wear Compose Foundation 1.6.0-alpha03 |
|
|---|---|
アプリケーション内のコンポーザブルにアノテーションを付け、コンポジションのアクティブな部分を追跡してフォーカスを調整するために使用されます。 |
|
Compose Foundation コンポーネントをベースに構築された水平スクロール ページャ。パフォーマンスを向上させ、Wear OS ガイドラインに準拠するための Wear 固有の拡張機能が備わっています。 |
|
Compose Foundation コンポーネントをベースに構築された縦スクロール ページャー。パフォーマンスを向上させ、Wear OS ガイドラインに準拠するための Wear 固有の機能強化が施されています。 |
|
|
|
ボタン
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 には、新しいボタンのバリエーションもあります。それらについては、Compose Material 3 API リファレンスの概要でご確認ください。
M3 には新しいボタン EdgeButton が導入されています。EdgeButton には、XS、S、M、L の 4 つのサイズがあります。EdgeButton 実装では、サイズに応じて maxLines のデフォルト値が提供されます。この値はカスタマイズできます。
TransformingLazyColumn と ScalingLazyColumn を使用している場合は、EdgeButton を ScreenScaffold に渡して、スクロールに合わせて形状が変化するようにします。ScreenScaffold と TransformingLazyColumn で EdgeButton を使用する方法については、次のコードをご覧ください。
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 と新しい ScreenScaffold コンポーザブルが Scaffold に置き換わりました。AppScaffold と ScreenScaffold は、画面の構造をレイアウトし、ScrollIndicator コンポーネントと TimeText コンポーネントの遷移を調整します。
AppScaffold を使用すると、「スワイプして閉じる」などのアプリ内の遷移中に、TimeText などの静的画面要素を表示したままにできます。メイン アプリケーション コンテンツ用のスロットを提供します。通常、SwipeDismissableNavHost などのナビゲーション コンポーネントによって提供されます。
Activity に 1 つの AppScaffold を宣言し、各 Screen に ScreenScaffold を使用します。
M2.5
import androidx.wear.compose.material.Scaffold
Scaffold {...}
M3
AppScaffold { val navController = rememberSwipeDismissableNavController() SwipeDismissableNavHost( navController = navController, startDestination = "message_list" ) { composable("message_list") { MessageList(onMessageClick = { id -> navController.navigate("message_detail/$id") }) } composable("message_detail/{id}") { MessageDetail(id = it.arguments?.getString("id")!!) } } } } // Implementation of one of the screens in the navigation @Composable fun MessageDetail(id: String) { // .. Screen level content goes here val scrollState = rememberTransformingLazyColumnState() val padding = rememberResponsiveColumnPadding( first = ColumnItemType.BodyText ) ScreenScaffold( scrollState = scrollState, contentPadding = padding ) { scaffoldPaddingValues -> // Screen content goes here
HorizontalPagerIndicator で HorizontalPager を使用している場合は、HorizontalPagerScaffold に移行できます。HorizontalPagerScaffold は AppScaffold 内に配置されます。AppScaffold と HorizontalPagerScaffold は、Pager の構造をレイアウトし、HorizontalPageIndicator コンポーネントと TimeText コンポーネントの遷移を調整します。
HorizontalPagerScaffold は、デフォルトで画面の中央付近に HorizontalPageIndicator を表示し、Pager がページングされているかどうかに応じて TimeText と HorizontalPageIndicator の表示と非表示を調整します。これは PagerState によって決定されます。
また、新しい AnimatedPage コンポーネントもあります。これは、Pager 内のページを、その位置に基づいてスケーリングとスクリム効果でアニメーション化します。
AppScaffold { val pagerState = rememberPagerState(pageCount = { 10 }) val columnState = rememberTransformingLazyColumnState() val contentPadding = rememberResponsiveColumnPadding( first = ColumnItemType.ListHeader, last = ColumnItemType.BodyText, ) HorizontalPagerScaffold(pagerState = pagerState) { HorizontalPager( state = pagerState, ) { page -> AnimatedPage(pageIndex = page, pagerState = pagerState) { ScreenScaffold( scrollState = columnState, contentPadding = contentPadding ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier.fillMaxWidth() ) { Text(text = "Pager sample") } } item { if (page == 0) { Text(text = "Page #$page. Swipe right") } else{ Text(text = "Page #$page. Swipe left and right") } } } } } } } }
最後に、M3 では HorizontalPagerScaffold と同じパターンに従う VerticalPagerScaffold が導入されています。
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 {
…
}
}
プレースホルダ
M2.5 と M3 の間には API の変更がいくつかあります。Placeholder.PlaceholderDefaults には、次の 2 つの修飾子が用意されています。
Modifier.placeholder: まだ読み込まれていないコンテンツの代わりに描画される- プレースホルダ シマー効果
Modifier.placeholderShimmer。データの読み込みを待機している間、アニメーション ループで実行されるプレースホルダ シマー効果を提供します。
Placeholder コンポーネントのその他の変更については、次の表をご覧ください。
M2.5 |
M3 |
|---|---|
|
削除されている |
|
削除されている |
|
名前が |
|
削除されている |
|
が削除されました |
|
削除されている |
|
削除されている |
SwipeDismissableNavHost
SwipeDismissableNavHost は wear.compose.navigation の一部です。このコンポーネントを M3 で使用すると、M3 MaterialTheme が LocalSwipeToDismissBackgroundScrimColor と LocalSwipeToDismissContentScrimColor を更新します。
TransformingLazyColumn
TransformingLazyColumn は wear.compose.lazy.foundation の一部であり、スクロール中のリスト項目のスケーリングとモーフィングのアニメーションのサポートを追加し、ユーザー エクスペリエンスを向上させます。
ScalingLazyColumn と同様に、コンポジション間で記憶される TransformingLazyColumnState を作成するための rememberTransformingLazyColumnState() を提供します。
スケーリング アニメーションとモーフィング アニメーションを追加するには、各リストアイテムに次のコードを追加します。
Modifier.transformedHeight。TransformationSpecを使用してアイテムの変換後の高さを計算できます。さらなるカスタマイズが必要な場合を除き、rememberTransformationSpec()を使用できます。SurfaceTransformation
val columnState = rememberTransformingLazyColumnState() val contentPadding = rememberResponsiveColumnPadding( first = ColumnItemType.ListHeader, last = ColumnItemType.Button, ) val transformationSpec = rememberTransformationSpec() ScreenScaffold( scrollState = columnState, contentPadding = contentPadding ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec), transformation = SurfaceTransformation(transformationSpec) ) { Text(text = "Header") } } // ... other items item { Button( modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec), transformation = SurfaceTransformation(transformationSpec), onClick = { /* ... */ }, icon = { Icon( imageVector = Icons.Default.Build, contentDescription = "build", ) }, ) { Text( text = "Build", maxLines = 1, overflow = TextOverflow.Ellipsis, ) } } } }
参考リンク
Compose における M2.5 から M3 への移行について詳しくは、以下の参考情報をご覧ください。