Aplicaciones Android

SlidingPaneLayout – Estilo para Android

No se puede ocultar el hecho de que los dispositivos plegables están aquí. Plantean algunos nuevos desafíos para el desarrollo de aplicaciones. Uno de ellos es el hecho de que el factor de forma de un dispositivo plegable cambia según su estado plegado. Android admite diferentes factores de forma, por lo que es bastante fácil de usar. Sin embargo, hay una nueva biblioteca Jetpack que facilita aún más las cosas: SlidingPaneLayout.

El caso de uso principal para SlidingPaneLayout Los diferentes tamaños de pantalla requieren diferentes UX. El ejemplo clásico de esto es una interfaz de lista / detalle. Las ventanas de lista y detalles se muestran una al lado de la otra en pantallas más grandes. Sin embargo, el área de la lista se muestra en modo de pantalla completa en pantallas más pequeñas. Cuando hace clic en un elemento de la lista, el panel de detalles se muestra en modo de pantalla completa. Por lo general, implementamos las ventanas de lista y detalle como Fragmentsy luego tener un diseño maestro que cambia según el tamaño de la pantalla.

SlidingPaneLayout ofrece casi la misma funcionalidad pero hace mucho del trabajo pesado por nosotros.

implementación

Primero, necesitamos agregar la dependencia a nuestro proyecto:

Publicaciones relacionadas

En el momento de escribir 1.2.0-alpha01 es la última versión de SlidingPaneLayout. Esta es también la primera versión de la biblioteca que incluye soporte plegable. Por lo tanto, la versión alfa debe utilizarse por el momento.

Ahora podemos crear nuestro diseño:

Aquí hemos implementado el área de lista con un RecyclerViewy el panel de detalles como NavHostFragment.

Lo más importante aquí son los valores de latitud. Estos definen el punto de división entre la visualización de las dos ventanas en modo de pantalla completa o una al lado de la otra. Si la pantalla no es lo suficientemente ancha para adaptarse a ambos anchos, el área de la lista se muestra en modo de pantalla completa. Al tocar un elemento de la lista, se muestra la ventana de detalles en modo de pantalla completa.

Sin embargo, si la pantalla es lo suficientemente amplia para incluir ambas ventanas, aparecerán una al lado de la otra. En este caso lo es layout_weight El atributo puede volverse importante. Aquí la ventana de detalle tiene un peso de 1. El área de detalles llena el área restante una vez que se cambia el tamaño del área de la lista, a menos que existan otras restricciones. Sin embargo, en algunos dispositivos plegables, el límite entre dos ventanas puede ser la línea de plegado de la pantalla.

El código del fragmento es completamente independiente de él: todo lo maneja SlidingPaneLayout. Sin embargo, en algunos casos puede ser necesario controlar esto mediante programación. SlidingPaneLayout equipo Openeable por tanto, se puede controlar fácilmente mediante un programa si es necesario.

Resultados

Probé esto en un Samsung Z Fold2 y funciona muy bien. Sin embargo, no pude grabar videos desde este dispositivo, así que tuve que improvisar. Esta grabación es de una instancia del emulador «7.6 Fold-in with Outer Display» que es similar a la de Samsung:

Se produce un pequeño error de diseño durante la transición entre los estados plegado y desplegado y viceversa. Sin embargo, esto no sucedió en el dispositivo real. Sin embargo, muestra bastante bien los diferentes modelos de UX.

Pensar

SlidingPaneLayout es increíblemente potente y fácil de usar. El concepto detrás de los folletos también me impresiona y la tecnología está madurando. Sin embargo, estaba menos enamorado del Samsung Z Fold2. La calidad de construcción del dispositivo es excelente, aunque solo el tiempo dirá qué tan resistente será el área con bisagras de la pantalla. El problema que tengo es con las relaciones de aspecto de las pantallas plegadas y desplegadas.

Cuando está plegada, la pantalla es muy grande, pero no muy ancha (816 x 2260 píxeles), con una relación de aspecto de aproximadamente 1: 3. Muy pocas aplicaciones manejan esto bien, especialmente las aplicaciones de inicio de terceros que aprietan las columnas. Si bien es responsabilidad de las aplicaciones adaptarse a la pantalla, esto parece una relación de aspecto particularmente incómoda, y muchas aplicaciones simplemente no funcionan bien con ella.

Del mismo modo, la pantalla desplegada también tiene una relación de aspecto inusual. Tiene 1768 x 2208 píxeles, aproximadamente 1: 1,25. Esto no está lejos del cuadrado, y nuevamente, esta es una relación de aspecto bastante inusual que las aplicaciones no pueden manejar bien. Aquí está la aplicación BBC Weather:

A primera vista, se ve bien. En una inspección más cercana, la descendencia recortada en «Hemel Hempstead» (es decir, el tallo de la letra «p») es un problema. «La próxima hora» también se encuentra en el texto anterior.

¿Cuál es el problema?

El problema con esto es que técnicamente se trata de una pantalla de retrato, ya que es más alta que ancha. Pero no es mucho más grande. Por lo tanto, un diseño para un anuncio vertical no funcionará tan bien para un anuncio casi cuadrado.

Como se mencionó anteriormente, las aplicaciones pueden mejorar sus propios diseños. Sin embargo, las opciones de hardware significan que hay nuevas relaciones de aspecto que las aplicaciones deben admitir. Esto conduce a un mayor esfuerzo de desarrollo y control de calidad que se requiere para admitir dichos dispositivos. Los artículos plegables siguen siendo un poco caros y, por lo tanto, no vienen en grandes cantidades. Muchos desarrolladores de aplicaciones sentirán que el esfuerzo adicional no puede justificarse. Esto puede desanimar a los compradores potenciales.

Aunque me desvié del tema principal de la publicación, me pareció digno de mención. Parece que los fabricantes de dispositivos deben esforzarse más para mantener relaciones de aspecto más razonables o correr el riesgo de dañar muchas interfaces de usuario de aplicaciones.

Conclusión

SlidingPaneLayout es una herramienta muy fácil de usar para manejar múltiples interfaces de usuario que requieren diferentes comportamientos en diferentes tamaños de pantalla. Si bien me he centrado en los folletos aquí, también es extremadamente útil cuando las aplicaciones funcionan bien en un entorno de múltiples ventanas. Si la aplicación no obtiene la pantalla completa, SlidingPaneLayout puede garantizar que su comportamiento se adapte al tamaño cambiante de la ventana.

Copyright © 2021 . Reservados todos los derechos.

LEER  Recursos dinámicos de Android usando scripts Bash

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba