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, además, 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 para diseños adaptables, lee la guía de diseño.

Cómo compilar diseños responsivos con Horologist

Los diseños deben tener márgenes basados en porcentajes. Como Compose funciona de forma predeterminada en valores absolutos, usa componentes de la Biblioteca Horologist, que tiene las siguientes funciones:

• Los márgenes horizontales se configuran correctamente en función de un porcentaje del tamaño de la pantalla del dispositivo.
• El espaciado superior e inferior están configurados correctamente. Esto presenta desafíos particulares, ya que el espaciado inferior y superior recomendado puede depender de los componentes que se usan. Por ejemplo, un elemento Chip debe tener un espaciado diferente al de un componente Text cuando se usa en una lista.
• Se configuraron correctamente los márgenes de TimeText.

En el siguiente fragmento de código, se usa la versión de Horologist del diseño de ScalingLazyColumn para crear contenido que se vea bien en una variedad de tamaños de pantalla de Wear OS:

import com.google.android.horologist.compose.layout.ScalingLazyColumn

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.Text,
        last = ItemType.SingleButton
    )
)

ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState,
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(...)
        }
    }
}

En este ejemplo, también se muestran ScreenScaffold]3 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.

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 relleno correcto.
• El uso de ResponsiveListHeader para el primer elemento de la lista, porque los encabezados Text no deberían tener padding

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

• La biblioteca de Horologist proporciona componentes que ayudan a crear apps optimizadas y diferenciadas para Wear OS.
• La muestra de ComposeStarter es un ejemplo que muestra los principios descritos en esta guía.
• El ejemplo de JetCaster: Un ejemplo más complejo de cómo compilar una app para que funcione 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 las pantallas. De esta manera, los usuarios pueden acceder a los componentes de tu app sin importar las preferencias de visualización ni el tamaño de la pantalla del dispositivo Wear OS.

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 lo siguiente:

• Desplazamiento predeterminado.
• Corrige los márgenes basados en porcentajes.
• Botones que ajustan su ancho donde el espacio lo permite para proporcionar controles de presión adicionales

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 incluyen 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 los kits de diseño de Figma e implementa un diseño que sea responsivo en el 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, usa los 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 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 sincronizada 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 tu app.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

Pruebas de capturas de pantalla

Más allá de las pruebas de versión preliminar, las pruebas de capturas de pantalla te permiten realizar pruebas en una variedad de tamaños de hardware existentes. Esto es muy útil cuando es posible que esos dispositivos no estén disponibles de inmediato para ti y 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.

En nuestros ejemplos, se usa Roborazzi para hacer pruebas de capturas de pantalla:

1. Configura los archivos build.gradle de tu proyecto y app para que usen Roborazzi.
2. Crea una prueba de captura de pantalla para cada pantalla que tengas en tu app. Por ejemplo, en el ejemplo de ComposeStarter, se implementa una prueba para GreetingScreen como se ve en GreetingScreenTest:

@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 que TimeText no varía y, de forma involuntaria, las pruebas fallan.
• 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

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

./gradlew verifyRoborazziDebug

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