Как Android @Compose будет обрабатывать размер и ориентацию экрана в Android

Как Android @Compose будет обрабатывать размер и ориентацию экрана в Android. Я не могу найти подходящий ответ после поиска в Google. Кто-нибудь может ответить на этот вопрос.

4 ответа

Проверить ориентацию можно так:

      val configuration = LocalConfiguration.current
when(configuration.orientation) {
    Configuration.ORIENTATION_LANDSCAPE -> {}
    Configuration.ORIENTATION_PORTRAIT -> {}
    Configuration.ORIENTATION_SQUARE -> {}
    Configuration.ORIENTATION_UNDEFINED -> {}
}

Для размера экрана:

      BoxWithConstraints() {
    // thats what you can access:
    this.maxWidth
    this.maxHeight
    this.minWidth
    this.minHeight
}

С участием 1.0.x вы можете использовать BoxWithConstraints составной для определения различных пользовательских интерфейсов в зависимости от размера экрана.

Что-то вроде:

      BoxWithConstraints {
        if (minWidth < 480.dp) {
            /* .... */
        } else if (minWidth < 720.dp) {
            /* .... */
        } else {
            /* .... */
        }
    }

Чтобы справиться с ориентацией, вы можете использовать LocalConfiguration.
Что-то вроде:

      val configuration = LocalConfiguration.current
when (configuration.orientation) {
    Configuration.ORIENTATION_LANDSCAPE -> {
        /* ... */
    }
    else -> {
        /* ... */
    }
}

}

Обе вещи доступны с помощью LocalConfiguration.current который возвращает Configuration объект.

Для ориентации, как известно, существует свойство orientation,

LocalConfiguration.current.orientation

Точно так же есть еще два свойства.

LocalConfiguration.current.screenWidthDp
LocalConfiguration.current.screenHeightDp

Это должно помочь вашему сценарию, в котором вы хотите использовать его в сигнатуре Composable, вместо того, чтобы делать то же самое внутри его области, например, это можно использовать в Modifiers для соответствующего изменения размера composable.

Однако для Modifierдля определения размера вашего Composable, я рекомендую использовать fillMaxHeight(/*fraction/*) а также fillMaxWidth(/*fraction*/)вместо. Как было бы ясно, дробь - это доля пространства родительского Composable, которую он должен занимать. Если родительский составной объект setContent, или если родительский составной объект растягивается на весь экран (например, Surface с помощью fillMaxSize()Modifier), то это будет относиться к размерам самих экранов. Так, fillMaxHeight(0.1f)сделает высоту Composable равной одной десятой высоты экрана. Вы можете пройти здесь путь создания, чтобы изучить основные концепции. Это может быть не совсем просто, но может помочь построить лучшую основу для декларативных парадигм.

Добавление обновленного ответа на основе новогобиблиотека.

Теперь вы можете использовать WindowSizeClassдля запроса классов ширины и высоты. Эта библиотека специально предназначена для создания адаптивных макетов и автоматически перекомпонует макет при изменении размера/ориентации вашей активности.

Этот API дает вам приблизительный размер вашей ширины и высоты ( COMPACT, MEDIUM, EXPANDING). Это упрощает работу с такими устройствами, как складные устройства и дисплеи с большим экраном.

Вот простой пример реализации, который я написал: -

      class MainActivity {
    /* ...... */
    setContent {
        val windowSizeClass = calculateWindowSizeClass(this)
        /* .... */
        MyApp(windowWidthSizeClass = windowSizeClass.widthSizeClass, /* .... */ )
    }
}

@Composable
fun MyApp(windowWidthSizeClass: WindowWidthSizeClass, /* ... */) {
    when(windowWidthSizeClass) {
        WindowWidthSizeClass.Expanded -> // orientation is landscape in most devices including foldables (width 840dp+)
        WindowWidthSizeClass.Medium -> // Most tablets are in landscape, larger unfolded inner displays in portrait (width 600dp+)
        WindowWidthSizeClass.Compact -> // Most phones in portrait
    }
}

Здесь я могу установить макет в альбомный вид, когда windowWidthSizeClassравно WindowWidthSizeClass.Expanded. я могу использовать WindowWidthSizeClass.Mediumширину, чтобы оптимизировать мой макет для больших устройств, таких как планшеты и складные устройства. Наконец, WindowWidthSizeClass.Compactговорит мне, что большинство мобильных телефонов находятся в портретной ориентации, и я могу соответствующим образом обновить свой пользовательский интерфейс.

Эти же перечисления также доступны для высоты активности, но в документации указано:

Большинство приложений могут создавать адаптивный пользовательский интерфейс, учитывая только класс ширины окна.

(Пока верно для меня)

Обратите внимание, что эта библиотека все еще находится в альфа-версии и явно помечена как экспериментальная, поэтому она может измениться.

Официальное руководство — https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes#window_size_classes

Пример реализации можно найти в примере приложения JetNews — https://github.com/android/compose-samples/tree/main/JetNews.

Документация - androidx.compose.material3.windowsizeclasshttps://developer.android.com/reference/kotlin/androidx/compose/material3/windowsizeclass/package-summary

Примечания к выпуску (выпущено в 1.0.0-alpha10, текущая версия — alpha13) — https://developer.android.com/jetpack/androidx/releases/compose-material3#1.0.0-alpha10

Другие вопросы по тегам