Recortes en Compose

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 proporciona espacio para sensores importantes en la parte frontal del dispositivo.

Figura 1: Ejemplo de recorte en modo Retrato

Figura 2: Ejemplo de recorte en modo horizontal

Android admite cortes de pantalla en dispositivos que ejecutan Android 9 (nivel de API 28) y versiones posteriores. 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, 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. Por lo tanto, tu app no dibujará en las áreas de corte de pantalla cuando sigas la guía para crear una app de borde a borde.

Por ejemplo, cuando usas Modifier.windowInsetsPadding(WindowInsets.safeContent) o Modifier.windowInsetsPadding(WindowInsets.safeDrawing), tu app no dibujará automáticamente en las áreas en las que se coloca un corte. WindowInsets.safeContent y WindowInsets.safeDrawing contienen información de corte de pantalla y no dibujarán dónde se encuentre un corte de 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
        }
    }
}
CutoutSnippets.kt

Para personalizar aún más este comportamiento, debes controlar la información de corte por tu cuenta.

Maneja manualmente la información de corte

Puedes controlar los cortes de cualquiera de las siguientes maneras:

• Usando WindowInsets.displayCutout

• Configuración en el manifiesto de tema con android:windowLayoutInDisplayCutoutMode

• Configura la opción de forma programática en un Window con window.attributes.layoutInDisplayCutoutMode

• Cómo acceder al objeto de corte Path con LocalView.current.rootWindowInsets.displayCutout

Para Compose, te recomendamos establecer windowLayoutInDisplayCutoutMode como 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()))
}
CutoutSnippets.kt

Este enfoque te permite respetar el padding de displayCutout cuando sea necesario o ignorarlo 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 la ventana con window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. Sin embargo, el modo de corte se aplica a toda la 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 a la información de corte cuando sea necesario.

Prácticas recomendadas

Cuando trabajes con cortes de pantalla, ten en cuenta lo siguiente:

• Ten en cuenta la ubicación de elementos fundamentales de la IU. No dejes que el área de corte oculte texto, controles ni otra información importante.
• No coloques ni extiendas ningún elemento interactivo que requiera reconocimiento detallado en el área de corte. La sensibilidad táctil puede ser menor en el área de corte.
• Cuando sigues la guía de borde a borde, se incluye la información de corte en las inserciones safeDrawing / safeContent.
• Cuando sea posible, usa Modifier.windowInsetsPadding(WindowInsets.safeDrawing) para determinar el padding apropiado que debes aplicar a tu contenido. Evita codificar la altura de la barra de estado, ya que esto puede generar contenido superpuesto o cortado.

Cómo probar cómo se renderiza tu contenido con cortes

Asegúrate de probar todas las pantallas y experiencias de tu app. Si es posible, haz pruebas en dispositivos con diferentes tipos de cortes. Si no tienes un dispositivo con un corte, puedes simular configuraciones de corte comunes en cualquier dispositivo o emulador que ejecute Android 9 o versiones posteriores. Para ello, haz lo siguiente:

1. Habilita las 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.

   

   Figura 3: Usa las Opciones para desarrolladores a fin de probar cómo se renderiza tu contenido.