Wear OS 向け Compose でマテリアル 2.5 からマテリアル 3 に移行する

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 移行のスマートフォン向けガイダンスでの説明と同様のアプローチに従います。特に、次の点に注意してください。

• 1 つのアプリで M2.5 と M3 の両方を長期的に使用すべきではありません。
• Horologist コンポーザブル、Compose レイアウト、Compose マテリアル ライブラリは使用しないでください。代わりに、M3 のコンポーネントを使用してください。
• 段階的アプローチを採用します。

依存関係

M3 には、M2.5 とは別個のパッケージとバージョンがあります。

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:1.6.0")

最新の M3 バージョンについては、Wear Compose Material 3 のリリースページをご覧ください。

Wear Compose Foundation ライブラリ バージョン 1.6.0 では、Material 3 コンポーネントと連携するように設計された新しいコンポーネントがいくつか導入されました。同様に、Wear OS 6（API レベル 36）以降で実行されている場合、Wear Compose Navigation ライブラリの SwipeDismissableNavHost のアニメーションが更新されます。Wear Compose Material 3 バージョンに更新する際は、Wear Compose Foundation ライブラリと Navigation ライブラリも更新することをおすすめします。

implementation("androidx.wear.compose:compose-foundation:1.6.0")
implementation("androidx.wear.compose:compose-navigation:1.6.0")

テーマ

テーマ コンポーザブルは M2.5 と M3 のどちらでも MaterialTheme という名前ですが、インポート パッケージとパラメータが異なります。M3 では、Colors パラメータの名前が ColorScheme に変更され、トランジションを実装するために MotionScheme が導入されました。

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
    colors = AppColors,
    typography = AppTypography,
    shapes = AppShapes,
    content = content
)

import androidx.wear.compose.material3.MaterialTheme
// ...
    MaterialTheme(
        colorScheme = ColorScheme(),
        typography = Typography(),
        shapes = Shapes(),
        motionScheme = MotionScheme.standard(),
        content = { /*content here*/ }
    )
Theme.kt

色

M3 のカラーシステムは M2.5 とは大きく異なります。カラー パラメータの数が増えており、名前と M3 コンポーネントへのマッピングが異なります。これは、Compose では、M2.5 の Colors クラス、M3 の ColorScheme クラス、および関連する関数に適用されます。

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme
// ...
    val appColorScheme: ColorScheme = ColorScheme(
        // M3 ColorScheme parameters
    )
Color.kt

次の表に、M2.5 と M3 の主な違いを示します。

動的なカラーテーマ設定

M3 の新機能にダイナミック カラーテーマ設定があります。ユーザーがウォッチ フェイスの色を変更すると、UI の色もそれに合わせて変更されます。

dynamicColorScheme 関数を使用してダイナミック カラーパターンを実装し、ダイナミック カラーパターンが使用できない場合にフォールバックとして defaultColorScheme を指定します。

@Composable
fun myApp() {
    val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
    MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {}
}

internal val myBrandColors: ColorScheme = ColorScheme( /* Specify colors here */)
Color.kt

タイポグラフィ

M3 のタイポグラフィ システムは M2.5 とは異なり、次の機能が含まれています。

• 9 つの新しいテキスト スタイル
• フレックス フォント。さまざまな太さ、幅、丸みに対して文字スケールをカスタマイズできます。

• AnimatedText（フレックス フォントを使用）

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
    // M3 TextStyle parameters
)
Typography.kt

フレックス フォント

フレックス フォントを使用すると、特定のサイズに対して文字幅と太さを指定できます。

テキストのスタイル

M3 では、次の TextStyle を使用できます。これらは、さまざまな M3 コンポーネントでデフォルトで使用されます。

図形

M3 のシェイプ システムは M2.5 とは異なります。シェイプ パラメータの数が増えており、名前と M3 コンポーネントへのマッピングが異なります。次のシェイプ サイズを使用できます。

• 特小
• 小
• 中
• 大
• 特大

これは、Compose では、M2 の Shapes クラスと M3 の Shapes クラスに適用されます。

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
    // M3 Shapes parameters
)
Shape.kt

Compose で Material 2 から Material 3 に移行するのシェイプ パラメータ マッピングを起点として使用します。

シェイプ モーフィング

M3 では、シェイプ モーフィングが導入されました。シェイプが操作に応じてモーフィングするようになりました。

シェイプ モーフィング動作は、いくつかの丸いボタンのバリエーションとして利用できます。シェイプ モーフィングをサポートするボタンのリストは次のとおりです。

コンポーネントとレイアウト

M2.5 のコンポーネントとレイアウトのほとんどは M3 でも提供されています。ただし、一部の M3 コンポーネントとレイアウトは M2.5 に存在しませんでした。さらに、一部の M3 コンポーネントには、M2.5 の同等のコンポーネントよりも多くのバリエーションがあります。

コンポーネントによっては特別な考慮が必要ですが、出発点として次の関数マッピングを使用することをおすすめします。

Material 3 のコンポーネントの完全なリストは次のとおりです。

最後に、Wear Compose Foundation ライブラリの関連コンポーネントのリストを示します。

