Les cartes de votre application doivent fonctionner correctement sur les appareils Wear OS de toutes tailles, exploiter l'espace supplémentaire le cas échéant, tout en conservant un excellent rendu sur les petits écrans. Ce guide fournit des recommandations pour optimiser cette expérience utilisateur.
Pour en savoir plus sur les principes de conception des mises en page adaptatives, consultez les conseils de conception.
Créer des mises en page responsives à l'aide de ProtoLayout
La bibliothèque ProtoLayout Material fournit des mises en page prédéfinies pour vous aider à créer vos cartes. Ces mises en page sont déjà conçues pour s'adapter à la taille de l'écran.
Reportez-vous aux mises en page de conception Figma, qui présentent les mises en page canoniques disponibles et comment les utiliser pour créer votre conception:
Nous vous recommandons d'utiliser PrimaryLayout ou EdgeContentLayout comme mise en page de premier niveau pour la plupart des cas d'utilisation. Définissez le comportement responsif à l'aide de setResponsiveContentInsetEnabled, par exemple:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
Proposez des expériences différenciées grâce à des points d'arrêt
Avec un écran plus grand, vous pouvez proposer du contenu et des fonctionnalités supplémentaires. Pour implémenter ce type d'expérience différenciée, utilisez des points d'arrêt de taille d'écran, qui affichent une mise en page différente lorsque la taille de l'écran dépasse 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()
Les conseils de conception illustrent d'autres opportunités.
Tester les cartes sur différentes tailles d'écran à l'aide des aperçus
Il est important de tester vos mises en page sur différentes tailles d'écran. Utilisez les annotations d'aperçu de la carte, ainsi que les classes TilePreviewHelper et TilePreviewData:
@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
buildLayout()
).build()
}
)
Cela vous permet de prévisualiser vos mises en page de cartes directement dans Android Studio. L'exemple de points d'arrêt précédent montre comment des boutons supplémentaires s'affichent lorsque l'espace disponible à l'écran le permet, lorsqu'ils sont prévisualisés:
Petits et grands écrans montrant l'effet du point d'arrêt
Pour obtenir un exemple complet, consultez l'exemple de cartes multimédias sur GitHub.