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

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Tu app debe 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, lee la guía de diseño.

Cómo compilar diseños responsivos con Material 3

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

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

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

En el caso del padding superior e inferior, ten en cuenta lo siguiente:

• La especificación del primer y último ItemType para determinar el padding correcto
• El uso de ListHeader para el primer elemento de la lista, ya que los encabezados Text no deben tener relleno.

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 ayudantes para compilar apps optimizadas y diferenciadas para Wear OS.
• El ejemplo de ComposeStarter, que muestra los principios que se describen en esta guía.
• El ejemplo de JetCaster: un ejemplo más complejo de compilación de una app para que funcione con diferentes tamaños de pantalla con la biblioteca de Horologist.

Usa diseños de desplazamiento en tu app

Usa un diseño de desplazamiento, como se muestra antes 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 sin importar las preferencias de visualización ni el tamaño de la pantalla del dispositivo Wear OS.

El efecto de diferentes tamaños de dispositivos y escalamiento de fuente.

Diálogos

Los diálogos también deben poder desplazarse, a menos que haya un motivo muy bueno 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 aún sean adecuadas para diseños sin desplazamiento. Algunos ejemplos son 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 y, luego, implementa un diseño que sea responsivo al tamaño de la pantalla con los márgenes correctos.

Proporciona experiencias diferenciadas a través de puntos de inflexión

Con pantallas más grandes, puedes incluir contenido y funciones adicionales. Para implementar este tipo de experiencia diferenciada, usa puntos de interrupción de tamaño de pantalla y muestra un diseño diferente cuando el tamaño de la pantalla supere 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.
    }
    // ...
List.kt

En la guía de diseño, se ilustran más de estas oportunidades.

Prueba combinaciones de tamaños de pantalla y fuente con 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 dispositivos y escala de fuente para ver lo siguiente:

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

Asegúrate de implementar vistas previas con WearPreviewDevices y WearPreviewFontScales para todas las pantallas de tu app.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

Pruebas de capturas de pantalla

Además 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 pueden no estar disponibles de inmediato y el problema puede no presentarse 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 las pruebas de capturas 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, 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 {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

    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.