さまざまな画面サイズのタイルを開発する

アプリのタイルは、あらゆるサイズの Wear OS デバイスで適切に動作し、使用可能な場合は追加のスペースを利用して、小さな画面でも適切に表示されるようにする必要があります。このガイドでは、こうしたユーザー エクスペリエンスを実現するための推奨事項について説明します。

アダプティブ レイアウトの設計原則について詳しくは、設計のガイダンスをご覧ください。

ProtoLayout を使用してレスポンシブ レイアウトを作成する

ProtoLayout Material ライブラリには、タイルの作成に役立つ事前定義されたレイアウトが用意されています。これらのレイアウトは、すでに画面サイズに適応するよう設計されています。

利用可能な正規レイアウトと、それを使用してデザインを作成する方法については、Figma デザイン レイアウトをご覧ください。

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

ほとんどのユースケースでは、トップレベル レイアウトとして 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 のメディアタイルのサンプルをご覧ください。