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

Ваше приложение должно хорошо работать на устройствах 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 = { }
            )
        }
    }
}
List.kt

В этом примере также демонстрируются ScreenScaffold и AppScaffold . Они координируют работу приложения и отдельных экранов ( маршруты навигации ), чтобы обеспечить правильное поведение прокрутки и позиционирование TimeText .

Для верхнего и нижнего отступа также обратите внимание на следующее:

  • Спецификация первого и последнего ItemType для определения правильного заполнения.
  • Использование ResponsiveListHeader для первого элемента в списке, поскольку Text заголовки не должны иметь заполнения.

Полные характеристики можно найти в конструкторских наборах Figma . Более подробную информацию и примеры см.:

  • Библиотека часового искусства — предоставляет компоненты, помогающие создавать оптимизированные и дифференцированные приложения для Wear OS.
  • Пример ComposeStarter — пример, демонстрирующий принципы, изложенные в этом руководстве.
  • Образец JetCaster — более сложный пример создания приложения для работы с экранами разных размеров с использованием библиотеки Horological.

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

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

Влияние разного размера устройства и масштабирования шрифта

Влияние разных размеров устройств и масштабирования шрифтов.

Диалоги

Диалоги также должны быть прокручиваемыми, если только нет веских причин не делать этого. Компонент ResponsiveDialog , предоставленный Horologies, добавляет следующее:

  • Прокрутка по умолчанию.
  • Правильная процентная маржа.
  • Кнопки, ширина которых регулируется там, где позволяет место, для увеличения количества целей касания.
Адаптивное диалоговое поведение в часовом деле

Адаптивные диалоговые окна, обеспечивающие прокрутку по умолчанию и кнопки, адаптирующиеся к доступному пространству.

Для пользовательских экранов могут потребоваться макеты без прокрутки.

Некоторые экраны могут по-прежнему подходить для макетов без прокрутки. Несколько примеров включают главный экран проигрывателя в мультимедийном приложении и экран тренировки в фитнес-приложении.

В этих случаях обратитесь к каноническим рекомендациям, представленным в наборах дизайна 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.
    }
    // ...
List.kt

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

Тестируйте комбинации размеров экрана и шрифта с помощью предварительного просмотра.

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

  • Как ваши экраны выглядят при экстремальных размерах, например, самый большой шрифт в сочетании с самым маленьким экраном.
  • Как ваш дифференцированный опыт ведет себя в точках останова.

Убедитесь, что вы реализуете предварительный просмотр с помощью WearPreviewDevices и WearPreviewFontScales для всех экранов вашего приложения. 

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

Тестирование скриншотов

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

Тестирование снимков экрана также помогает выявить регрессии в определенных местах вашей кодовой базы.

Наши образцы используют Roborazzi для тестирования скриншотов:

  1. Настройте файлы build.gradle вашего проекта и приложения для использования Roborazzi.
  2. Создайте тест скриншотов для каждого экрана вашего приложения. Например, в примере 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 .