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.
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 } } }
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
comwindow.attributes.layoutInDisplayCutoutMode
Acessar o objeto
Path
de recorte 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 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:
- 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 recorte.
- 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
- Estilo de parágrafo