SlidingPaneLayout-estilo Android

El hecho de que el dispositivo plegable no esté oculto aquí. Para el incremento de aplicaciones, presentan algunos nuevos desafíos. Uno de ellos es el hecho de que el número de forma del dispositivo plegable cambia según el estado plegado. Android está diseñado para conceder diferentes factores de forma, por lo que es viable de manejar. Sin requisa, con una nueva biblioteca Jetpack, facilita las cosas: SlidingPaneLayout.

Casos de uso principales SlidingPaneLayout Es donde diferentes tamaños de pantalla requieren diferente UX. Un ejemplo característico es la interfaz de repertorio / información detallada. Los paneles de repertorio y detalles se muestran uno al banda del otro en la pantalla más prócer. Pero el panel de repertorio se muestra en pantalla completa en un celador más pequeño. Haga clic en el pájaro de la repertorio y luego muestre el panel de detalles en pantalla completa.Por lo común, implementamos los paneles de repertorio y detalles como FragmentY luego tenga un diseño hábil que cambie según el tamaño de la pantalla.

SlidingPaneLayout Proporciona casi las mismas funciones, pero ha hecho un gran trabajo para nosotros.

llevado a punta

Lo primero que debemos hacer es incluir dependencias en el plan:

En el momento de escribir, 1.2.0-alpha01 Sí, la última lectura SlidingPaneLayout. Esta es todavía la primera lectura de la biblioteca que incluye soporte plegable, por lo que ahora se debe usar la lectura alfa.

Ahora, podemos crear el diseño:

Aquí usamos RecyclerViewY mostrar el panel de detalles como NavHostFragment.

La secreto aquí es el valía de satisfecho. Estos definen el punto de división entre la visualización de pantalla completa o la visualización en paralelo de dos paneles. Si el satisfecho de la pantalla no es lo suficientemente prócer para acomodar dos anchos, el panel de repertorio se mostrará en pantalla completa. Al tocar un pájaro de la repertorio, el panel de detalles se mostrará en pantalla completa.

Sin requisa, si la pantalla es lo suficientemente amplia para contener dos paneles, se mostrarán uno al banda del otro.Bajo estas circunstancias layout_weight Los atributos pueden volverse muy importantes.Aquí, el peso del panel de detalles es 1. Si no hay otras restricciones, posteriormente de ajustar el tamaño del panel de repertorio, el panel de detalles llenará el espacio restante. Sin requisa, en algunos dispositivos plegables, el orilla entre los dos paneles puede ser la semirrecta de plegado de la pantalla.

El código del fragmento es completamente descreído, todo se maneja mediante el futuro código SlidingPaneLayout. Aunque en algunos casos es posible que deba controlarse mediante programación. SlidingPaneLayout implementar Openeable Por lo tanto, si es necesario, se puede controlar fácilmente mediante programación.

resultado

Lo probé en Samsung Z Fold2 y funcionó muy acertadamente. Sin requisa, no pude capturar video desde este dispositivo, así que tuve que improvisar. Esta captura proviene del ejemplo del émulo «7.6 Plegable con pantalla externa», que es similar a Samsung:

Al cambiar entre el estado plegado y desplegado, habrá un pequeño error de diseño y al revés. Sin requisa, esto no sucede en el dispositivo existente. Sin requisa, muestra muy acertadamente los diferentes modelos de UX.

Pensando

SlidingPaneLayout Muy potente y viable de usar. El concepto detrás del producto plegable todavía me dejó una profunda impresión, y la tecnología se está volviendo más madura. Sin requisa, no estoy demasiado obsesionado con Samsung Z Fold2. Aunque solo el tiempo dirá qué tan usable es la parte de la bisagra de la pantalla, la calidad de fabricación del dispositivo es muy buena. El problema que encontré fue la relación de aspecto de las pantallas plegables y expandibles.

Cuando esté plegada, la pantalla será incorporación, pero no muy ancha (816 x 2260 píxeles) con una relación de aspecto de aproximadamente 1: 3. De hecho, hay muy pocas aplicaciones que puedan resolver acertadamente este problema, especialmente las aplicaciones de extensión de terceros que terminan comprimiendo las columnas. Aunque la aplicación es responsable de adaptarse a la pantalla, esto se siente como una relación de aspecto particularmente incómoda y muchas aplicaciones no pueden adaptarse acertadamente a la pantalla.

Del mismo modo, la pantalla ampliada tiene una relación de aspecto inusual. Tiene 1768 x 2208 píxeles, aproximadamente 1: 1,25. Esto no está fuera de su significación y, nuevamente, esta es una relación de aspecto muy poco global, por lo que la aplicación no puede manejarla acertadamente. Esta es la aplicación BBC Weather:

En la superficie, esto parece estar acertadamente. A posteriori de una inspección cuidadosa, las ramas que caen recortadas de «Hemel Hempstead» (el tallo de la composición «p») son un problema. De forma similar, la «próxima hora» todavía se muestra en el texto que se encuentra en lo alto.

¿Cuál es el problema?

El problema aquí es que técnicamente esta es una pantalla de retrato porque es más ancha y más incorporación. Pero esto no es detención. Por lo tanto, un diseño diseñado para visualización enhiesto no es bueno para una visualización aproximadamente cuadrada.

Como ya he mencionado, las aplicaciones pueden mejorar su diseño. Pero la disyuntiva de hardware aquí significa que la aplicación debe conceder la nueva relación de aspecto. Esto conducirá a un aumento en la cantidad de trabajo de incremento e inspección de calidad necesarios para respaldar dicho equipo. Los artículos plegables siguen siendo poco caros, por lo que no se envían en grandes cantidades. Muchos desarrolladores de aplicaciones sentirán que el esfuerzo adicional no es moderado. Esto puede retrasar a los compradores potenciales.

Aunque me he desviado del tema principal de la publicación, creo que vale la pena mencionarlo. Parece que los fabricantes de dispositivos deben esforzarse más para ganar una relación de aspecto más moderado, de lo contrario, puede destruir muchas interfaces de sucesor de aplicaciones.

en conclusión

SlidingPaneLayout Es una útil muy viable de usar para manejar interfaces de sucesor de múltiples paneles, que requieren diferentes comportamientos en diferentes tamaños de pantalla. Aunque aquí me estoy centrando en la colapsabilidad, todavía es muy útil para hacer que la aplicación funcione acertadamente en un entorno de múltiples ventanas. Si la aplicación no puede mostrar toda la pantalla, SlidingPaneLayout Puede cerciorarse de que su comportamiento se adapte a los cambios en el tamaño de su ventana.

El código fuente de este artículo está habitable aquí.

© 2021, Mark Allison (Mark Allison). reservados todos los derechos.

relacionados

Copyright © 2021 Estilo de Android. reservados todos los derechos.

Para obtener información sobre cómo reutilizar o retornar a imprimir este trabajo, visite http://blog.stylingandroid.com/license-information.