この記事は 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 ライブラリを使う必要があります。これらは、モバイルアプリで使っていたライブラリとは異なります。
その違いを明らかにするため、次に比較表を示します。
1.マテリアル リップルやマテリアル アイコンなどの他のマテリアル関連のライブラリは、Wear Compose Material ライブラリで拡張されているので、今後も使い続けることができます。
厳密には、Wear OS でモバイルの依存関係を使うことも可能ですが、最適な操作ができるように、Wear 専用のバージョンを使うことを常にお勧めしています。
注: 今後のリリースで、Wear 用の Composable をさらに追加する予定です。足りないものがあると感じた方は、ぜひお知らせください。
|
次に示すのは、build.gradle ファイルの例です。
// 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
すぐに使い始めることができる Composable をいくつか紹介しましょう。
原則として、多くの Wear の Composable はモバイル版と同等で、同じコードで利用できます。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),
)
}
上のコードは、モバイル版ととてもよく似ています。ただし、作成されるのは、Wear OS に最適化されたバージョンのボタンです。つまり、Wear OS マテリアル ガイドラインに沿うため、円形で ButtonDefaults (英語) によってサイズが決まるボタンになります。
次に示すのは、ライブラリに含まれるいくつかの Composable の例です。
*以下のリンクは全て英語です。
加えて、Wear の操作性を改善できる新しい Composable もたくさん導入しています。
さらに、Wear に最適化されたリスト用の Composable として、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(/*...*/) { /*...*/ }
}
}
スワイプして消す
Wear には専用のバージョンの Box である 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")
}
}
次に示すのは、もう少し複雑な動作の例です。
Navigation
ついに、Navigation Composable の SwipeDismissableNavHost(英語) が提供されます。これは、モバイル版の NavHost と同じように動作しますが、スワイプして消す操作がすぐに使えるようになっています（実際には、内部的に SwipeToDismissBox (英語) が使われています）。
次に例を示します（コード）。
Scaffold
Scaffold(英語) は、モバイル版と同じように、画面によく使われるパターンを適用する際に役立つレイアウト構造を提供します。ただし、アプリバー、FAB、ドロワーの代わりに、Time、Vignette、スクロールと位置のインジケーターなどのトップレベルのコンポーネントを含む Wear 専用のレイアウトがサポートされます。
*以下のリンクは全て英語です。
コードは、モバイル版とほとんど同じです。
スタートガイド
Jetpack Compose を Wear OS に導入し、時計での開発が迅速かつ簡単になるのがとても楽しみです。早速アプリを作ってみたい方は、クイック スタートガイド (英語)をご覧ください。実際に動作する例（簡単なものから複雑なものまで）を見てみたい方は、サンプル リポジトリをご覧ください。
デベロッパー プレビューは、API に皆さんの要望を反映させるチャンスです。ぜひ、こちらからフィードバックを共有するか、Slack の #compose-wear チャンネルに参加して (英語)お知らせください！
Reviewed by Tamao Imura - Developer Marketing Manager, Google Play
