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

アプリのタイルは、あらゆるサイズの Wear OS デバイスで適切に機能し、利用可能なスペースを活用しつつ、小さい画面でも見栄えよくする必要があります。このガイドでは、このユーザー エクスペリエンスを実現するための推奨事項について説明します。

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

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

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

Figma デザインのレイアウトを参照してください。ここでは、使用可能な正規レイアウトと、それらを使用してデザインを作成する方法について説明しています。

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

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