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

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

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

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

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

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

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

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

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

Макеты из библиотеки материалов ProtoLayout уже адаптивны и обеспечивают правильное размещение и видимость элементов. Однако в некоторых случаях для достижения наилучших результатов может потребоваться изменить количество видимых элементов. Например, вам может понадобиться 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.