ボタン

M3 のボタンは M2.5 とは異なります。M2.5 チップはボタンに置き換えられました。Button の実装では、Text、maxLines、textAlign のデフォルト値が提供されます。これらのデフォルト値は、Text 要素でオーバーライドできます。

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

//M3 Buttons
Button(onClick = { }){}
CompactButton(onClick = { }){}
IconButton(onClick = { }){}
TextButton(onClick = { }){}
Button.kt

M3 には、新しいボタンのバリエーションもあります。それらについては、Compose Material 3 API リファレンスの概要でご確認ください。

M3 では、新しいボタン EdgeButton が導入されています。EdgeButton には、特小、小、中、大の 4 つのサイズがあります。EdgeButton 実装では、サイズに応じて maxLines のデフォルト値が提供されます。この値はカスタマイズできます。

TransformingLazyColumn または ScalingLazyColumn を使用している場合は、EdgeButton を ScreenScaffold に渡して、最終的なリストアイテムとして EdgeButton を追加するのではなく、スクロールに合わせてシェイプが変化するようにします。ScreenScaffold と TransformingLazyColumn で EdgeButton を使用する方法については、次のコードをご覧ください。

val state = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = state,
    contentPadding =
        rememberResponsiveColumnPadding(
            first = ColumnItemType.ListHeader
        ),
    edgeButton = {
        EdgeButton(
            onClick = { }
        ) {
            Text(stringResource(R.string.show))
        }
    }
){ contentPadding ->
    TransformingLazyColumn(state = state, contentPadding = contentPadding,){
        // additional code here
    }
}
Button.kt

Scaffold

M3 の Scaffold は M2.5 とは異なります。M3 では、AppScaffold と新しい ScreenScaffold コンポーザブルが Scaffold に置き換わりました。AppScaffold と ScreenScaffold は、画面の構造をレイアウトし、ScrollIndicator コンポーネントと TimeText コンポーネントの遷移を調整します。

AppScaffold を使用すると、「スワイプして閉じる」などのアプリ内の遷移中に、TimeText などの静的画面要素を表示したままにできます。​​メイン アプリケーション コンテンツ用のスロットを提供します。通常、SwipeDismissableNavHost などのナビゲーション コンポーネントによって提供されます。

Activity に 1 つの AppScaffold を宣言し、各 Screen に ScreenScaffold を使用します。AppScaffold は、デフォルトの TimeText コンポーネントを画面に追加します。timeText パラメータを使用してカスタマイズする場合は、オーバーライドできます。

import androidx.wear.compose.material.Scaffold

Scaffold {...}

    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
        // ...
Navigation.kt

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")
                            }
                        }
                    }
                }

            }
        }
    }
}
Pager.kt

最後に、M3 では HorizontalPagerScaffold と同じパターンに従う VerticalPagerScaffold が導入されています。

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    ///…
                }
            }
        }
    }
}
Pager.kt

プレースホルダ

M2.5 と M3 の間には API の変更がいくつかあります。Placeholder.PlaceholderDefaults には、次の 2 つの修飾子が用意されています。

• Modifier.placeholder: まだ読み込まれていないコンテンツの代わりに描画される
• プレースホルダ シマー効果 Modifier.placeholderShimmer。データの読み込みを待機している間、アニメーション ループで実行されるプレースホルダ シマー効果を提供します。

Placeholder コンポーネントのその他の変更については、次の表をご覧ください。

SwipeDismissableNavHost

SwipeDismissableNavHost は wear.compose.navigation の一部です。このコンポーネントを M3 で使用すると、M3 MaterialTheme が LocalSwipeToDismissBackgroundScrimColor と LocalSwipeToDismissContentScrimColor を更新します。

TransformingLazyColumn

TransformingLazyColumn は wear.compose.lazy.foundation の一部であり、スクロール中のリスト項目のスケーリングとモーフィングのアニメーションのサポートを追加し、ユーザー エクスペリエンスを向上させます。アプリを ScalingLazyColumn から TransformingLazyColumn に移行することを強くおすすめします

ScalingLazyColumn と同様に、コンポジション間で記憶される TransformingLazyColumnState を作成するための rememberTransformingLazyColumnState() を提供します。

スケーリング アニメーションとモーフィング アニメーションを追加するには、各リストアイテムに次のコードを追加します。

• Modifier.transformedHeight。TransformationSpec を使用してアイテムの変換後の高さを計算できます。さらなるカスタマイズが必要な場合を除き、rememberTransformationSpec() を使用できます。
• SurfaceTransformation

リストの上部と下部のパディングが正しいことを確認するには、minimumVerticalContentPadding 修飾子を使用します。

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

参考リンク

Compose における M2.5 から M3 への移行について詳しくは、以下の参考情報をご覧ください。

サンプル

• GitHub の Wear OS サンプル
• Wear OS 向け Compose の Codelab
• Jetcaster サンプル

API リファレンスとソースコード

• Compose Material 3 API リファレンス
• ソースコード内の Compose Material 3 サンプル

デザイン

• デザイン ガイダンス