Jetpack Window Manager для Compose

Важно!

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

В решении Jetpack Window Manager (сейчас доступно в бета-версии) предоставляется стандартный API для работы со всеми складными устройствами. Чтобы использовать Window Manager непосредственно в коде Jetpack Compose, выполните приведенные ниже инструкции.

Добавление зависимости

Добавьте зависимость Window Manager в файл приложения build.gradle.

dependencies {
    implementation "androidx.window:window:1.0.0-beta02"
}

Примечание

Имя библиотеки включает слово beta, так как API Window Manager сейчас предоставляются в предварительной версии.

Использование Window Manager в коде Jetpack Compose

  1. В классе MainActivity создайте переменную для Window Manager:

    class MainActivity : AppCompatActivity() {
       private lateinit var windowInfoRepo: WindowInfoRepository
    

    Убедитесь, что в верхней части файла добавлена инструкция import androidx.window.WindowInfoRepository.

  2. Инициализируйте Window Manager в методе действия onCreate, а затем передайте его в качестве параметра в главную функцию @Composable.

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        windowInfoRepo = windowInfoRepository()
    
        setContent {
            ExampleAppTheme {
                ExampleApp(windowInfoRepo)
            }
        }
    }
    

    Убедитесь, что в верхней части файла добавлена инструкция import androidx.window.layout.WindowInfoRepository.Companion.windowInfoRepository.

  3. В главную функцию @Composable добавьте следующий код:

    @Composable
    fun ExampleApp(windowInfoRep: WindowInfoRepository) {
        // Add/remove variables from this section as necessary for your app
        var isAppSpanned by remember { mutableStateOf(false) }
        var viewWidth by remember { mutableStateOf(0) }
        var hingeWidth by remember { mutableStateOf(0) }
    
        LaunchedEffect(windowInfoRep) {
            windowInfoRep.windowLayoutInfo
                .collect { newLayoutInfo ->
                    val displayFeatures = newLayoutInfo.displayFeatures
    
                    // Check if app is spanned
                    isAppSpanned = displayFeatures.isNotEmpty()
    
                    if (isAppSpanned) {
                        val foldingFeature = displayFeatures.first() as FoldingFeature
    
                        // Get width of hinge
                        hingeWidth = when (foldingFeature.orientation) {
                            FoldingFeature.Orientation.VERTICAL -> foldingFeature.bounds.width()
                            else -> foldingFeature.bounds.height()
                        }
    
                        // Get width of single screen view
                        viewWidth = when (foldingFeature.orientation) {
                            FoldingFeature.Orientation.VERTICAL -> foldingFeature.bounds.left
                            else -> foldingFeature.bounds.top
                        }
                    }
                }
        }
    }
    

    В верхнюю часть файла добавьте следующие импортируемые компоненты:

    import androidx.compose.runtime.LaunchedEffect
    import androidx.compose.runtime.getValue
    import androidx.compose.runtime.mutableStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.runtime.setValue
    import androidx.window.layout.FoldingFeature
    import kotlinx.coroutines.flow.collect
    
  4. При выполнении этого кода действие будет обновлено с учетом текущего положения устройства и функций отображения (если приложение развернуто на складке или петле). Добавьте дополнительный код в лямбда-функцию FoldingFeature для проверки дополнительных сведений в объекте collect.

примеры

Репозиторий surface-duo-compose-sample на сайте GitHub содержит несколько примеров Kotlin, созданных с помощью Jetpack Compose и Jetpack Window Manager. В этих примерах демонстрируются разные интерфейсы с поддержкой двух экранов и используется Window Manager для получения таких сведений:

  • CompanionPane: режим растягивания, ориентация.
  • ComposeGallery: режим растягивания.
  • DualView: режим растягивания, ширина представления.
  • ListDetail: режим растягивания.
  • TwoPage: режим растягивания, ширина представления, ширина петли.

Ресурсы