Разрабатывайте плитки для экранов разных размеров.

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

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

Создавайте адаптивные макеты с помощью ProtoLayout

Библиотека материалов ProtoLayout предоставляет готовые макеты, которые помогут вам создавать плитки. Эти макеты уже разработаны для адаптации к размеру экрана.

Ознакомьтесь с макетами дизайна Figma , которые демонстрируют доступные канонические макеты и способы создания дизайна с их использованием:

Мы рекомендуем PrimaryLayout или EdgeContentLayout в качестве макетов верхнего уровня для большинства случаев использования. Установите адаптивное поведение с помощью setResponsiveContentInsetEnabled , например:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

Обеспечить дифференцированный опыт с помощью контрольных точек

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

Чтобы реализовать этот тип дифференцированного опыта, используйте контрольные точки размера экрана . Чтобы показать другой макет, когда размер экрана превышает 225 dp: 

materialScope(context, deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (deviceConfiguration.screenHeightDp >= 225) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}

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

Тестируйте плитки на экранах разных размеров с помощью Previews

Важно протестировать макеты на экранах разных размеров. Используйте аннотации Tile Preview вместе с классами TilePreviewHelper и TilePreviewData :

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

Это позволяет вам просматривать макеты Tile непосредственно в Android Studio. Предыдущий пример точек останова иллюстрирует, как отображаются дополнительные кнопки, когда позволяет пространство экрана, при предварительном просмотре:

Дополнительные кнопки на больших дисплеях

Маленькие и большие дисплеи, показывающие эффект точки останова

Полный пример смотрите в образце медиа-плиток на GitHub.