Ваше приложение должно хорошо работать на устройствах Wear OS всех размеров, используя дополнительное пространство там, где оно доступно, и при этом отлично выглядеть на небольших экранах. В этом руководстве представлены рекомендации по достижению такого пользовательского опыта.
Чтобы узнать больше о принципах проектирования адаптивных макетов, прочтите руководство по дизайну .
Создавайте адаптивные макеты с помощью Horological
Макеты должны иметь процентные поля . Поскольку Compose по умолчанию работает в абсолютных значениях, используйте компоненты из библиотеки часовщика , которая имеет следующие возможности:
- Горизонтальные поля установлены правильно в зависимости от размера экрана устройства в процентах.
- Расстояние сверху и снизу установлено правильно. Это создает особые проблемы, поскольку рекомендуемое расстояние сверху и снизу может зависеть от используемых компонентов. Например, при использовании в списке интервал между
Chip
иText
компонентом должен отличаться. - Поля
TimeText
установлены правильно.
В следующем фрагменте кода используется версия макета ScalingLazyColumn
от Horological для создания контента, который отлично смотрится на экранах различных размеров Wear OS:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
В этом примере также демонстрируются ScreenScaffold
и AppScaffold
. Они координируют работу приложения и отдельных экранов ( маршруты навигации ), чтобы обеспечить правильное поведение прокрутки и позиционирование TimeText
.
Для верхнего и нижнего отступа также обратите внимание на следующее:
- Спецификация первого и последнего
ItemType
для определения правильного заполнения. - Использование
ResponsiveListHeader
для первого элемента в списке, посколькуText
заголовки не должны иметь заполнения.
Полные характеристики можно найти в конструкторских наборах Figma . Более подробную информацию и примеры см.:
- Библиотека часового искусства — предоставляет компоненты, помогающие создавать оптимизированные и дифференцированные приложения для Wear OS.
- Пример ComposeStarter — пример, демонстрирующий принципы, изложенные в этом руководстве.
- Образец JetCaster — более сложный пример создания приложения для работы с экранами разных размеров с использованием библиотеки Horological.
Используйте макеты прокрутки в своем приложении
Используйте макет с прокруткой, как показано ранее на этой странице, в качестве выбора по умолчанию при реализации ваших экранов. Это позволяет пользователям получать доступ к компонентам вашего приложения независимо от предпочтений дисплея или размера экрана устройства Wear OS.
![Влияние разного размера устройства и масштабирования шрифта](https://developer.android.com/static/images/wear/screenshot-test.png?authuser=6&hl=ru)
Влияние разных размеров устройств и масштабирования шрифтов.
Диалоги
Диалоги также должны быть прокручиваемыми, если только нет веских причин не делать этого. Компонент ResponsiveDialog
, предоставленный Horologies, добавляет следующее:
- Прокрутка по умолчанию.
- Правильная процентная маржа.
- Кнопки, ширина которых регулируется там, где позволяет место, для увеличения количества целей касания.
![Адаптивное диалоговое поведение в часовом деле](https://developer.android.com/static/images/wear/adaptive-dialogs.png?authuser=6&hl=ru)
Адаптивные диалоговые окна, обеспечивающие прокрутку по умолчанию и кнопки, адаптирующиеся к доступному пространству.
Для пользовательских экранов могут потребоваться макеты без прокрутки.
Некоторые экраны могут по-прежнему подходить для макетов без прокрутки. Несколько примеров включают главный экран проигрывателя в мультимедийном приложении и экран тренировки в фитнес-приложении.
В этих случаях обратитесь к каноническим рекомендациям, представленным в наборах дизайна Figma , и реализуйте дизайн, который реагирует на размер экрана, используя правильные поля.
Обеспечьте дифференцированный опыт с помощью точек останова
На больших дисплеях вы можете представить дополнительный контент и функции. Чтобы реализовать такого рода дифференцированное взаимодействие, используйте точки останова размера экрана , показывающие другой макет, когда размер экрана превышает 225 dp:
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
Руководство по проектированию иллюстрирует больше таких возможностей.
Тестируйте комбинации размеров экрана и шрифта с помощью предварительного просмотра.
Создание предварительных просмотров поможет вам разрабатывать приложения для экранов Wear OS различных размеров. Используйте определения предварительного просмотра устройств и масштабирования шрифта, чтобы увидеть следующее:
- Как ваши экраны выглядят при экстремальных размерах, например, самый большой шрифт в сочетании с самым маленьким экраном.
- Как ваш дифференцированный опыт ведет себя в точках останова.
Убедитесь, что вы реализуете предварительный просмотр с помощью WearPreviewDevices
и WearPreviewFontScales
для всех экранов вашего приложения.
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
Тестирование скриншотов
Помимо предварительного тестирования, тестирование снимков экрана позволяет протестировать аппаратное обеспечение различных размеров. Это особенно полезно, когда эти устройства могут быть недоступны для вас сразу, и проблема может не проявляться на экранах других размеров.
Тестирование снимков экрана также помогает выявить регрессии в определенных местах вашей кодовой базы.
Наши образцы используют Roborazzi для тестирования скриншотов:
- Настройте файлы
build.gradle
вашего проекта и приложения для использования Roborazzi. - Создайте тест скриншотов для каждого экрана вашего приложения. Например, в примере ComposeStarter реализован тест
GreetingScreen
, как показано вGreetingScreenTest
:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Некоторые важные моменты, на которые следует обратить внимание:
-
FixedTimeSource
позволяет создавать снимки экрана, в которыхTimeText
не меняется и непреднамеренно приводит к сбою тестов. -
WearDevice.entries
содержит определения наиболее популярных устройств Wear OS, поэтому тесты выполняются на репрезентативном диапазоне размеров экрана.
Создавайте золотые изображения
Чтобы создать изображения для ваших экранов, выполните в терминале следующую команду:
./gradlew recordRoborazziDebug
Проверка изображений
Чтобы проверить изменения в существующих изображениях, выполните в терминале следующую команду:
./gradlew verifyRoborazziDebug
Полный пример тестирования снимков экрана см. в примере ComposeStarter .