この記事は Jeremy Walker による Android Developers Blog の記事 " Compose for Wear OS now in Developer Preview! " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
今年の Google I/O では、Jetpack Compose の最高の機能を Wear OS に導入することを発表しました。そして本日、好評だった数々のアルファ版リリースを経て、Compose for Wear OS がデベロッパー プレビュー版になりました。
Compose を使うと、UI 開発がシンプルになり、時間も短縮できます。Material You をビルトインでサポートした Compose for Wear OS も同様で、少ないコードで美しいアプリを作成できます。
さらに、Jetpack Compose で学んだモバイルアプリの開発手法は、Wear OS 版でもそのまま利用できます。モバイル版と同じように、ぜひ早速試してみてください。ベータ版のリリース前に、ライブラリの反復作業の早い段階で、皆さんのフィードバックを組み込みたいと考えています。
この記事では、私たちが作成した主な Composable を確認するとともに、実際に利用する際に役立つリソースをお知らせします。
それでは始めましょう。
Wear 関連の変更の大半は、アーキテクチャ レイヤーの上層部で行われます。
つまり、Jetpack Compose で既に使っている多くの依存関係は、Wear OS をターゲットにしても変更する必要はないということです。たとえば、UI、Runtime、Compiler、Animation の依存関係は同じです。
ただし、Wear OS の適切な Material、Navigation、Foundation ライブラリを使う必要があります。これらは、モバイルアプリで使っていたライブラリとは異なります。
その違いを明らかにするため、次に比較表を示します。
Wear OS の依存関係
(androidx.wear.*)
関係
モバイルの依存関係
(androidx.*)
androidx.wear.compose:compose-material
置換
androidx.compose.material:material ₁
androidx.wear.compose:compose-navigation
androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation
追加
androidx.compose.foundation:foundation
1.マテリアル リップルやマテリアル アイコンなどの他のマテリアル関連のライブラリは、Wear Compose Material ライブラリで拡張されているので、今後も使い続けることができます。
厳密には、Wear OS でモバイルの依存関係を使うことも可能ですが、最適な操作ができるように、Wear 専用のバージョンを使うことを常にお勧めしています。
注: 今後のリリースで、Wear 用の Composable をさらに追加する予定です。足りないものがあると感じた方は、ぜひお知らせください。
build.gradle
// Example project in app/build.gradle filedependencies { // Standard Compose dependencies... // Wear specific Compose Dependencies // Developer Preview starts with Alpha 07, with new releases coming soon. def wear_version = "1.0.0-alpha07" implementation "androidx.wear.compose:compose-material:$wear_version" implementation "androidx.wear.compose:compose-foundation:$wear_version" // For navigation within your app... implementation "androidx.wear.compose:compose-navigation:$wear_version" // Other dependencies...}
// Example project in app/build.gradle file
dependencies {
// Standard Compose dependencies...
// Wear specific Compose Dependencies
// Developer Preview starts with Alpha 07, with new releases coming soon.
def wear_version = "1.0.0-alpha07"
implementation "androidx.wear.compose:compose-material:$wear_version"
implementation "androidx.wear.compose:compose-foundation:$wear_version"
// For navigation within your app...
implementation "androidx.wear.compose:compose-navigation:$wear_version"
// Other dependencies...
}
適切な Wear の Material、Foundation、Navigation の依存関係を追加すれば、開発の準備が整います。
すぐに使い始めることができる Composable をいくつか紹介しましょう。
原則として、多くの Wear の Composable はモバイル版と同等で、同じコードで利用できます。MaterialTheme (英語) で色、タイポグラフィ、形状のスタイルを設定するコードも、モバイル版と同一です。
MaterialTheme
たとえば、Wear OS でボタンを作るコードは次のようになります。
Button( modifier = Modifier.size(ButtonDefaults.LargeButtonSize), onClick = { /*...*/ }, enabled = enabledState) { Icon( painter = painterResource(id = R.drawable.ic_airplane), contentDescription = "phone", modifier = Modifier .size(24.dp) .wrapContentSize(align = Alignment.Center), )}
Button(
modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
onClick = { /*...*/ },
enabled = enabledState
) {
Icon(
painter = painterResource(id = R.drawable.ic_airplane),
contentDescription = "phone",
modifier = Modifier
.size(24.dp)
.wrapContentSize(align = Alignment.Center),
)
上のコードは、モバイル版ととてもよく似ています。ただし、作成されるのは、Wear OS に最適化されたバージョンのボタンです。つまり、Wear OS マテリアル ガイドラインに沿うため、円形で ButtonDefaults (英語) によってサイズが決まるボタンになります。
ButtonDefaults
次に示すのは、ライブラリに含まれるいくつかの Composable の例です。
*以下のリンクは全て英語です。
Button
Card
Icon
Text
加えて、Wear の操作性を改善できる新しい Composable もたくさん導入しています。
Chip
ToggleChip
BasicCurvedText
TimeText
さらに、Wear に最適化されたリスト用の Composable として、ScalingLazyColumn (英語) も提供します。これは LazyColumn を拡張したもので、丸いウォッチフェイスに合うように、スケーリングや透明度が変更されています。下のアプリでは、画面の上下の部分でコンテンツが縮んだりフェードしたりして、読みやすくなっていることがわかります。
ScalingLazyColumn
LazyColumn
コードを見ると、LazyColumn と同じであることがわかります。ただ名前が違うだけです。
val scalingLazyListState: ScalingLazyListState = rememberScalingLazyListState() ScalingLazyColumn( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(6.dp), state = scalingLazyListState,) { items(messageList.size) { message -> Card(/*...*/) { /*...*/ } } item { Card(/*...*/) { /*...*/ } }}
rememberScalingLazyListState()
ScalingLazyColumn(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(6.dp),
state = scalingLazyListState,
items(messageList.size) { message ->
Card(/*...*/) { /*...*/ }
item {
Wear には専用のバージョンの Box である SwipeToDismissBox (英語) が搭載されています。これにより、スワイプして消す操作（モバイルの戻るボタンや戻るジェスチャーと同じ）が追加され、すぐに使うことができます。
SwipeToDismissBox
次に示すのは、簡単なコードの例です。
// Requires state (different from Box).val state = rememberSwipeToDismissBoxState() SwipeToDismissBox( modifier = Modifier.fillMaxSize(), state = state) { swipeBackgroundScreen -> // Can render a different composable in the background during swipe. if (swipeBackgroundScreen) { /* ... */ Text(text = "Swiping Back Content") } else { /* ... */ Text( text = "Main Content") }}
val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
state = state
) { swipeBackgroundScreen ->
// Can render a different composable in the background during swipe.
if (swipeBackgroundScreen) {
/* ... */
Text(text = "Swiping Back Content")
} else {
Text( text = "Main Content")
次に示すのは、もう少し複雑な動作の例です。
ついに、Navigation Composable の SwipeDismissableNavHost(英語) が提供されます。これは、モバイル版の NavHost と同じように動作しますが、スワイプして消す操作がすぐに使えるようになっています（実際には、内部的に SwipeToDismissBox (英語) が使われています）。
SwipeDismissableNavHost
次に例を示します（コード）。
Scaffold(英語) は、モバイル版と同じように、画面によく使われるパターンを適用する際に役立つレイアウト構造を提供します。ただし、アプリバー、FAB、ドロワーの代わりに、Time、Vignette、スクロールと位置のインジケーターなどのトップレベルのコンポーネントを含む Wear 専用のレイアウトがサポートされます。
Scaffold
Vignette
PositionIndicator
コードは、モバイル版とほとんど同じです。
Jetpack Compose を Wear OS に導入し、時計での開発が迅速かつ簡単になるのがとても楽しみです。早速アプリを作ってみたい方は、クイック スタートガイド (英語)をご覧ください。実際に動作する例（簡単なものから複雑なものまで）を見てみたい方は、サンプル リポジトリをご覧ください。
デベロッパー プレビューは、API に皆さんの要望を反映させるチャンスです。ぜひ、こちらからフィードバックを共有するか、Slack の #compose-wear チャンネルに参加して (英語)お知らせください！
Reviewed by Tamao Imura - Developer Marketing Manager, Google Play
