Un corte de pantalla es un área en algunos dispositivos que se extiende a la superficie de la pantalla. Permite una experiencia de borde a borde y, al mismo tiempo, proporciona espacio para sensores importantes en la parte frontal del dispositivo.
Android admite cortes de pantalla en dispositivos con Android 9 (nivel de API 28) y mayores. Sin embargo, los fabricantes de dispositivos también pueden admitir cortes de pantalla en en dispositivos con Android 8.1 o versiones anteriores.
En esta página, se describe cómo implementar la compatibilidad con dispositivos con cortes en Compose, incluido cómo trabajar con el área de corte, es decir, el rectángulo de borde a borde en la superficie de la pantalla que contiene el corte.
Caso predeterminado
De forma predeterminada, los cortes de pantalla se incluyen en la información de las inserciones de ventana. Debido a esto, tu app no dibujará en las áreas de corte de pantalla cuando sigas la guía para hacer que tu app se extienda de borde a borde.
Por ejemplo, cuando utilizas
Modifier.windowInsetsPadding(WindowInsets.safeContent)
o Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
, tu app
automáticamente no dibujará en las áreas donde hay un corte.
WindowInsets.safeContent
y WindowInsets.safeDrawing
ambas contienen información sobre el corte de pantalla y no se dibujan dónde se encuentra
en la nube.
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 aún más este comportamiento, debes controlar la información de corte. tú mismo.
Cómo controlar la información de recortes de forma manual
Puedes controlar los cortes de cualquiera de las siguientes maneras:
Usando
WindowInsets.displayCutout
Configuración en el manifiesto del tema con
android:windowLayoutInDisplayCutoutMode
Configura la opción de manera programática en un
Window
conwindow.attributes.layoutInDisplayCutoutMode
.Cómo acceder al objeto
Path
de corte conLocalView.current.rootWindowInsets.displayCutout
En Compose, se recomienda establecer windowLayoutInDisplayCutoutMode
en default
en tu tema general y, luego, aprovechar WindowInsets.displayCutout
para controlar las inserciones en tus elementos componibles:
Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) { drawRect(Color.Red, style = Stroke(2.dp.toPx())) }
Este enfoque te permite respetar el padding de displayCutout
cuando sea necesario.
o ignóralo cuando no sea necesario.
Como alternativa, puedes aplicar la misma configuración que se describe en la documentación de recorte de vistas. Para ello, establece el tema de la actividad android:windowLayoutInDisplayCutoutMode
en otra opción o configura el atributo de ventana con window.attributes.layoutInDisplayCutoutMode =
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
. Sin embargo, el modo de recorte se aplica a toda una actividad y no se puede controlar por elemento componible individual.
Para respetar el recorte de la pantalla en ciertos elementos componibles, pero no en otros, usa WindowInset.displayCutout
. Esta API te permite acceder al corte
información cuando sea necesario.
Prácticas recomendadas
Cuando trabajes con cortes de pantalla, ten en cuenta lo siguiente:
- Ten en cuenta la ubicación de los elementos críticos de la IU. No dejes que el el área de corte oscurece el texto, los controles o cualquier otra información importante.
- No coloques ni extiendas ningún elemento interactivo que requiera detalle. reconocimiento en el área de corte. La sensibilidad al tacto puede ser menor en el área de corte.
- Cuando se sigue la guía de borde a borde, la información de recorte se incluye en los insertos
safeDrawing
osafeContent
. - Siempre que sea posible, usa
Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
para determinar el padding adecuado para tu contenido. Evita codificar la altura de la barra de estado, ya que eso puede generar contenido superpuesto o cortado.
Prueba cómo se procesa tu contenido con cortes
Asegúrate de probar todas las pantallas y experiencias de tu app. Realiza pruebas en dispositivos con diferentes tipos de cortes, si es posible. Si no tienes un dispositivo con una corte, puedes simular configuraciones de corte comunes en cualquier dispositivo o emulador con Android 9 o versiones posteriores de la siguiente manera:
- Habilita Opciones para desarrolladores.
- En la pantalla Opciones para desarrolladores, desplázate hacia abajo hasta la sección Dibujo y selecciona Simular una pantalla con un corte.
- Selecciona el tipo de corte.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Inserciones de ventana en Compose
- Modificadores gráficos
- Cómo aplicar formato a un párrafo