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

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

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

ブレークポイントを使用して差別化されたエクスペリエンスを提供する

ProtoLayout Material ライブラリのレイアウトはレスポンシブで、要素の正しい配置と可視性を処理します。ただし、最適な結果を得るために、表示する要素の数を変更したい場合もあります。たとえば、小さいディスプレイには 3 つのボタン、大きいディスプレイには 5 つのボタンを表示したいとします。

このような差別化されたエクスペリエンスを実装するには、画面サイズのブレークポイントを使用します。画面サイズが 225 dp を超える場合に別のレイアウトを表示するには:

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

設計ガイダンスでは、その他の機会について説明しています。

プレビューを使用してさまざまな画面サイズのタイルをテストする

さまざまな画面サイズでレイアウトをテストすることが重要です。TilePreviewHelper クラスと TilePreviewData クラスとともに、タイル プレビュー アノテーションを使用します。

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

これにより、Android Studio 内でタイル レイアウトを直接プレビューできます。

完全な例については、GitHub のタイマー タイルのサンプルをご覧ください。