Más de 300 millones de dispositivos Android con pantalla grande, incluidas tablets, plegables, dispositivos ChromeOS, pantallas de autos y TVs, que se usan actualmente llegan continuamente. Para brindar una experiencia del usuario óptima en el creciente número y la diversidad de dispositivos de pantalla grande, y en teléfonos estándar: crea y apps adaptables.
¿Qué son las apps adaptables?
Diseños de remodelación adaptables de apps en función de los cambios en la pantalla de la app, principalmente los cambios en el tamaño de la ventana de la app. Pero las apps adaptables también admiten cambios en la posición de los dispositivos plegables, como la posición de mesa o de libro y cambia 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 ocultan o muestran contenido. Por ejemplo, en teléfonos estándar, una app adaptable podría mostrar una parte 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. activado pantallas pequeñas, menos contenido, ya sea la lista o los detalles.
En el pasado, que se desvanecía y se centraba en los teléfonos, las apps se ejecutaban en pantalla completa. Hoy en día, las aplicaciones se ejecutan en modo multiventana en ventanas de tamaño arbitrario, independientemente de la pantalla del dispositivo de tamaño del ensamble. Los usuarios pueden cambiar el tamaño de la ventana en cualquier momento. Así que incluso en un solo dispositivo las apps deben ser adaptables.
Las apps adaptables se ven muy bien y funcionan bien en cualquier dispositivo y configuración.
¿Por qué compilar IU adaptables?
Los usuarios esperan que tu app funcione a la perfección en todos sus dispositivos y brinde y capacidades mejoradas en pantallas grandes. Los usuarios realizan varias tareas en el modo multiventana para una experiencia mejorada en la app y más productividad.
Las apps limitadas a una sola tarea en teléfonos estándar pierden la cantidad de usuarios cada vez más grandes. de diversas posibilidades.
Google Play
Google Play ofrece colecciones de apps específicas para tablets y plegables, y recomendaciones, que permiten a los usuarios descubrir apps de alta calidad.
Play clasifica las apps y los juegos optimizados para pantallas grandes más arriba que no optimizados de Google Chat. La clasificación se basa en los lineamientos de calidad de las apps para pantallas grandes. Más alta la clasificación aumenta la visibilidad, ya que permite que los usuarios de múltiples dispositivos vean 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 en la página de detalles de la app. La advertencia les aconseja a los usuarios que la app podría no funcionan bien en dispositivos con pantallas grandes.
Compila apps adaptables para ampliar la visibilidad en Google Play y maximizar la cantidad de dispositivos que pueden descargar tu aplicación.
Cómo comenzar
Piensa en el diseño adaptable en todas las fases del desarrollo de aplicaciones, desde la planificación hasta de Google Workspace. Informa a los diseñadores gráficos sobre el diseño adaptable. Diseña tu app para Ser adaptable, y compilarás una app que sea administrable, extensible y lista para futuros factores de forma y modos de renderización en ventanas.
Para crear una app adaptable que admita todas las configuraciones y tamaños de pantalla, lo siguiente:
- Cómo usar clases de tamaño de ventana para tomar decisiones de diseño
- Cómo compilar con la biblioteca adaptable de Compose Material 3
- Admite entradas más allá de los controles táctiles
- Cómo realizar pruebas en todo tipo de dispositivos
Clases de tamaño de ventana
Las dimensiones de la ventana de la app pueden ser diferentes en distintos dispositivos o en el mismo en dispositivos 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 de la ventana de la app, la relación de aspecto y la orientación es diferente a la de la pantalla del dispositivo.
Las apps adaptables simplifican y generalizan el problema de determinar y administrar el tamaño de la ventana, la relación de aspecto y la orientación si solo se tiene en cuenta la ventana de la app cuando se renderizan diseños, que también funciona cuando la ventana de la app está en pantalla completa.
Las clases de tamaño de ventana clasifican las ventanas de apps como compactas, medianas o expandida según el ancho o alto de la ventana.
Calcula el WindowSizeClass de tu app con la
Función de nivel superior currentWindowAdaptiveInfo() de Compose
Biblioteca adaptable de Material 3. 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
El diseño de una actividad a veces también se denomina pantalla. Por ejemplo, tu podría tener una pantalla principal, una de lista y otra de detalles del elemento. El la terminología implica que cada actividad ocupa la pantalla del dispositivo.
Sin embargo, en los dispositivos con pantallas que sean lo suficientemente grandes como para admitir el ancho expandido clase de tamaño de ventana, se pueden mostrar varias pantallas de actividad al mismo tiempo. Panel es un término más preciso para describir la visualización de contenido de actividades individuales.
Las clases de tamaño de ventana te permiten determinar cuántos paneles de contenido mostrar en diseños de varios paneles, como se especifica en Material Design.
Los paneles son navegables. En las clases de tamaño de ventana compacta y mediana, las apps muestran una panel único; Por lo tanto, la navegación a cualquier destino muestra un panel.
En la clase de tamaño de ventana expandida, las apps pueden mostrar contenido relacionado de varias paneles, como un diseño de lista-detalles. La navegación a cualquiera de los paneles muestra el diseño de doble panel. Si el tamaño de la ventana cambia a compacta o mediana, 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 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 y posiciones plegables y la ubicación de las bisagras, por ejemplo:
NavigationSuiteScaffold: Cambia automáticamente entre la barra de navegación. y un riel de navegación según la clase de tamaño de la ventana de la app y la posición del dispositivo.ListDetailPaneScaffold: Implementa la canónica de lista-detalles. diseño.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 en paralelo en el tamaño de la ventana expandida sino solo la lista o los detalles sobre el tamaño de ventana compacta y mediana .
SupportingPaneScaffold: Implementa el panel canónico del panel complementario. diseño.Presenta el panel de contenido principal y un panel complementario en la ventana expandida de tamaño, pero solo en el panel de contenido principal en las ventanas compactas y medianas. .
La biblioteca adaptable de Compose Material 3 es una dependencia imprescindible 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, la posición de una el dispositivo plegable o la densidad de la pantalla o la fuente.
De forma predeterminada, los cambios en la configuración recrean la actividad de la app y toda la actividad.
se pierde este estado. Para mantener la continuidad, las apps adaptables guardan el estado en
onSaveInstanceState() de la actividad o en una ViewModel
Postura
Las apps adaptables responden a los cambios en la posición de los dispositivos plegables. Posturas incluyen la posición de mesa y de libro.
La interfaz WindowInfoTracker de Jetpack WindowManager te permite realizar las siguientes acciones:
obtener una lista de objetos DisplayFeature para el dispositivo Entre la pantalla
es FoldingFeature.State, que indica si el dispositivo está
abierta por completo o parcialmente abierta.
La biblioteca adaptable de Compose Material 3 proporciona lo siguiente:
función de nivel superior currentWindowAdaptiveInfo(), que muestra un
instancia de WindowAdaptiveInfo que contiene windowPosture.
Entrada más allá del tacto
Los usuarios suelen conectar teclados externos, paneles táctiles, mouse y plumas stylus a pantallas grandes dispositivos de pantalla. Los periféricos mejoran la productividad del usuario, la precisión de las entradas la expresión personal y la accesibilidad. La mayoría de los dispositivos ChromeOS incluyen y paneles táctiles integrados.
Las apps adaptables admiten dispositivos de entrada externos, pero se hace gran parte del trabajo para por el framework de Android:
Jetpack Compose 1.7 y versiones posteriores: Navegación por la pestaña del teclado y mouse o La opción para hacer clic, seleccionar y desplazar del panel táctil son compatibles de forma predeterminada.
Biblioteca de
androidx.compose.material3de Jetpack: Permite que los usuarios escriban. en cualquier componenteTextFieldcon una pluma stylus.Asistente de combinaciones de teclas: Incorpora la plataforma de Android y el teclado de la app. de acceso directo visibles para los usuarios. Publica las combinaciones de teclas de tu app en la ayuda de las combinaciones de teclas anulando Devolución de llamada de la ventana
onProvideKeyboardShortcuts().
Para admitir factores de forma de todos los tamaños, las apps adaptables admiten entradas de todos los tamaños. de tipos de datos.
Cómo probar apps adaptables
Prueba diferentes tamaños de pantalla y ventana, así como 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 correctamente 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. Si bien el los lineamientos se centran en las pantallas grandes, son compatibles con todos los tamaños.
Varios parámetros de configuración
La interfaz DeviceConfigurationOverride en Compose 1.7 y versiones posteriores
te permite anular varios aspectos de la configuración del dispositivo. La API
que simula diferentes configuraciones de dispositivos de forma localizada para cualquier
el contenido componible que quieres probar. Por ejemplo, puedes probar varias
tamaños arbitrarios de IU 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
prueba 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 lado del host son una forma rápida y escalable de verificar la imagen de los diseños de tu aplicación. Usa capturas de pantalla del lado del host para probar tu IU para una varios tamaños de visualización.
Para obtener más información, consulta Prueba de captura 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.
a Looker Studio. Las vistas previas usan anotaciones, como @PreviewScreenSizes,
@PreviewFontScale y @PreviewLightDark para ver elementos componibles
el contenido en varias configuraciones. Incluso puedes interactuar con las vistas previas.
Android Studio también destaca problemas de usabilidad comunes en las vistas previas, como los siguientes: 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 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 permite cambias entre ellas sobre la marcha
- Emulador de Pixel Fold: Emula el teléfono plegable de pantalla grande del Pixel Fold
- Emulador de Pixel Tablet: Emula el dispositivo de pantalla grande de la Pixel Tablet
- Emulador de escritorio: permite probar el sistema de ventanas de formato libre, el desplazamiento del mouse y combinaciones de teclas
Transmisión remota de dispositivos
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 rotar y plegar dispositivos para garantizar que tu app funcione bien en una variedad de dispositivos reales.
La transmisión remota de dispositivos 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 E/S: Cómo compilar apps adaptables para Android