Адаптивные макеты

Проектирование адаптивных макетов

При проектировании адаптивных макетов следуйте этим основным рекомендациям:

• Предпочитайте шаблоны канонических макетов, например список-подробности, ленту и вспомогательную панель.

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

• Разбивайте сложные макеты на повторно используемые компонуемые функции, чтобы обеспечить гибкость и модульность.

• Учитывайте плотность экрана и ориентацию.

Использование классов размеров окна

Классы размеров окна — это предопределённые пороговые значения, также называемые контрольными точками, которые классифицируют экраны разных размеров и помогают проектировать, разрабатывать и тестировать адаптивные макеты.

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

Чтобы использовать классы WindowSizeClass, добавьте зависимость material3.adaptive в общий исходный набор модуля в файле build.gradle.kts:

commonMain.dependencies {
    implementation("org.jetbrains.compose.material3.adaptive:adaptive:1.3.0-beta02")
}

API WindowSizeClass позволяет менять макет приложения в зависимости от доступного пространства экрана. Например, можно управлять видимостью верхней панели приложения в зависимости от высоты окна:

import androidx.window.core.layout.WindowSizeClass
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfoV2
...

@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfoV2().windowSizeClass
) {
    // Determines whether the top app bar should be displayed
    val showTopAppBar = windowSizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND)

    // Uses bar visibility to define UI 
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}

Что дальше

Подробнее об адаптивных макетах читайте в документации Jetpack Compose.