マテリアル 3 Expressive はマテリアル デザインの進化版です。最新のテーマ設定、コンポーネント、ダイナミック カラーなどのパーソナライズ機能が含まれています。

このガイドでは、アプリの Wear Compose Material 2.5（androidx.wear.compose）Jetpack ライブラリから Wear Compose Material 3（androidx.wear.compose.material3）Jetpack ライブラリへの移行に焦点を当てます。

アプローチ

アプリコードを M2.5 から M3 に移行するには、Compose マテリアルの移行に関するスマートフォンのガイダンスで説明されているアプローチに沿って行います。特に、次の点に注意してください。

• 1 つのアプリで M2.5 と M3 の両方を長期的に使用すべきではありません。
• 段階的なアプローチを採用する

依存関係

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

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

implementation("androidx.wear.compose:compose-material3:1.5.0-beta01")

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

Wear Compose Foundation ライブラリ バージョン 1.5.0-beta01 では、マテリアル 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.5.0-beta01")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta01")

テーマ設定

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 = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

色

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
)

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

ダイナミック カラー テーマ設定

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

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

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

タイポグラフィ

M3 のタイポグラフィ システムは M2 とは異なります。M3 のタイポグラフィ システムには次の機能があります。

• 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
)

Flex フォント

Flex Fonts を使用すると、デザイナーは特定のサイズのタイプ幅と太さを指定できます。

テキストのスタイル

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

シェイプ

M3 のシェイプ システムは M2 とは異なります。シェイプ パラメータの数が増えており、名前と 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
)

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

シェイプのモーフィング

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

シェイプ モーフィング動作は、以下のさまざまな丸いボタンのバリエーションとして使用できます。

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

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

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

マテリアル 3 のすべてのコンポーネントの一覧は次のとおりです。

最後に、Wear Compose Foundation ライブラリ バージョン 1.5.0-beta01 の関連コンポーネントの一覧を示します。

ボタン

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

import androidx.wear.compose.material.Chip

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

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

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

M3 では、新しいボタン EdgeButton が導入されました。EdgeButton には、特小、小、中、大の 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 コンポーザブルがスキャフォールドに代わるものです。AppScaffold と ScreenScaffold は、画面の構造をレイアウトし、ScrollIndicator コンポーネントと TimeText コンポーネントの遷移を調整します。

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

アクティビティに 1 つの AppScaffold を宣言し、Screen ごとに ScreenScaffold を使用します。

import androidx.wear.compose.material.Scaffold

Scaffold {...}

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold

AppScaffold {
   // Define the navigation hierarchy within the AppScaffold,
   // such as using SwipeDismissableNavHost.
   SwipeDismissableNavHost(...) {
      composable("home") {
         HomeScreen()
      }
      //other screens
   }
}
fun HomeScreen() {
    val scrollState = rememberScrollState()
    ScreenScaffold(scrollState = scrollState) {
    //rest of the screen code
    }
}

HorizontalPagerIndicator で HorizontalPager を使用している場合は、HorizontalPagerScaffold に移行できます。HorizontalPagerScaffold は AppScaffold 内に配置されます。AppScaffold と HorizontalPagerScaffold は、Pager の構造をレイアウトし、HorizontalPageIndicator コンポーネントと TimeText コンポーネントの遷移を調整します。

HorizontalPagerScaffold は、デフォルトで画面の中央に HorizontalPageIndicator を表示し、Pager がページングされているかどうかに応じて TimeText と HorizontalPageIndicator の表示/非表示を調整します。これは PagerState によって決まります。

また、新しい AnimatedPage コンポーネントもあります。これは、位置に基づいてスケーリングとスクリム エフェクトを使用して、Pager 内のページをアニメーション化します。

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

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

    HorizontalPagerScaffold(pagerState = pagerState) {
       HorizontalPager(
          state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
…
   }
}

最後に、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 コンポーネントのその他の変更については、以下をご覧ください。

SwipeDismissableNavHost

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

TransformingLazyColumn

TransformingLazyColumn は wear.compose.lazy.foundation の一部であり、スクロール中のリストアイテムの拡大縮小アニメーションとモーフィング アニメーションのサポートを追加して、ユーザー エクスペリエンスを向上させます。

ScalingLazyColumn と同様に、rememberTransformingLazyColumnState() を使用して、コンポジション全体で記憶される TransformingLazyColumnState を作成します。

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

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

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
   ScreenScaffold(state) { contentPadding ->
      TransformingLazyColumn(state = state, contentPadding = contentPadding) {
         items(count = 50) {
            Button(
               onClick = {},
               modifier =
                        Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Item $it")
                    }
                }
            }
        }
    }

参考リンク

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

サンプル

GitHub の Material3 ブランチの Wear OS サンプル

Wear OS 向け Compose の Codelab

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

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

デザイン

• 設計ガイダンス