Gerenciador de Janelas do Jetpack para Compose

Importante

Este artigo descreve funcionalidades e diretrizes que estão em versão prévia pública e podem ser modificadas substancialmente antes de passarem para a disponibilidade geral. A Microsoft não faz nenhuma garantia, expressa ou implícita, com relação às informações fornecidas aqui.

O Gerenciador de Janelas do Jetpack (no momento em versão beta) fornece uma API padrão para trabalhar com todos os dispositivos dobráveis. Para usar o Gerenciador de Janelas diretamente no código do Jetpack Compose, siga as instruções abaixo:

Adicionar dependência

Adicione a dependência do Gerenciador de Janelas ao arquivo do build.gradle aplicativo.

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

Observação

O nome da biblioteca inclui "beta". As APIs do Gerenciador de Janelas ainda estão em versão prévia.

Usar o Gerenciador de Janelas no código do Jetpack Compose

  1. Na classe MainActivity, crie uma variável para o Gerenciador de Janelas:

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

    Verifique se o import androidx.window.WindowInfoRepository foi adicionado à parte superior do arquivo.

  2. Inicialize o Gerenciador de Janelas no método onCreate da atividade e depois passe-o como um parâmetro para a função principal @Composable:

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

    Verifique se o import androidx.window.layout.WindowInfoRepository.Companion.windowInfoRepository foi adicionado à parte superior do arquivo.

  3. Na função @Composable principal, adicione o seguinte código:

    @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
                        }
                    }
                }
        }
    }
    

    Verifique se estas importações são adicionadas à parte superior do arquivo:

    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. Quando esse código for executado, a atividade será atualizada com a postura atual do dispositivo e os recursos de exibição (se distribuídos em toda a dobra ou dobradiça). Adicione mais código ao lambda collect para verificar se há mais informações sobre o objeto FoldingFeature.

Exemplos

O repositório surface-duo-compose-samples do GitHub tem exemplos do Kotlin que foram criados usando o Jetpack Compose e o Gerenciador de Janelas do Jetpack. Esses exemplos demonstram diferentes padrões de experiência do usuário de tela dupla e usam o Gerenciador de Janelas para obter as seguintes informações:

Recursos