Tu app debería funcionar bien en dispositivos Wear OS de todos los tamaños, ya que espacio adicional donde estén disponibles y también se vean bien en pantallas más pequeñas. En esta guía, se proporcionan recomendaciones para lograr esta experiencia del usuario.
Para obtener más información sobre los principios de diseño para diseños adaptables, lee el orientación de diseño.
Cómo compilar diseños responsivos con Horologist
Los diseños deben tener márgenes basados en porcentajes. Como Compose funciona en valores absolutos de forma predeterminada, usa componentes de la La Biblioteca Horologist, que cuenta con las siguientes funciones:
- Los márgenes horizontales se configuran correctamente en función de un porcentaje de la pantalla del dispositivo. de tamaño del ensamble.
- El espaciado superior e inferior están configurados correctamente. Esto presenta desafíos particulares
ya que el espaciado inferior y superior recomendado
depende de que los componentes
que se usan. Por ejemplo, un elemento
Chip
debe tener un espaciado diferente al de un elementoText
cuando se usa en una lista. - Se configuraron correctamente los márgenes de
TimeText
.
El siguiente fragmento de código usa la versión de Horologist de la
Diseño ScalingLazyColumn
para crear contenido que se vea bien en una variedad
de tamaños de pantalla de Wear OS:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
En este ejemplo, también se muestran ScreenScaffold
y AppScaffold
.
Estas coordenadas entre la app y las pantallas individuales
(rutas de navegación) para garantizar el comportamiento de desplazamiento correcto y
Posicionamiento de TimeText
.
También ten en cuenta lo siguiente para el padding inferior y superior:
- La especificación del primer y el último
ItemType
, para determinar el con padding. - El uso de
ResponsiveListHeader
para el primer elemento de la lista porque Los encabezadosText
no deben tener relleno.
Puedes encontrar las especificaciones completas en los kits de diseño de Figma. Para ver más detalles y ejemplos, consulta:
- La biblioteca de Horologist proporciona componentes para ayudar a crear apps optimizadas y diferenciadas para Wear OS.
- El ejemplo de ComposeStarter es un ejemplo en el que se muestra la principios descritos en esta guía.
- El ejemplo de JetCaster, un ejemplo más complejo de creación de un para trabajar con diferentes tamaños de pantalla mediante la biblioteca Horologist.
Usa diseños de desplazamiento en tu app
Usa un diseño de desplazamiento, como se mostró anteriormente en esta página, como opción predeterminada. cuando implementes tus pantallas. Esto permite que los usuarios lleguen a los componentes de tu app independientemente de las preferencias de visualización o del tamaño de la pantalla del dispositivo Wear OS.
![El efecto de diferentes tamaños de dispositivos y escalas de fuentes](https://developer.android.google.cn/static/images/wear/screenshot-test.png?authuser=8&hl=es)
El efecto de los diferentes tamaños de dispositivos y el escalamiento de la fuente.
Diálogos
Los diálogos también deben ser desplazables, a menos que haya una buena razón para no hacerlo.
El componente ResponsiveDialog
, proporcionado por Horologist, agrega la
lo siguiente:
- Desplazamiento predeterminado.
- Corrige los márgenes basados en porcentajes.
- Los botones que ajustan su ancho donde el espacio lo permite, para brindar una mayor botones de presión.
![Comportamiento de diálogo adaptable en Horologist](https://developer.android.google.cn/static/images/wear/adaptive-dialogs.png?authuser=8&hl=es)
Diálogos responsivos, con desplazamiento de forma predeterminada y botones que se adaptan al espacio disponible.
Es posible que las pantallas personalizadas requieran diseños sin desplazamiento
Algunas pantallas aún pueden ser adecuadas para diseños sin desplazamiento. Varios ejemplos incluir la pantalla principal del reproductor en una app de música y la pantalla de entrenamiento en una app de fitness.
En estos casos, consulta la guía canónica proporcionada en la Kits de diseño de Figma e implementar un diseño que se adapte al tamaño de la pantalla con los márgenes correctos.
Proporciona experiencias diferenciadas a través de puntos de interrupción
Con pantallas más grandes, puedes incorporar contenido y funciones adicionales. Para implementar este tipo de experiencia diferenciada; usar puntos de interrupción del tamaño de la pantalla Se muestra un diseño diferente cuando el tamaño de la pantalla supera los 225 dp:
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
La guía de diseño ilustra más de estas oportunidades.
Prueba combinaciones de tamaños de pantalla y fuentes con vistas previas
Las vistas previas de Compose te ayudan a desarrollar para una variedad de tamaños de pantalla de Wear OS. Usa las definiciones de la vista previa de la escala de fuentes y dispositivos para ver lo siguiente:
- Cómo se ven las pantallas en los extremos del tamaño, por ejemplo, la fuente más grande se vinculará con la pantalla más pequeña.
- Cómo se comporta tu experiencia diferenciada entre los puntos de interrupción.
Asegúrate de implementar vistas previas con WearPreviewDevices
y
WearPreviewFontScales
para todas las pantallas de la app
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
Pruebas de capturas de pantalla
Más allá de las pruebas de vista previa, las pruebas de capturas de pantalla te permiten realizar pruebas con diferentes tamaños de hardware existentes. Esto es particularmente útil cuando esos dispositivos no estén disponibles de inmediato, y es posible que el problema no se presente en para otros tamaños de pantalla.
Las pruebas de captura de pantalla también te ayudan a identificar regresiones en ubicaciones específicas en tu base de código.
En nuestros ejemplos, se usa Roborazzi para hacer pruebas de capturas de pantalla:
- Configura los archivos
build.gradle
de tu proyecto y app para usarlos. Roborazzí - Crea una prueba de captura de pantalla para cada pantalla que tengas en tu app. Por ejemplo:
En el ejemplo de ComposeStarter, se aplica una prueba para
GreetingScreen
. implementadas como se ve enGreetingScreenTest
:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Algunos aspectos importantes para tener en cuenta:
FixedTimeSource
te permite generar capturas de pantalla en las queTimeText
no. variar y hacer que las pruebas fallen de forma involuntaria.WearDevice.entries
contiene definiciones para los dispositivos Wear OS más populares, por lo que que las pruebas se ejecuten en un rango representativo de tamaños de pantalla.
Genera imágenes doradas
Si quieres generar imágenes para tus pantallas, ejecuta el siguiente comando en una terminal:
./gradlew recordRoborazziDebug
Verifica las imágenes
Para verificar los cambios en las imágenes existentes, ejecuta el siguiente comando terminal:
./gradlew verifyRoborazziDebug
Para ver un ejemplo completo de pruebas de capturas de pantalla, consulta la muestra de ComposeStarter.