Les cartes de votre application doivent fonctionner sur les appareils Wear OS de toutes tailles, tout en profitant d'un espace supplémentaire, le cas échéant, tout en conservant un excellent rendu écrans aussi. Ce guide fournit des recommandations pour toucher cet utilisateur expérience.
Pour en savoir plus sur les principes de conception des mises en page adaptatives, consultez la 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 à l'écran la taille de l'image.
Reportez-vous aux mises en page de conception Figma, qui présentent la version canonique mises en page disponibles et comment les utiliser pour créer votre conception:
Nous vous recommandons d'utiliser PrimaryLayout ou EdgeContentLayout comme premier niveau
mises en page 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()
Proposer des expériences différenciées grâce à des points d'arrêt
Les mises en page de la bibliothèque ProtoLayout Material sont déjà responsives et s'occupe du placement et de la visibilité corrects des éléments. Cependant, dans certains cas, vous pouvez varier le nombre d'éléments visibles pour de meilleurs résultats. Pour Par exemple, vous voudrez peut-être 3 boutons sur un écran plus petit et 5 sur un écran plus grand l'écran.
Pour mettre en œuvre ce type d'expérience différenciée, utilisez les tailles d'écran des points d'arrêt. Pour afficher 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
les annotations d'aperçu de la carte, ainsi que les TilePreviewHelper et
Classes 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. La L'exemple de points d'arrêt précédent montre comment les boutons supplémentaires s'affichent lorsque l'espace disponible à l'écran le permet, lors de l'aperçu:
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.