Las tarjetas de tu app deberían 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 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 demuestran 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. Establece el comportamiento responsivo con setResponsiveContentInsetEnabled. Por ejemplo:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
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:
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 guía 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 de la interrupción
Para ver un ejemplo completo, consulta la muestra de mosaicos de medios en GitHub.