La plataforma de Android es responsable de dibujar la IU del sistema, como la barra de estado y la de navegación. Esta IU del sistema se muestra independientemente de la app que use el usuario.
WindowInsets proporciona información sobre la IU del sistema para garantizar que tu app se dibuje en el área correcta y que la IU del sistema no la oculte.
En Android 14 (nivel de API 34) y versiones anteriores, la IU de tu app no se dibuja debajo de las barras del sistema ni de los cortes de pantalla de forma predeterminada.
En Android 15 (nivel de API 35) y versiones posteriores, tu app se dibuja debajo de las barras del sistema y muestra recortes una vez que se orienta al SDK 35. Esto genera una experiencia del usuario más fluida y permite que tu app aproveche al máximo el espacio de la ventana disponible.
Mostrar contenido detrás de la IU del sistema se denomina borde a borde. En esta página, obtendrás información sobre los diferentes tipos de inserciones, cómo pasar de borde a borde y cómo usar las APIs de inserciones para animar tu IU y asegurarte de que el contenido de tu app no esté oculto por elementos de la IU del sistema.
Conceptos básicos de los elementos insertados
Cuando una app se muestra de borde a borde, debes asegurarte de que la IU del sistema no oculte el contenido y las interacciones importantes. Por ejemplo, si un botón se coloca detrás de la barra de navegación, es posible que el usuario no pueda hacer clic en él.
El tamaño de la IU del sistema y la información sobre dónde se coloca se especifican mediante insertos.
Cada parte de la IU del sistema tiene un tipo de inserto correspondiente que describe su tamaño y dónde se coloca. Por ejemplo, las inserciones de la barra de estado proporcionan el tamaño y la posición de la barra de estado, mientras que las inserciones de la barra de navegación proporcionan el tamaño y la posición de la barra de navegación. Cada tipo de inserto consta de cuatro dimensiones de píxeles: superior, izquierda, derecha e inferior. Estas dimensiones especifican hasta dónde se extiende la IU del sistema desde los lados correspondientes de la ventana de la app. Por lo tanto, para evitar superponerse con ese tipo de IU del sistema, la IU de la app debe insertarse en esa cantidad.
Estos tipos de inserciones integradas de Android están disponibles a través de WindowInsets:
Las inserciones que describen las barras de estado Estas son las barras superiores de la IU del sistema que contienen íconos de notificaciones y otros indicadores. |
|
Los recuadros de la barra de estado para cuando están visibles Si las barras de estado están ocultas actualmente (debido a que se ingresó al modo de pantalla completa envolvente), los inserciones de la barra de estado principal estarán vacíos, pero estos inserciones no estarán vacíos. |
|
Las inserciones que describen las barras de navegación Estas son las barras de la IU del sistema que se encuentran en el lado izquierdo, derecho o inferior del dispositivo y que describen la barra de tareas o los íconos de navegación. Estos pueden cambiar durante el tiempo de ejecución según el método de navegación preferido del usuario y la interacción con la barra de tareas. |
|
La barra de navegación se inserta cuando está visible. Si las barras de navegación están ocultas (debido a que se ingresó al modo de pantalla completa envolvente), los insertos de la barra de navegación principal estarán vacíos, pero estos insertos no estarán vacíos. |
|
El inserto que describe la decoración de la ventana de la IU del sistema si está en una ventana de formato libre, como la barra de título superior. |
|
La barra de subtítulos se inserta cuando están visibles. Si las barras de subtítulos están ocultas, los recuadros de la barra de subtítulos principal estarán vacíos, pero no lo estarán. |
|
La unión de las inserciones de la barra del sistema, que incluyen las barras de estado, las barras de navegación y la barra de leyendas |
|
Los rellenos de la barra del sistema para cuando están visibles Si las barras del sistema están ocultas (debido a que se ingresó al modo de pantalla completa inmersivo), los insertos de la barra del sistema principal estarán vacíos, pero estos insertos no estarán vacíos. |
|
Las inserciones que describen la cantidad de espacio en la parte inferior que ocupa el teclado en pantalla |
|
Las inserciones que describen la cantidad de espacio que ocupaba el teclado en software antes de la animación actual del teclado. |
|
Las inserciones que describen la cantidad de espacio que ocupará el teclado en pantalla después de la animación actual del teclado. |
|
Es un tipo de inserciones que describen información más detallada sobre la IU de navegación y que proporciona la cantidad de espacio en la que el sistema controlará los "toques", y no la app. En el caso de las barras de navegación transparentes con navegación por gestos, algunos elementos de la app se pueden presionar a través de la IU de navegación del sistema. |
|
Los elementos que se pueden presionar se insertan cuando están visibles. Si los elementos que se pueden presionar están ocultos (debido a que se ingresó al modo de pantalla completa envolvente), los elementos insertados principales que se pueden presionar estarán vacíos, pero estos insertos no estarán vacíos. |
|
Son los rellenos que representan la cantidad de rellenos en los que el sistema interceptará los gestos para la navegación. Las apps pueden especificar manualmente la forma de controlar una cantidad limitada de estos gestos a través de |
|
Es un subconjunto de los gestos del sistema que el sistema siempre controlará y que no se puede inhabilitar a través de |
|
Las inserciones que representan la cantidad de espacio necesaria para evitar superponerse con un corte de pantalla (muesca o orificio) |
|
Las inserciones que representan las áreas curvas de una pantalla en cascada. Una pantalla en cascada tiene áreas curvas a lo largo de los bordes de la pantalla en las que la pantalla comienza a doblarse a lo largo de los lados del dispositivo. |
Estos tipos se resumen en tres tipos de inserciones "seguras" que garantizan que el contenido no se oculte:
Estos tipos de inserciones "seguras" protegen el contenido de diferentes maneras, según las inserciones subyacentes de la plataforma:
- Usa
WindowInsets.safeDrawingpara proteger el contenido que no se debe dibujar debajo de ninguna IU del sistema. Este es el uso más común de los insertos: evitar dibujar contenido que la IU del sistema oculta (ya sea de forma parcial o completa). - Usa
WindowInsets.safeGesturespara proteger el contenido con gestos. De esta manera, se evita que los gestos del sistema entren en conflicto con los gestos de la app (como los de las hojas inferiores, los carruseles o los juegos). - Usa
WindowInsets.safeContentcomo una combinación deWindowInsets.safeDrawingyWindowInsets.safeGesturespara garantizar que el contenido no tenga superposición visual ni superposición de gestos.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Componentes y diseños de Material
- Cómo migrar
CoordinatorLayouta Compose - Otras consideraciones