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 の移行に関する電話ガイダンスで説明されているアプローチと同じアプローチに従います。特に、次の点に注意してください。

依存関係

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

M2.5

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

M3

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

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

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

テーマ設定

テーマ コンポーザブルは 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

Color

の名前が ColorScheme に変更されました

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 では、シェイプ モーフィングが導入されました。シェイプが操作に応じて変化するようになりました。

シェイプ モーフィングの動作は、多くの丸いボタンのバリエーションとして利用できます。以下をご覧ください。

ボタン

シェイプ モーフィング関数

IconButton

IconButtonDefaults.animatedShape() は、押されたときにアイコンボタンをアニメーション化します。

IconToggleButton

IconToggleButtonDefaults.animatedShape() は、押下時にアイコン切り替えボタンをアニメーション化し、

IconToggleButtonDefaults.variantAnimatedShapes() は、押下時とチェック/チェック解除時にアイコン切り替えボタンをアニメーション化します

TextButton

TextButtonDefaults.animatedShape() は、押されたときにテキスト ボタンをアニメーション化します。

TextToggleButton

TextToggleButtonDefaults.animatedShapes() は、押下時にテキスト トグルをアニメーション化し、TextToggleButtonDefaults.variantAnimatedShapes() は、押下時とチェック/チェック解除時にテキスト トグルをアニメーション化します。

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

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

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

マテリアル 2.5

マテリアル 3

androidx.wear.compose.material.dialog.Alert

androidx.wear.compose.material3.AlertDialog

androidx.wear.compose.material.Button

androidx.wear.compose.material3.IconButton または androidx.wear.compose.material3.TextButton

androidx.wear.compose.material.Card

androidx.wear.compose.material3.Card

androidx.wear.compose.material.TitleCard

androidx.wear.compose.material3.TitleCard

androidx.wear.compose.material.AppCard

androidx.wear.compose.material3.AppCard

androidx.wear.compose.material.Checkbox

M3 に同等の API はありません。androidx.wear.compose.material3.CheckboxButton または androidx.wear.compose.material3.SplitCheckboxButton に移行してください

androidx.wear.compose.material.Chip

androidx.wear.compose.material3.Button
androidx.wear.compose.material3.OutlinedButton
androidx.wear.compose.material3.FilledTonalButton
androidx.wear.compose.material3.ChildButton

androidx.wear.compose.material.CompactChip

androidx.wear.compose.material3.CompactButton

androidx.wear.compose.material.InlineSlider

androidx.wear.compose.material3.Slider

androidx.wear.compose.material.LocalContentAlpha

Material 3 の Text または Icon で使用されていないため削除されました

androidx.wear.compose.material.PositionIndicator

androidx.wear.compose.material3.ScrollIndicator

androidx.wear.compose.material.RadioButton

M3 に同等の API はありません。androidx.wear.compose.material3.RadioButton または androidx.wear.compose.material3.SplitRadioButton に移行してください

androidx.wear.compose.material.SwipeToRevealCard

androidx.wear.compose.material3.SwipeToReveal

androidx.wear.compose.material.SwipeToRevealChip

androidx.wear.compose.material3.SwipeToReveal

android.wear.compose.material.Scaffold

androidx.wear.compose material3.AppScaffoldandroidx.wear.compose.material3.ScreenScaffold

androidx.wear.compose.material.SplitToggleChip

M3 に相当するものはありません。androidx.wear.compose.material3.SplitCheckboxButton androidx.wear.compose.material3.SplitSwitchButton、または androidx.wear.compose.material3.SplitRadioButton に移行してください

androidx.wear.compose.material.Switch

M3 に相当するものはありません。androidx.wear.compose.material3.SwitchButton または androidx.wear.compose.material3.SplitSwitchButton に移行してください

androidx.wear.compose.material.ToggleButton

androidx.wear.compose.material3.IconToggleButton または androidx.wear.compose.material3.TextToggleButton

androidx.wear.compose.material.ToggleChip

androidx.wear.compose.material3.CheckboxButton または
androidx.wear.compose.material3.RadioButton または
androidx.wear.compose.material3.SwitchButton

