Recortes no Compose

Um corte da tela é uma área em alguns dispositivos que se estende para a superfície da tela. Ele permite uma experiência de ponta a ponta, deixando espaço para sensores importantes na parte frontal do dispositivo.

Figura 1. Exemplo de recorte no modo retrato

Figura 2. Exemplo de recorte no modo paisagem

O Android oferece suporte a cortes de tela em dispositivos com o Android 9 (nível 28 da API) e versões mais recentes. No entanto, os fabricantes de dispositivos também podem oferecer suporte a cortes de tela em dispositivos com o Android 8.1 ou versões anteriores.

Esta página descreve como implementar o suporte a dispositivos com cortes no Compose, incluindo como trabalhar com a área de corte, ou seja, o retângulo de borda a borda na superfície da tela que contém o corte.

Uso padrão de maiúsculas e minúsculas

Por padrão, cortes de tela são incluídos nas informações de encartes de janela. Por isso, o app não vai desenhar nas áreas de corte da tela quando você seguir o guia para deixar o app de ponta a ponta.

Por exemplo, quando você usar Modifier.windowInsetsPadding(WindowInsets.safeContent) ou Modifier.windowInsetsPadding(WindowInsets.safeDrawing), o app não será desenhado automaticamente nas áreas em que um corte é colocado. WindowInsets.safeContent e WindowInsets.safeDrawing contêm informações de corte da tela e não mostram onde o corte do dispositivo está.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}
CutoutSnippets.kt

Para personalizar ainda mais esse comportamento, é necessário processar as informações de corte por conta própria.

Processar informações de corte manualmente

É possível processar cortes de qualquer uma das seguintes maneiras:

• Como usar WindowInsets.displayCutout

• Configuração no manifesto do tema com android:windowLayoutInDisplayCutoutMode

• Como configurar programaticamente a opção em um Window com window.attributes.layoutInDisplayCutoutMode

• Acessar o objeto Path de recorte com LocalView.current.rootWindowInsets.displayCutout

Para o Compose, recomendamos definir windowLayoutInDisplayCutoutMode como default no tema geral e usar WindowInsets.displayCutout para processar os encartes nos elementos combináveis:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt

Essa abordagem permite que você respeite o padding displayCutout quando necessário ou o ignore quando não for necessário.

Como alternativa, você pode aplicar as mesmas configurações descritas na documentação do Views Cutout definindo o tema de atividade android:windowLayoutInDisplayCutoutMode como outra opção ou definindo o atributo de janela usando window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. No entanto, o modo de corte é aplicado a uma atividade inteira e não pode ser controlado por elementos combináveis individuais.

Para respeitar o corte da tela em determinados elementos combináveis, mas não em outros, use WindowInset.displayCutout. Essa API permite acessar as informações de recorte quando necessário.

Práticas recomendadas

Ao trabalhar com cortes de tela, considere o seguinte:

• Preste atenção no posicionamento dos elementos essenciais da interface. Não deixe a área de corte ocultar qualquer texto, controles ou outras informações importantes.
• Não coloque nem estenda elementos interativos que precisem de reconhecimento de toque na área de corte. A sensibilidade ao toque pode ser menor na área de corte.
• Ao seguir a orientação de ponta a ponta, as informações de recorte são incluídas nos encartes safeDrawing / safeContent.
• Sempre que possível, use Modifier.windowInsetsPadding(WindowInsets.safeDrawing) para determinar o padding adequado ao conteúdo. Evite fixar a altura da barra de status no código, já que isso pode fazer com que o conteúdo se sobreponha ou corte.

Testar a renderização do conteúdo com recortes

Teste todas as telas e experiências do seu app. Se possível, teste em dispositivos com diferentes tipos de corte. Se você não tem um dispositivo com um corte, é possível simular configurações de corte comuns em qualquer dispositivo ou emulador com o Android 9 ou versões mais recentes fazendo o seguinte:

1. Ative as Opções do desenvolvedor.
2. Na tela Opções do desenvolvedor, role para baixo até a seção Desenho e selecione Simular uma tela com recorte.
3. Selecione o tipo de corte.

   

   Figura 3. Use as Opções do desenvolvedor para testar como o conteúdo é renderizado.