Cómo desarrollar contenido para diferentes tamaños de pantalla

Tu app debería funcionar bien en dispositivos Wear OS de todos los tamaños, aprovechar el espacio adicional cuando esté disponible y verse 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 de los diseños adaptables, consulta la guía de diseño.

Cómo compilar diseños responsivos con Material 3

Los diseños deben tener márgenes basados en porcentajes. En Wear Compose Material 3, ScreenScaffold calcula automáticamente el padding basado en porcentajes y proporciona contentPadding a su lambda de contenido. Pasa este parámetro contentPadding a TransformingLazyColumn.

En el siguiente fragmento de código, se usa un componente TransformingLazyColumn para crear contenido que se vea bien en una variedad de tamaños de pantalla de Wear OS:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

En este ejemplo, también se muestra ScreenScaffold y AppScaffold. Estas coordinan entre la app y las pantallas individuales (rutas de navegación) para garantizar el comportamiento de desplazamiento correcto y el posicionamiento de TimeText.

Para el padding superior e inferior, también ten en cuenta lo siguiente:

  • El uso de Modifier.minimumVerticalContentPadding (como ListHeaderDefaults.minimumTopListContentPadding y ButtonDefaults.minimumVerticalListContentPadding), de modo que TransformingLazyColumn use al menos el padding superior e inferior recomendado cuando esos elementos aparezcan en el borde de la lista.
  • El uso de ListHeader para el primer elemento de la lista, en lugar de un elemento componible Text simple

Puedes encontrar las especificaciones completas en los kits de diseño de Figma. Para obtener más detalles y ejemplos, consulta los siguientes vínculos:

  • La biblioteca de Horologist proporciona asistentes para ayudar a compilar apps optimizadas y diferenciadas para Wear OS.
  • La muestra de ComposeStarter: Es un ejemplo que muestra los principios descritos en esta guía.
  • Muestra de JetCaster: Es un ejemplo más complejo de cómo compilar una app para que funcione con diferentes tamaños de pantalla con la biblioteca de Horologist.

Usa diseños con desplazamiento en tu app

Usa un diseño de desplazamiento, como se mostró anteriormente en esta página, como la opción predeterminada cuando implementes tus pantallas. Esto permite que los usuarios accedan a los componentes de tu app, independientemente de las preferencias de visualización o el tamaño de la pantalla del dispositivo Wear OS.

El efecto de los diferentes tamaños de dispositivos y el ajuste de escala de fuentes

El efecto de los diferentes tamaños de dispositivos y el escalamiento de fuentes

Diálogos

Los diálogos también deben ser desplazables, a menos que haya una razón muy válida para no hacerlo. El componente AlertDialog es responsivo y se puede desplazar de forma predeterminada si el contenido supera la altura del viewport.

Es posible que las pantallas personalizadas requieran diseños sin desplazamiento

Es posible que algunas pantallas sigan siendo adecuadas para diseños sin desplazamiento. Entre los ejemplos, se incluyen la pantalla principal del reproductor en una app de contenido multimedia y la pantalla de entrenamiento en una app de fitness.

En estos casos, consulta la guía canónica que se proporciona en los kits de diseño de Figma y, luego, implementa 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 introducir contenido y funciones adicionales. Para implementar este tipo de experiencia diferenciada, usa puntos de interrupción del tamaño de la pantalla, que muestran 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 de fuente con las vistas previas

Las vistas previas de Compose te ayudan a desarrollar contenido para una variedad de tamaños de pantalla de Wear OS. Usa las definiciones de vista previa de los dispositivos y del ajuste de escala de la fuente para ver lo siguiente:

  • Cómo se ven tus pantallas en los extremos de tamaño, por ejemplo, la fuente más grande combinada con la pantalla más pequeña
  • Cómo se comporta tu experiencia diferenciada en los puntos de interrupción

Asegúrate de implementar vistas previas con WearPreviewDevices y WearPreviewFontScales para todas las pantallas de tu app. Para obtener detalles completos sobre cómo configurar las vistas previas de Wear OS, las especificaciones de hardware personalizadas y las vistas previas de las listas desplazadas, consulta Obtén una vista previa de tu IU en Compose para Wear OS.

@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 en una variedad de tamaños de hardware existentes. Esto es muy útil cuando esos dispositivos no están disponibles de inmediato y es posible que el problema no se presente en otros tamaños de pantalla.

Las pruebas de capturas de pantalla también te ayudan a identificar regresiones en ubicaciones específicas de tu base de código.

Nuestras muestras usan Roborazzi para las pruebas de captura de pantalla:

  1. Configura los archivos build.gradle de tu proyecto y app para usar Roborazzi.
  2. Crea una prueba de captura de pantalla para cada pantalla que tengas en tu app. Por ejemplo, el siguiente código muestra una prueba de captura de pantalla para una pantalla que contiene una lista:
@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

Ten en cuenta los siguientes aspectos importantes:

  • WearDevice.entries contiene definiciones para los dispositivos Wear OS más populares, de modo que las pruebas se ejecuten en un rango representativo de tamaños de pantalla.

Genera imágenes doradas

Para 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 en una terminal:

./gradlew verifyRoborazziDebug

Para ver un ejemplo completo de pruebas de capturas de pantalla, consulta la muestra de ComposeStarter.