Hoy en día, hay en uso más de 300 millones de dispositivos Android con pantalla grande, lo que incluye tablets, plegables, Googlebooks, dispositivos ChromeOS, pantallas de automóviles y TVs, y se siguen sumando más. Para brindar una experiencia del usuario óptima en la creciente cantidad y diversidad de dispositivos con pantalla grande, así como en teléfonos estándar, crea apps adaptables.
¿Qué son las apps adaptables?
Las apps adaptables cambian de diseño según los cambios en la pantalla de la app, principalmente el tamaño de la ventana de la app. Sin embargo, las apps adaptables también se ajustan a los cambios en la posición de los dispositivos plegables, como la posición de mesa o de libro, y a los cambios en la densidad de la pantalla y el tamaño de la fuente.
En lugar de solo estirar o reducir los elementos de la IU en respuesta a diferentes tamaños de ventana, las apps adaptables reemplazan los componentes de diseño y muestran u 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, menos contenido, ya sea la lista o los detalles.
En el pasado, las apps solían ejecutarse en pantalla completa. Hoy en día, 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 y funcionan bien en cualquier dispositivo y con cualquier configuración.
¿Por qué compilar IU adaptables?
Los usuarios esperan que tu app funcione sin problemas en todos sus dispositivos y que proporcione funciones mejoradas en pantallas grandes. Los usuarios realizan varias tareas a la vez en el modo multiventana para obtener una mejor experiencia en la app y aumentar la 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 colecciones y recomendaciones de apps específicas para tablets y dispositivos plegables, lo que permite que los usuarios descubran apps de alta calidad.
Play clasifica las apps y los juegos optimizados para pantallas grandes en una posición más alta que las apps no optimizadas. Play basa la clasificación 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 las calificaciones y opiniones específicas de pantallas grandes en sus teléfonos.
Las apps que no cumplen con los estándares de calidad para pantallas grandes de Play Store muestran una advertencia en la página de detalles de la app. La advertencia les indica a los usuarios que es posible que la app no funcione bien en sus dispositivos con pantallas grandes.
Crea 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 crearás una app que sea administrable, extensible y esté lista para futuros factores de forma y modos de ventanas.
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
- Cómo compilar con la biblioteca adaptable de Compose Material 3
- Cómo admitir entradas más allá de la táctil
- Realiza pruebas en todos los tipos de dispositivos
Habilidades de Android
Ver en GitHubCómo hacer que tu app sea adaptable
adaptive para actualizar la IU de tu app de modo que se adapte a diferentes dispositivos y pantallas Android.android skills add adaptiveClases de tamaño de ventana
Las dimensiones de la ventana de la app pueden ser diferentes en distintos 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 distintas 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 los 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 adaptable de Compose Material 3. La función devuelve 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 ocupa toda 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, pueden aparecer 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 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 Adaptive
Jetpack Compose es el enfoque declarativo moderno para compilar apps adaptables sin la carga de duplicación y mantenimiento de varios archivos de diseño.
La biblioteca adaptable de Compose Material 3 contiene elementos componibles que administran las clases de tamaño de ventana, los componentes de navegación, los diseños de varios paneles, las posturas de plegado y la ubicación de la bisagra, 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 la ventana de la app y la postura 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 contiguos 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 lateral.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 clave para desarrollar apps adaptables.
Configuración y continuidad
Las apps adaptables mantienen la continuidad durante los cambios de configuración.
Se produce un cambio de configuración cuando se modifica el tamaño de la ventana de la app, cambia la posición de un dispositivo plegable o se modifica 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 posturas incluyen la de mesa y la de libro.
La interfaz WindowInfoTracker de Jetpack WindowManager te permite obtener una lista de objetos DisplayFeature para el dispositivo. Entre las funciones de pantalla, se encuentra FoldingFeature.State, que indica si el dispositivo está completamente abierto o medio abierto.
La biblioteca adaptable de Compose Material 3 proporciona la función de nivel superior currentWindowAdaptiveInfo(), que devuelve una instancia de WindowAdaptiveInfo que contiene windowPosture.
Entrada más allá de la táctil
Los usuarios suelen conectar teclados, paneles táctiles, mouses y plumas stylus externos a dispositivos con pantallas grandes. Los periféricos mejoran la productividad de los usuarios, la precisión de las entradas, 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 y el clic, la selección y el desplazamiento con el 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 en las combinaciones de teclas: Permite que los usuarios descubran las combinaciones de teclas de la plataforma de Android y de las apps. Publica las combinaciones de teclas de tu app en el asistente de combinaciones de teclas anulando la devolución de llamada de la ventana
onProvideKeyboardShortcuts().
Para admitir por completo factores de forma de todos los tamaños, las apps adaptables admiten entradas de todo tipo.
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 te ayudan a verificar que tu app adaptable funcione bien en tablets, dispositivos plegables y dispositivos ChromeOS. Los lineamientos incluyen pruebas que te permiten verificar las funcionalidades de la app para los recorridos críticos del usuario. Si bien los lineamientos se enfocan en las pantallas grandes, son compatibles con todos los tamaños de pantalla.
Múltiples configuraciones
La interfaz DeviceConfigurationOverride de 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 de IU arbitrarios en una sola ejecución de tu paquete 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 la 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 captura de pantalla del host son una forma rápida y escalable de verificar la apariencia visual de los diseños de tu app. Usa capturas de pantalla del host para probar la 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 que puedas 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 los botones o los campos de texto demasiado anchos.
Para obtener más información, consulta Obtén 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 alternar 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 de pantalla grande Pixel Tablet
- Emulador de escritorio: Te permite probar las ventanas de formato libre, el desplazamiento del mouse y las combinaciones de teclas.
Transmisión de dispositivos remotos
Conéctate de forma segura a dispositivos Android remotos alojados en los 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 verificar 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 la tecnología de Firebase.
Recursos adicionales
- Presentación de I/O: Cómo compilar apps adaptables para Android