アプリのタイルは、あらゆるサイズの Wear OS デバイスで適切に動作し、使用可能な場合は追加のスペースを利用して、小さな画面でも適切に表示されるようにする必要があります。このガイドでは、こうしたユーザー エクスペリエンスを実現するための推奨事項について説明します。
アダプティブ レイアウトの設計原則について詳しくは、設計のガイダンスをご覧ください。
ProtoLayout を使用してレスポンシブ レイアウトを作成する
ProtoLayout Material ライブラリには、タイルの作成に役立つ事前定義されたレイアウトが用意されています。これらのレイアウトは、すでに画面サイズに適応するよう設計されています。
利用可能な正規レイアウトと、それを使用してデザインを作成する方法については、Figma デザイン レイアウトをご覧ください。
ほとんどのユースケースでは、トップレベル レイアウトとして PrimaryLayout
または EdgeContentLayout
をおすすめします。setResponsiveContentInsetEnabled
を使用してレスポンシブ動作を設定します。次に例を示します。
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
ブレークポイントによって差別化されたエクスペリエンスを提供
ディスプレイが大きいほど、追加のコンテンツや機能を導入できます。このような差別化されたエクスペリエンスを実装するには、画面サイズ ブレークポイントを使用して、画面サイズが 225 dp を超える場合に異なるレイアウトを表示します。
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
MultiButtonLayout.Builder()
.addButtonContent(button1)
.addButtonContent(button2)
.addButtonContent(button3)
.apply {
if (deviceParameters.screenHeightDp >= 225) {
addButtonContent(button4)
addButtonContent(button5)
}
}
.build()
)
.setPrimaryLabelTextContent(label)
.setPrimaryChipContent(compactChip)
.build()
設計ガイダンスでは、その他の機会について説明しています。
プレビューを使用してさまざまな画面サイズでタイルをテストする
さまざまな画面サイズでレイアウトをテストすることが重要です。Tile Preview アノテーションを、TilePreviewHelper
クラスと TilePreviewData
クラスとともに使用します。
@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
buildLayout()
).build()
}
)
これにより、Android Studio 内でタイル レイアウトを直接プレビューできます。前述のブレークポイントの例は、プレビュー時に画面スペースに余裕がある場合に追加ボタンがどのように表示されるかを示しています。
ブレークポイントの効果を表示する大小のディスプレイ
詳細な例については、GitHub のメディアタイルのサンプルをご覧ください。