Um corte da tela é uma área em alguns dispositivos que se estende até a superfície da tela. Ele permite uma experiência de ponta a ponta e, ao mesmo tempo, fornece espaço para sensores importantes na parte frontal do dispositivo.
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 da tela em dispositivos com o Android 8.1 ou versões anteriores.
Esta página descreve como implementar suporte para dispositivos com cortes no Compose, incluindo como trabalhar com a área de corte, ou seja, o retângulo de ponta a ponta na superfície da tela que contém o corte.
Caso padrão
Por padrão, os cortes da tela são incluídos nas informações de encarte da janela. Por isso, o app não vai desenhar nas áreas de corte da tela quando você seguir o guia para mostrar o app de ponta a ponta.
Por exemplo, ao usar
Modifier.windowInsetsPadding(WindowInsets.safeContent)
ou Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
, o app
não vai desenhar automaticamente nas áreas em que um corte for colocado.
WindowInsets.safeContent
e WindowInsets.safeDrawing
contêm informações de corte da tela e não são desenhados no local correspondente
ao dispositivo.
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 } } }
Para personalizar ainda mais esse comportamento, você precisa processar as informações de corte por conta própria.
Processar informações de corte manualmente
É possível processar cortes das seguintes maneiras:
Como usar
WindowInsets.displayCutout
Configuração no manifesto do tema com
android:windowLayoutInDisplayCutoutMode
Definindo programaticamente a opção em um
Window
comwindow.attributes.layoutInDisplayCutoutMode
.Como acessar o objeto
Path
de corte comLocalView.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())) }
Essa abordagem permite respeitar o padding displayCutout
quando necessário
ou ignorá-lo quando não for necessário.
Como alternativa, você pode aplicar as mesmas configurações descritas na documentação
de recorte de visualizações definindo
o tema da atividade android:windowLayoutInDisplayCutoutMode
como outra
opção ou definindo o atributo da 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 elemento combinável individual.
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 corte
quando necessário.
Práticas recomendadas
Ao trabalhar com cortes da tela, considere o seguinte:
- Esteja atento ao posicionamento dos elementos essenciais da IU. Não deixe a área de corte ocultar textos, controles ou outras informações importantes.
- Não coloque nem estenda elementos interativos que exigem reconhecimento por toque na área de corte. A sensibilidade ao toque pode ser menor na área de corte.
- Ao seguir as orientações de ponta a ponta, as informações de corte são incluídas nos
encartes
safeDrawing
/safeContent
. - Sempre que possível, use
Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
para determinar o padding adequado a ser aplicado ao conteúdo. Evite fixar no código a altura da barra de status, porque isso pode causar sobreposição ou corte de conteúdo.
Testar como o conteúdo é renderizado com cortes
Teste todas as telas e experiências do seu app. Teste em dispositivos com diferentes tipos de corte, se possível. Se você não tem um dispositivo com corte, pode simular configurações comuns de corte em qualquer dispositivo ou emulador com o Android 9 ou versões mais recentes fazendo o seguinte:
- Ative as Opções do desenvolvedor.
- Na tela Opções do desenvolvedor, role para baixo até a seção Desenho e selecione Simular uma tela com corte.
- Selecione o tipo de corte.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Encartes de janela no Compose
- Modificadores gráficos
- Parágrafo de estilo