Um corte da tela é uma área em alguns dispositivos que se estende até a tela superfície Ele permite uma experiência de ponta a ponta enquanto fornece espaço para sensores importantes na parte frontal do dispositivo.
![Exemplo de recorte no modo retrato](https://developer.android.google.cn/static/develop/ui/compose/images/system/cutouts_example_portrait.png?authuser=7&hl=pt)
![Exemplo de recorte no modo paisagem](https://developer.android.google.cn/static/develop/ui/compose/images/system/cutouts_example_landscape.png?authuser=7&hl=pt)
O Android oferece suporte a cortes de tela em dispositivos com o Android 9 (nível 28 da API) e mais alto. No entanto, os fabricantes de dispositivos também podem oferecer suporte a cortes da tela em dispositivos com Android 8.1 ou versão anterior.
Esta página descreve como implementar o suporte para dispositivos com cortes Compose, incluindo como trabalhar com a área de corte, ou seja, de ponta a ponta retângulo 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 desenha nas áreas de corte da tela quando você segue o guia para mostrar seu app de ponta a ponta.
Por exemplo, quando você usa
Modifier.windowInsetsPadding(WindowInsets.safeContent)
ou Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
, seu app
não desenhará automaticamente nas áreas onde o recorte é colocado.
WindowInsets.safeContent
e WindowInsets.safeDrawing
ambos contêm informações de corte da tela e não são desenhados quando há um corte no dispositivo
o endereço IP interno.
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 você mesmo.
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 o windowLayoutInDisplayCutoutMode
como
default
no tema geral e, em seguida, aproveitar 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á-la onde não for necessária.
Como alternativa, aplique as mesmas configurações usadas em Recorte de visualizações
documentação descreve com a configuração
o tema da atividade android:windowLayoutInDisplayCutoutMode
para outro
ou definindo o atributo window 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 controlada 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 o recorte
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 oculta qualquer texto, controles ou outras informações importantes.
- Não coloque ou estenda elementos interativos que exijam toques minuciosos na área de corte. A sensibilidade ao toque pode ser menor no área de corte.
- Ao seguir a orientação de ponta a ponta, as informações de recorte são incluídas em
os encartes
safeDrawing
/safeContent
. - Sempre que possível, use
Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
para determinar o padding adequado para aplicar ao seu conteúdo. Evite fixar a altura da barra de status no código, porque isso pode causar sobreposição ou corte conteúdo.
Testar como o conteúdo é renderizado com cortes
Teste todas as telas e experiências do seu app. Testar em dispositivos com diferentes tipos de corte, se possível. Se você não tem um dispositivo recorte, você pode simular configurações comuns de corte em qualquer dispositivo ou emulador com o Android 9 ou uma versão mais recente, faça 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.
Figura 3. Use as Opções do desenvolvedor para testar como o conteúdo é renderizado.
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