Hoy en día, hay en uso más de 300 millones de dispositivos Android con pantallas grandes, lo que incluye tablets, plegables, dispositivos ChromeOS, pantallas para vehículos y TVs, y se agregan más continuamente. Para proporcionar una experiencia del usuario óptima en la creciente cantidad y diversidad de dispositivos con pantalla grande, así como en teléfonos estándar, compila apps adaptables.
¿Qué son las apps adaptables?
Las apps adaptables cambian los diseños en función de los cambios en la pantalla de la app, principalmente el tamaño de la ventana de la app. Sin embargo, las apps adaptativas también se adaptan a los cambios en la posición de los dispositivos plegables, como la posición de mesa o de libro, y los cambios en la densidad de la pantalla y el tamaño de la fuente.
En lugar de solo estirar o contraer los elementos de la IU en respuesta a diferentes tamaños de ventana, las apps adaptables reemplazan los componentes de diseño y muestran o ocultan contenido. Por ejemplo, en teléfonos estándar, una app adaptable puede mostrar una barra de navegación inferior, pero en pantallas grandes, un riel de navegación. En pantallas grandes, las apps adaptables muestran más contenido, como un diseño de lista-detalles de dos paneles. En pantallas pequeñas, muestran menos contenido, ya sea la lista o los detalles.
En el pasado centrado en los teléfonos, las apps se ejecutaban en pantalla completa. Actualmente, las apps se ejecutan en el modo multiventana en ventanas de tamaño arbitrario, independientemente del tamaño de la pantalla del dispositivo. Los usuarios pueden cambiar el tamaño de la ventana en cualquier momento. Por lo tanto, incluso en un solo tipo de dispositivo, las apps deben ser adaptables.
Las apps adaptables se ven bien y funcionan bien en cualquier dispositivo y configuración.
¿Por qué compilar IUs adaptables?
Los usuarios esperan que tu app funcione sin problemas en todos sus dispositivos y brinde funciones mejoradas en pantallas grandes. Los usuarios realizan varias tareas en el modo multiventana para obtener una experiencia de app mejorada y una mayor productividad.
Las apps limitadas a una sola tarea en teléfonos estándar se pierden una base de usuarios en expansión con diversas posibilidades.
Google Play
Google Play ofrece recomendaciones y colecciones de apps específicas para tablets y dispositivos plegables, lo que permite a los usuarios descubrir apps de alta calidad.
Play clasifica las apps y los juegos optimizados para pantallas grandes por encima de las apps que no están optimizados. La clasificación se basa en los lineamientos de calidad de las apps para pantallas grandes. Una clasificación más alta aumenta la visibilidad, ya que permite que los usuarios de varios dispositivos vean calificaciones y opiniones específicas para pantallas grandes en sus teléfonos.
Las apps que no cumplen con los estándares de calidad de Play Store para pantallas grandes muestran una advertencia en la página de detalles de la app. La advertencia les informa a los usuarios que es posible que la app no tenga un buen rendimiento en sus dispositivos con pantallas grandes.
Compila apps adaptables para ampliar la visibilidad en Google Play y maximizar la cantidad de dispositivos que pueden descargar tu app.
Cómo comenzar
Piensa en el diseño adaptable en todas las fases del desarrollo de la app, desde la planificación hasta la implementación. Informar a los diseñadores gráficos sobre el diseño adaptable Diseña tu app para que sea adaptable y compilarás una app que sea manejable, extensible y esté lista para futuros factores de forma y modos de ventana.
Para crear una app adaptable que admita todos los tamaños y las configuraciones de pantalla, haz lo siguiente:
- Usa clases de tamaño de ventana para tomar decisiones de diseño
- Compila con la biblioteca adaptable de Compose Material 3
- Admite entradas más allá del toque
- Cómo realizar pruebas en todos los tipos de dispositivos
Clases de tamaño de ventana
Las dimensiones de la ventana de la app pueden ser diferentes en diferentes dispositivos (o en el mismo dispositivo en el caso de los plegables), incluso cuando la app está en pantalla completa. Las diferentes orientaciones del dispositivo producen diferentes relaciones de aspecto. En el modo multiventana, el tamaño, la relación de aspecto y la orientación de la ventana de la app pueden diferir de los de la pantalla del dispositivo.
Las apps adaptables simplifican y generalizan el problema de determinar y administrar el tamaño, la relación de aspecto y la orientación de la ventana, ya que solo consideran la ventana de la app cuando renderizan diseños, lo que también funciona cuando la ventana de la app es la pantalla completa.
Las clases de tamaño de ventana categorizan las ventanas de la app como compactas, medianas o expandidas según el ancho o la altura de la ventana.
Calcula el WindowSizeClass de tu app con la función de nivel superior currentWindowAdaptiveInfo() de la biblioteca de Compose Material 3 Adaptive. La función muestra una instancia de WindowAdaptiveInfo, que contiene windowSizeClass. Tu app recibe actualizaciones cada vez que cambia la clase de tamaño de ventana:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Paneles de contenido
A veces, el diseño de una actividad se denomina pantalla. Por ejemplo, tu app podría tener una pantalla principal, una pantalla de lista y una pantalla de detalles del elemento. La terminología implica que cada actividad cubre la pantalla del dispositivo.
Sin embargo, en las pantallas de dispositivos que son lo suficientemente grandes como para admitir la clase de tamaño de ventana de ancho expandido, se pueden mostrar varias pantallas de actividad al mismo tiempo. Panel es un término más preciso para las pantallas de contenido de actividades individuales.
Las clases de tamaño de ventana te permiten determinar cuántos paneles de contenido mostrar en los diseños de varios paneles, como se especifica en Material Design.
Los paneles son navegables. En las clases de tamaño de ventana compacto y mediano, las apps muestran un solo panel, por lo que la navegación a cualquier destino muestra un solo panel.
En la clase de tamaño de ventana expandida, las apps pueden mostrar contenido relacionado en varios paneles, como un diseño de lista-detalles. La navegación a cualquiera de los paneles muestra el diseño de dos paneles. Si el tamaño de la ventana cambia a compacto o mediano, las apps adaptables muestran solo un panel, el destino de navegación, ya sea la lista o los detalles.
|
|
|
Compose Material 3 adaptable
Jetpack Compose es el enfoque moderno y declarativo para compilar apps adaptables sin la duplicación y la carga de mantenimiento de varios archivos de diseño.
La biblioteca adaptable de Material 3 de Compose contiene elementos componibles que administran clases de tamaño de ventana, componentes de navegación, diseños de varios paneles, posiciones de bisagra y posturas plegables, por ejemplo:
NavigationSuiteScaffold: Cambia automáticamente entre la barra de navegación y el riel de navegación según la clase de tamaño de ventana de la app y la posición del dispositivo.ListDetailPaneScaffold: Implementa el diseño canónico de lista-detalles.Adapta el diseño al tamaño de la ventana de la app. Presenta una lista y los detalles de un elemento de lista en paneles uno al lado del otro en la clase de tamaño de ventana expandida, pero solo la lista o los detalles en las clases de tamaño de ventana compacta y mediana.
SupportingPaneScaffold: Implementa el diseño canónico del panel de ayuda.Presenta el panel de contenido principal y un panel complementario en la clase de tamaño de ventana expandida, pero solo el panel de contenido principal en las clases de tamaño de ventana compacta y mediana.
La biblioteca de Compose Material 3 Adaptive es una dependencia obligatoria para desarrollar apps adaptables.
Configuración y continuidad
Las apps adaptables conservan la continuidad durante los cambios de configuración.
Un cambio de configuración se produce cuando se cambia el tamaño de la ventana de la app, cambia la posición de un dispositivo plegable o cambia la densidad de la pantalla o la fuente.
De forma predeterminada, los cambios de configuración recrean la actividad de la app y se pierde todo el estado de la actividad. Para mantener la continuidad, las apps adaptables guardan el estado en el método onSaveInstanceState() de la actividad o en un ViewModel.
Postura
Las apps adaptables responden a los cambios en la posición de los dispositivos plegables. Las posiciones incluyen la posición de mesa y la posición de libro.
La interfaz WindowInfoTracker de Jetpack WindowManager te permite obtener una lista de objetos DisplayFeature para el dispositivo. Entre las funciones de la pantalla, se encuentra FoldingFeature.State, que indica si el dispositivo está completamente abierto o medio abierto.
La biblioteca de Compose Material 3 Adaptive proporciona la función de nivel superior currentWindowAdaptiveInfo(), que muestra una instancia de WindowAdaptiveInfo que contiene windowPosture.
Entradas más allá del tacto
Los usuarios suelen conectar teclados, paneles táctiles, mouses y plumas stylus externos a dispositivos con pantallas grandes. Los periféricos mejoran la productividad del usuario, la precisión de entrada, la expresión personal y la accesibilidad. La mayoría de los dispositivos ChromeOS incluyen teclados y paneles táctiles integrados.
Las apps adaptables admiten dispositivos de entrada externos, pero el framework de Android hace gran parte del trabajo por ti:
Jetpack Compose 1.7 y versiones posteriores: La navegación con la tecla Tab del teclado y el clic, la selección y el desplazamiento del mouse o el panel táctil son compatibles de forma predeterminada.
Biblioteca
androidx.compose.material3de Jetpack: Permite que los usuarios escriban en cualquier componenteTextFieldcon una pluma stylus.Ayuda de combinaciones de teclas: Permite que los usuarios descubran las combinaciones de teclas del teclado de la plataforma y la app de Android. Para publicar las combinaciones de teclas de tu app en el Asistente de combinaciones de teclas, anula la devolución de llamada de la ventana
onProvideKeyboardShortcuts().
Para admitir completamente los factores de forma de todos los tamaños, las apps adaptables admiten entradas de todos los tipos.
Cómo probar apps adaptables
Prueba diferentes tamaños de pantalla y ventana, y diferentes configuraciones de dispositivos. Usa capturas de pantalla del host y vistas previas de Compose para verificar los diseños de tu app. Ejecuta tu app en emuladores de Android Studio y dispositivos Android remotos alojados en centros de datos de Google.
Lineamientos de calidad de las apps para pantallas grandes
Los lineamientos de calidad de las apps para pantallas grandes garantizan que tu app adaptable funcione bien en tablets, plegables y dispositivos ChromeOS. Los lineamientos incluyen pruebas que te permiten verificar la funcionalidad de la app para los recorridos críticos del usuario. Aunque los lineamientos se enfocan en pantallas grandes, son compatibles con todos los tamaños de pantalla.
Varias configuraciones
La interfaz DeviceConfigurationOverride en Compose 1.7 y versiones posteriores te permite anular varios aspectos de la configuración del dispositivo. La API simula diferentes configuraciones de dispositivos de forma localizada para cualquier contenido componible que quieras probar. Por ejemplo, puedes probar varios tamaños arbitrarios de la IU en una sola ejecución del conjunto de pruebas en un solo dispositivo o emulador.
Con la función de extensión DeviceConfigurationOverride.then(), puedes
probar varios parámetros de configuración, como el tamaño de fuente, la configuración regional, el tema y
el tamaño del diseño, todo al mismo tiempo.
Capturas de pantalla del host
Las pruebas de capturas de pantalla del host son una forma rápida y escalable de verificar el aspecto visual de los diseños de tu app. Usa capturas de pantalla del host para probar tu IU en una variedad de tamaños de pantalla.
Para obtener más información, consulta Pruebas de capturas de pantalla de la vista previa de Compose.
Vistas previas de Compose
Las vistas previas de Compose te permiten verificar la IU de tu app en la vista de diseño de Android Studio. Las vistas previas usan anotaciones, como @PreviewScreenSizes,
@PreviewFontScale y @PreviewLightDark, para permitirte ver el contenido componible
en varias configuraciones. Incluso puedes interactuar con las vistas previas.
Android Studio también destaca los problemas de usabilidad comunes en las vistas previas, como botones o campos de texto demasiado anchos.
Para obtener más información, consulta Cómo obtener una vista previa de tu IU con vistas previas de elementos componibles.
Emuladores
Android Studio ofrece una variedad de emuladores para probar diferentes tamaños de diseño:
- Emulador de tamaño variable: Emula un teléfono, una tablet o un dispositivo plegable y te permite cambiar entre ellos sobre la marcha.
- Emulador de Pixel Fold: Emula el teléfono plegable de pantalla grande Pixel Fold.
- Emulador de Pixel Tablet: Emula el dispositivo con pantalla grande de la Pixel Tablet.
- Emulador de computadora de escritorio: Permite probar ventanas de formato libre, colocar el mouse sobre un elemento y combinaciones de teclas.
Transmisión de dispositivos remotos
Conéctate de forma segura a dispositivos Android remotos alojados en centros de datos de Google y ejecuta tu app en los dispositivos Pixel y Samsung más recientes. Instala y depura apps, ejecuta comandos de ADB y rota y pliega dispositivos para asegurarte de que tu app funcione bien en una variedad de dispositivos reales.
La transmisión de dispositivos remotos está integrada en Android Studio. Para obtener más información, consulta Transmisión de dispositivos Android con tecnología de Firebase.
Recursos adicionales
- Presentación de I/O: Cómo compilar apps para Android adaptables