androidx.wear.compose.material.Vignette

Wear OS 向け Material 3 Expressive デザインに含まれていないため削除されました

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

マテリアル 3

Material 2.5 と同等のコンポーネント(M3 で新規でない場合)

androidx.wear.compose.material3.AlertDialog

androidx.wear.compose.material.dialog.Alert

androix.wear.compose.material3.AnimatedPage

新規

androidx.wear.compose.material3.AnimatedText

新規

androidx.wear.compose material3.AppScaffold

android.wear.compose.material.Scaffoldandroidx.wear.compose.material3.ScreenScaffold を使用)

androidx.wear.compose.material3.Button

androidx.wear.compose.material.Chip

androidx.wear.compose.material3.ButtonGroup

新規

androidx.wear.compose.material3.Card

androidx.wear.compose.material.Card

androidx.wear.compose.material3.CheckboxButton

チェックボックスの切り替えコントロールを備えた androidx.wear.compose.material.ToggleChip

androidx.wear.compose.material3.ChildButton

androidx.wear.compose.material.Chip(背景が不要な場合のみ)

androidx.wear.compose.material3.CircularProgressIndicator

androidx.wear.compose.material.CircularProgressIndicator

androidx.wear.compose.material3.CompactButton

androidx.wear.compose.material.CompactChip

androidx.wear.compose.material3.ConfirmationDialog

androidx.wear.compose.material.dialog.Confirmation

androidx.wear.compose.material3.curvedText

androidx.wear.compose.material.curvedText

androidx.wear.compose.material3.DatePicker

新規

androidx.wear.compose.material3.Dialog

androidx.wear.compose.material.dialog.Dialog

androidx.wear.compose.material3.EdgeButton

新規

androidx.wear.compose.material3.FadingExpandingLabel

新規

androidx.wear.compose.material3.FilledTonalButton

色調ボタンの背景が必要な場合は androidx.wear.compose.material.Chip

androidx.wear.compose.material3.HorizontalPageIndicator

androidx.wear.compose.material.HorizontalPageIndicator

androidx.wear.compose.material3.HorizontalPagerScaffold

新規

androidx.wear.compose.material3.Icon

androidx.wear.compose.material.Icon

androidx.wear.compose.material3.IconButton

androidx.wear.compose.material.Button

androidx.wear.compose.material3.IconToggleButton

androidx.wear.compose.material.ToggleButton

androidx.wear.compose.material3.LevelIndicator

新規

androidx.wear.compose.material3.LinearProgressIndicator

新規

androidx.wear.compose.material3.ListHeader

androidx.wear.compose.material.ListHeader

androidx.wear.compose.material3.ListSubHeader

新規

androidx.wear.compose.material3.MaterialTheme

androidx.wear.compose.material.MaterialTheme

androidx.wear.compose.material3.OpenOnPhoneDialog

新規

androidx.wear.compose.material3.Picker

androidx.wear.compose.material.Picker

androidx.wear.compose.material3.PickerGroup

androidx.wear.compose.material.PickerGroup

androix.wear.compose.material3.RadioButton

ラジオボタンの切り替えコントロールを備えた androidx.wear.compose.material.ToggleChip

androidx.wear.compose.material3.ScreenScaffold

android.wear.compose.material.Scaffoldandroidx.wear.compose material3.AppScaffold を使用)

androidx.wear.compose.material3.ScrollIndicator

androidx.wear.compose.material.PositionIndicator

androidx.wear.compose.material3.scrollaway

androidx.wear.compose.material.scrollaway

androidx.wear.compose.material3.SegmentedCircularProgressIndicator

新規

androidx.wear.compose.material3.Slider

androidx.wear.compose.material.InlineSlider

androidx.wear.compose.material3.SplitRadioButton

androidx.wear.compose.material.SplitToggleChip

androidx.wear.compose.material3.SplitCheckboxButton

androidx.wear.compose.material.SplitToggleChip

androidx.wear.compose.material3.SplitSwitchButton

androidx.wear.compose.material.SplitToggleChip

