アプリのタイルは、あらゆるサイズの Wear OS デバイスで適切に機能します。 可能な場合は追加のスペースを利用できるうえに、小さいサイズでも見栄えよく表示されます できます。このガイドでは、このようなユーザーを実現するための推奨事項を示します。 体験できます
アダプティブ レイアウトのデザイン原則について詳しくは、 設計ガイダンスをご覧ください。
ProtoLayout を使用してレスポンシブ レイアウトを作成する
ProtoLayout Material ライブラリには、次の作業に役立つ事前定義されたレイアウトが用意されています。 タイルを作成します。これらのレイアウトは、すでに画面に適応するようにデザインされています 指定します。
Figma デザイン レイアウトをご覧ください。このレイアウトでは、 使用可能なレイアウトと、それを使用したデザインの作成方法:
トップレベルには PrimaryLayout または EdgeContentLayout をおすすめします
レイアウトが用意されています。以下を使用してレスポンシブ動作を設定します。
setResponsiveContentInsetEnabled。例:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
ブレークポイントによって差別化されたエクスペリエンスを提供
ProtoLayout Material ライブラリのレイアウトは、すでにレスポンシブであり、 要素の配置と可視性が維持されます場合によっては 最良の結果を得るために、表示する要素の数を変えることをおすすめします。対象 たとえば、小さなディスプレイには 3 つのボタン、大きなディスプレイには 5 つのボタンを配置できます。 表示されます。
このような差別化されたエクスペリエンスを実装するには、画面サイズを使用します。 あります。画面サイズが 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 のメディアタイルのサンプルをご覧ください。