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, 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 elemento Text 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 = { }
            )
        }
    }
}
List.kt

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 encabezados Text 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 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.

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 ListScreenPreview() {
    ListScreen()
}

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:

1. Configura los archivos build.gradle de tu proyecto y app para usarlos. Roborazzí
2. 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 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. 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.