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 |
---|---|
|
の名前が |
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 |
|
新規 |
最後に、Wear Compose Foundation ライブラリ バージョン 1.5.0-beta01 の関連コンポーネントのリストを示します。
Wear Compose Foundation 1.5.0-beta |
|
---|---|
アプリケーション内のコンポーザブルにアノテーションを付け、コンポジションのアクティブな部分を追跡してフォーカスを調整するために使用されます。 |
|
Compose Foundation コンポーネントをベースに構築された水平スクロール ページャ。パフォーマンスを向上させ、Wear OS ガイドラインに準拠するための Wear 固有の拡張機能が備わっています。 |
|
Compose Foundation コンポーネントをベースに構築された縦スクロール ページャー。パフォーマンスを向上させ、Wear OS ガイドラインに準拠するための Wear 固有の機能強化が施されています。 |
|
ScalingLazyColumn の代わりに使用して、各アイテムにスクロール変換効果を追加できます。 |
|
ボタン
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
には、特小、小、中、大の 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
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
コンポーネントのその他の変更については、以下をご覧ください。
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
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 への移行について詳しくは、以下の参考情報をご覧ください。