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

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

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

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

Макеты должны иметь процентные поля . Поскольку Compose по умолчанию работает с абсолютными значениями, используйте rememberResponsiveColumnPadding из библиотеки Horologist для расчета отступа и передачи его параметру contentPadding ScreenScaffold и параметру contentPadding TransformingLazyColumn .

В следующем фрагменте кода компонент TransformingLazyColumn используется для создания контента, который отлично смотрится на экранах Wear OS разных размеров: 

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

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

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

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

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

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

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

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

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

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

Диалоги

Диалоги также должны иметь возможность прокручивать, если только нет веской причины не делать этого.Компонент AlertDialog адаптивен и по умолчанию прокручивается, если содержимое превышает высоту области просмотра.

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

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

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

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

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

Предварительные просмотры Compose помогают вам разрабатывать для различных размеров экрана 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 {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

Некоторые важные моменты, на которые следует обратить внимание:

  • WearDevice.entries содержит определения для большинства популярных устройств Wear OS, что позволяет проводить тесты на репрезентативном диапазоне размеров экранов.

Генерировать золотые изображения

Чтобы создать изображения для экранов, выполните в терминале следующую команду:

./gradlew recordRoborazziDebug

Проверить изображения

Чтобы проверить изменения по существующим образам, выполните в терминале следующую команду:

./gradlew verifyRoborazziDebug

Полный пример тестирования скриншотов см. в примере ComposeStarter .