Développer des cartes pour différentes tailles d'écran

Les cartes de votre application doivent fonctionner correctement sur les appareils Wear OS de toutes tailles, en profitant de l'espace supplémentaire disponible, et s'afficher correctement sur les écrans plus petits. Ce guide fournit des recommandations pour y parvenir.

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.

Consultez les mises en page de conception Figma, qui présentent les mises en page canoniques disponibles et comment les utiliser pour créer votre conception:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

Nous recommandons PrimaryLayout ou EdgeContentLayout comme mises en page de niveau supérieur 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'occupent du placement et de la visibilité corrects des éléments. Toutefois, dans certains cas, vous pouvez souhaiter varier le nombre d'éléments visibles pour obtenir de meilleurs résultats. Par exemple, vous pouvez choisir trois boutons sur un écran plus petit et cinq sur un écran plus grand.

Pour implémenter ce type d'expérience différenciée, utilisez des points d'arrêt de taille d'écran. 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 annotations d'aperçu des cartes, ainsi que les classes TilePreviewHelper et TilePreviewData:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

Vous pouvez ainsi prévisualiser vos mises en page de cartes directement dans Android Studio. L'exemple précédent sur les points d'arrêt montre comment des boutons supplémentaires s'affichent lorsque l'espace de l'écran le permet, lors de l'aperçu:

Pour obtenir un exemple complet, consultez l'exemple de cartes multimédias sur GitHub.