Las tarjetas de tu app deben 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 para diseños adaptables, lee la guía de diseño.
Cómo compilar diseños responsivos con ProtoLayout
La biblioteca de ProtoLayout Material proporciona diseños predefinidos para ayudarte a compilar tus tarjetas. Estos diseños ya están diseñados para adaptarse al tamaño de la pantalla.
Consulta los diseños de Figma, que muestran los diseños canónicos disponibles y cómo compilar tu diseño con ellos:
Recomendamos PrimaryLayout o EdgeContentLayout como diseños de nivel superior para la mayoría de los casos de uso. Configura el comportamiento responsivo con setResponsiveContentInsetEnabled, por ejemplo:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
Proporciona experiencias diferenciadas a través de puntos de inflexión
Los diseños de la biblioteca de ProtoLayout Material ya son responsivos y se encargan de la ubicación y visibilidad correctas de los elementos. Sin embargo, en algunos casos, es posible que desees variar la cantidad de elementos visibles para obtener mejores resultados. Por ejemplo, es posible que desees 3 botones en una pantalla más pequeña y 5 en una pantalla más grande.
Para implementar este tipo de experiencia diferenciada, usa puntos de interrupción del tamaño de la pantalla. Para mostrar un diseño diferente cuando el tamaño de la pantalla supera los 225 dp, haz lo siguiente:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
MultiButtonLayout.Builder()
.addButtonContent(button1)
.addButtonContent(button2)
.addButtonContent(button3)
.apply {
if (deviceParameters.screenHeightDp >= 225) {
addButtonContent(button4)
addButtonContent(button5)
}
}
.build()
)
.setPrimaryLabelTextContent(label)
.setPrimaryChipContent(compactChip)
.build()
La orientación de diseño ilustra oportunidades adicionales.
Prueba tarjetas en diferentes tamaños de pantalla con vistas previas
Es importante que pruebes tus diseños en diferentes tamaños de pantalla. Usa las anotaciones de vista previa de tarjetas, junto con las clases TilePreviewHelper y TilePreviewData:
@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
buildLayout()
).build()
}
)
Esto te permite obtener una vista previa de tus diseños de tarjetas directamente en Android Studio. En el ejemplo de interrupciones anterior, se ilustra cómo se muestran los botones adicionales cuando el espacio de la pantalla lo permite, en la vista previa:
Pantallas pequeñas y grandes que muestran el efecto del punto de inflexión
Para ver un ejemplo completo, consulta la muestra de tarjetas de contenido multimedia en GitHub.