androidx.wear.compose.material3.Stepper

androidx.wear.compose.material.Stepper

androidx.wear.compose.material3.SwipeToDismissBox

androidx.wear.compose.material.SwipeToDismissBox

androidx.wear.compose.material3.SwipeToReveal

androidx.wear.compose.material.SwipeToRevealCardandroidx.wear.compose.material.SwipeToRevealChip

androidx.wear.compose.material3.SwitchButton

スイッチ切り替えコントロールを備えた androidx.wear.compose.material.ToggleChip

androidx.wear.compose.material3.Text

androidx.wear.compose.material.Text

androidx.wear.compose.material3.TextButton

androidx.wear.compose.material.Button

androidx.wear.compose.material3.TextToggleButton

androidx.wear.compose.material.ToggleButton

androidx.wear.compose.material3.TimeText

androidx.wear.compose.material.TimeText

androidx.wear.compose.material3.VerticalPagerScaffold

新規

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

Wear Compose Foundation 1.5.0-beta

androidx.wear.compose.foundation.hierarchicalFocusGroup

アプリケーション内のコンポーザブルにアノテーションを付け、コンポジションのアクティブな部分を追跡してフォーカスを調整するために使用されます。

androidx.compose.foundation.pager.HorizontalPager

Compose Foundation コンポーネントをベースに構築された水平スクロール ページャ。パフォーマンスを向上させ、Wear OS ガイドラインに準拠するための Wear 固有の拡張機能が備わっています。

androidx.compose.foundation.pager.VerticalPager

Compose Foundation コンポーネントをベースに構築された縦スクロール ページャー。パフォーマンスを向上させ、Wear OS ガイドラインに準拠するための Wear 固有の機能強化が施されています。

androidx.wear.foundation.lazy.TransformingLazyColumn

ScalingLazyColumn の代わりに使用して、各アイテムにスクロール変換効果を追加できます。

ボタン

M3 のボタンは M2.5 とは異なります。M2.5 チップはボタンに置き換えられました。Button の実装では、TextmaxLinestextAlign にデフォルト値を指定します。これらのデフォルト値は、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 には、特小、小、中、大の 4 種類のサイズがあります。EdgeButton の実装では、サイズに応じて maxLines のデフォルト値が提供されます。この値はカスタマイズできます。

TransformingLazyColumnScalingLazyColumn を使用している場合は、EdgeButtonScreenScaffold に渡して、スクロールに合わせて形が変わるようにします。ScreenScaffoldTransformingLazyColumnEdgeButton を使用する方法については、以下のコードをご覧ください。

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 に置き換わりました。AppScaffoldScreenScaffold は、画面の構造をレイアウトし、ScrollIndicator コンポーネントと TimeText コンポーネントの遷移を調整します。

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

Activity に 1 つの AppScaffold を宣言し、各 Screen に ScreenScaffold を使用します。

M2.5

import androidx.wear.compose.material.Scaffold

Scaffold {...}

M3

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

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

HorizontalPagerScaffold は、デフォルトで画面の中央付近に HorizontalPageIndicator を表示し、Pager がページングされているかどうかに応じて TimeTextHorizontalPageIndicator の表示/非表示の調整を行います。これは 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 コンポーネントのその他の変更については、以下をご覧ください。

M2.5

M3

PlaceholderState.startPlaceholderAnimation

削除されている

PlaceholderState.placeholderProgression

削除されている

PlaceholderState.isShowContent

名前が !PlaceholderState.isVisible に変更されました

PlaceholderState.isWipeOff

削除されている

PlaceholderDefaults.painterWithPlaceholderOverlayBackgroundBrush

が削除されました

PlaceholderDefaults.placeholderBackgroundBrush

削除されている

PlaceholderDefaults.placeholderChipColors

削除されている

SwipeDismissableNavHost

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

TransformingLazyColumn

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

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

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

  • Modifier.transformedHeightTransformationSpec を使用してアイテムの変換後の高さを計算できます。さらなるカスタマイズが必要な場合を除き、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 への移行について詳しくは、以下の参考情報をご覧ください。

サンプル

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

デザイン