Плитки вашего приложения должны хорошо работать на устройствах 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. Предыдущий пример точек останова иллюстрирует, как отображаются дополнительные кнопки, когда позволяет место на экране, при предварительном просмотре:
![Дополнительные кнопки на больших дисплеях](https://developer.android.com/static/images/wear/tile-previews.png?authuser=2&hl=ru)
Маленькие и большие дисплеи, показывающие эффект точки останова.
Полный пример см. в образце медиа-плиток на GitHub.