El corte de pantalla es una función presente en algunos dispositivos que permite extender el área de visualización hasta los bordes de la pantalla, brindando una experiencia de borde a borde y dejando espacio para sensores importantes en la parte frontal del dispositivo. En este artículo, exploraremos cómo implementar la compatibilidad con dispositivos que cuentan con esta función, así como las opciones de personalización disponibles en HTML.
Compatibilidad con dispositivos con cortes de pantalla
En primer lugar, es importante destacar que los dispositivos con Android 9 (API nivel 28) y versiones posteriores admiten oficialmente los cortes de pantalla. Sin embargo, algunos fabricantes pueden ofrecer esta función en dispositivos con Android 1 o versiones anteriores.
Para garantizar la coherencia y la compatibilidad de las aplicaciones, los dispositivos con cortes de pantalla deben seguir ciertas reglas:
- Un solo borde puede tener como máximo un corte.
- Un dispositivo no puede tener más de dos cortes.
- Un dispositivo no puede tener cortes en ninguno de sus bordes más largos.
- En la orientación vertical, la barra de estado debe extenderse al menos hasta la altura del corte.
- En la orientación horizontal o pantalla completa, todo el área de corte debe tener formato de letterbox.
Personalización del manejo del área de corte
Si deseas evitar que el contenido se superponga con el área de corte, es importante asegurarse de que el contenido no se superponga con la barra de estado y de que la barra de navegación tenga un tamaño suficiente. Si necesitas realizar algún procesamiento en el área de corte, puedes utilizar la función WindowInsets.getDisplayCutout() para obtener información sobre las inserciones seguras y el rectángulo de límite de cada corte. Esto te permitirá verificar si el contenido se superpone con el corte y reposicionarlo si es necesario.
Además, puedes controlar si deseas mostrar contenido dentro del área de corte utilizando el atributo de diseño de ventana layoutInDisplayCutoutMode. Este atributo puede tener uno de los siguientes valores:
- LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT: Este es el comportamiento predeterminado, donde el contenido se procesa en el área de corte en modo vertical, pero se muestra en formato letterbox en modo horizontal.
- LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES: El contenido se procesa en el área de corte tanto en modo vertical como en modo horizontal.
- LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER: El contenido nunca se procesa en el área de corte.
Puedes configurar el modo de corte de forma programática o estableciendo un estilo en la actividad. A continuación, se muestra un ejemplo de cómo definir un estilo para aplicar el atributo LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES:
<style name= activitytheme > <item name= android:windowlayoutindisplaycutoutmode >shortEdges</item></style>
Modos de corte
A continuación, describiremos los diferentes modos de corte con más detalle:
Cómo compartir pantalla de celular en tvComportamiento predeterminado
De forma predeterminada, en modo vertical y sin marcas especiales, la barra de estado en un dispositivo con corte se ajusta para tener una altura igual o mayor que la del corte, y el contenido se muestra debajo de esta barra. En modo horizontal o pantalla completa, la ventana de la aplicación se ajusta para no mostrar contenido en el área de corte.
Procesamiento de contenido en áreas de corte del borde corto
En algunos casos, como videos, fotos, mapas y juegos, puede ser beneficioso procesar contenido en el área de corte para brindar una experiencia más inmersiva. Con el modo LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES, el contenido se extiende al área de corte en el borde corto de la pantalla, tanto en modo vertical como en modo horizontal, independientemente de si las barras del sistema están ocultas o visibles. Tener en cuenta que el contenido nunca debe superponerse con el área de corte.
Si Android no permite que la vista de contenido se superponga con las barras del sistema, puedes utilizar las marcas View.setSystemUiVisibility(int) para forzar que el contenido se extienda al área de corte. Algunas marcas útiles son:
- SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
- SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
- SYSTEM_UI_FLAG_LAYOUT_STABLE
A continuación, se presentan ejemplos de uso del modo LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES:
Evitar procesamiento de contenido en el área de corte
Si deseas evitar que el contenido se procese en el área de corte, puedes utilizar el modo LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER. En este modo, la ventana no se superpondrá con el área de corte. Tener en cuenta que este modo debe utilizarse con ventanas que configuran transitoriamente View.SYSTEM_UI_FLAG_FULLSCREEN o View.SYSTEM_UI_FLAG_HIDE_NAVIGATION.
A continuación, se presentan ejemplos de uso del modo LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER:
Modo especial en dispositivos anteriores
Algunos dispositivos con Android 1 o versiones anteriores admiten un modo especial que permite a los usuarios extender una aplicación en formato letterbox en el área de corte. Este modo se controla con un botón de activación en la barra de navegación y requiere confirmación para extender la pantalla.
Pantallas para garrafas de 10 kg: iluminación eficiente y estéticaPrácticas recomendadas para admitir el corte de pantalla
Al trabajar con cortes de pantalla, tener en cuenta las siguientes recomendaciones:
- No permitas que el área de corte oculte textos, controles o información importante.
- No coloques elementos interactivos avanzados en el área de corte, ya que la sensibilidad táctil puede ser menor en esta zona.
- Evita codificar la altura de la barra de estado y utiliza WindowInsetsCompat para obtener la altura adecuada y ajustar el contenido en consecuencia.
- No asumas que la aplicación ocupa toda la ventana, utiliza View.getLocationInWindow() para confirmar la ubicación.
- Asegúrate de manejar correctamente las transiciones entre el modo de pantalla completa y el modo normal.
Esperamos que esta tutorial te haya proporcionado una comprensión clara de cómo utilizar la herramienta de corte de pantalla en formato HTML y cómo personalizar su comportamiento en dispositivos Android compatibles. Recuerda siempre probar tu aplicación en diferentes dispositivos y configuraciones para garantizar una experiencia óptima para los usuarios.
Amplía tu conocimiento sobre Herramienta de corte de pantalla en html: compatibilidad y personalización analizando otros increíbles artículos disponibles en la categoría Pantallas.