Las tarjetas de tu app deberían funcionar bien en dispositivos Wear OS de todos los tamaños espacio adicional donde estén disponibles y aun así se vean bien en pantallas también. En esta guía, se proporcionan recomendaciones para lograr este usuario una experiencia fluida a los desarrolladores.
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 ProtoLayout
La biblioteca de ProtoLayout Material proporciona diseños predefinidos para ayudarte a construir tus tarjetas. Estos diseños ya están diseñados para adaptarse a la pantalla de tamaño del ensamble.
Consulta los diseños de Figma, que demuestran la canónica los diseños disponibles y cómo crear tu diseño con ellos:
Recomendamos PrimaryLayout o EdgeContentLayout como el 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
Los diseños de la biblioteca de ProtoLayout Material ya son responsivos y y se encargará 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. Para Por ejemplo, quizás prefieras 3 botones en una pantalla más pequeña y 5 en una más grande. pantalla.
Para implementar este tipo de experiencia diferenciada, usa el tamaño de pantalla puntos de interrupción. Para mostrar un diseño diferente cuando el tamaño de la pantalla supere 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 el
Anotaciones de vista previa de tarjetas, junto con TilePreviewHelper y
Clases 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. El El ejemplo anterior de puntos de interrupción ilustra cómo los botones adicionales se muestran cuando el espacio en 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.