Recortes en Compose

Un corte de pantalla es un área en algunos dispositivos que se extiende hacia la pantalla. de ataque de la nube. Permite una experiencia de borde a borde y, al mismo tiempo, proporciona espacio para sensores importantes en la parte frontal del dispositivo.

Ejemplo de recorte en modo Retrato
Figura 1: Ejemplo de recorte en modo Retrato
Ejemplo de recorte en modo horizontal
Figura 2: Ejemplo de recorte en modo horizontal

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 dispositivos con Android 8.1 o versiones anteriores.

En esta página, se describe cómo implementar la compatibilidad para dispositivos con cortes en Compose, lo que incluye cómo trabajar con el área de corte, es decir, la sección de borde a borde rectángulo 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 de corte de pantalla y no se dibujan dónde se encuentra un corte de dispositivo 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
        }
    }
}
CutoutSnippets.kt

Para personalizar aún más este comportamiento, debes controlar la información de corte. tú mismo.

Maneja la información de corte de forma manual

Puedes controlar los cortes de cualquiera de las siguientes maneras:

Para Compose, se recomienda establecer windowLayoutInDisplayCutoutMode en default en tu tema general y, luego, aprovecha 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()))
}
CutoutSnippets.kt

Este enfoque te permite respetar el padding de displayCutout cuando sea necesario. o ignórala cuando no sea necesaria.

También puedes aplicar la misma configuración que el Recorte de vistas de Terraform se describe estableciendo el tema de la actividad android:windowLayoutInDisplayCutoutMode a otro o configurar el atributo de ventana con window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT Sin embargo, el modo de corte se aplica a toda una actividad y no se puede controlar por elemento componible individual.

Para respetar el corte de 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 más baja en en el área de corte.
  • Cuando se sigue la guía de borde a borde, la información de corte se incluye en las inserciones safeDrawing / safeContent.
  • Cuando sea posible, usa Modifier.windowInsetsPadding(WindowInsets.safeDrawing). para determinar el padding apropiado que se aplicará a tu contenido. Evitar la altura de la barra de estado, ya que esto puede generar superposiciones o cortes contenido.

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 cutout, puedes simular configuraciones de corte comunes en cualquier dispositivo o emulador con Android 9 o versiones posteriores de la siguiente manera:

  1. Habilita Opciones para desarrolladores.
  2. En la pantalla Opciones para desarrolladores, desplázate hacia abajo hasta la sección Dibujo. y selecciona Simular una pantalla con un corte.
  3. Selecciona el tipo de corte.
    cómo simular un corte de pantalla en el emulador
    Figura 3: Usa las Opciones para desarrolladores para probar cómo se renderiza tu contenido.
    .