Как создавать карточки для экранов разных размеров

Карточки вашего приложения должны хорошо работать на устройствах Wear OS всех размеров. Если места достаточно, используйте его, но при этом карточки должны хорошо выглядеть и на небольших экранах. В этом руководстве приведены рекомендации по созданию такого пользовательского опыта.

Чтобы узнать больше о принципах проектирования адаптивных макетов, ознакомьтесь с руководством по дизайну.

Как создавать разные интерфейсы для разных точек останова

Макеты из библиотеки ProtoLayout Material адаптивны и обеспечивают правильное размещение и видимость элементов. Однако в некоторых случаях для достижения наилучших результатов может потребоваться изменить количество видимых элементов. Например, на небольшом экране можно разместить три кнопки, а на большом – пять.

Чтобы реализовать такой подход, используйте точки останова для размеров экрана. Чтобы показывать другой макет, когда размер экрана превышает 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

Дополнительные возможности описаны в руководстве по дизайну.

Как тестировать элементы на экранах разных размеров с помощью предпросмотра

Важно протестировать макеты на экранах разных размеров. Используйте аннотации Tile Preview вместе с классами 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.