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

Les tuiles de votre application doivent fonctionner correctement sur les appareils Wear OS de toutes tailles, en tirant parti de l'espace supplémentaire disponible et en s'affichant toujours correctement sur les petits écrans. Ce guide fournit des recommandations pour offrir cette expérience utilisateur.

Pour en savoir plus sur les principes de conception des mises en page adaptatives, consultez les conseils de conception.

Proposer des expériences différenciées grâce aux points d'arrêt

Les mises en page de la bibliothèque ProtoLayout Material sont responsives et gèrent le placement et la visibilité des éléments. Toutefois, dans certains cas, vous pouvez varier le nombre d'éléments visibles pour obtenir les meilleurs résultats. Par exemple, vous pouvez souhaiter afficher trois boutons sur un petit écran et cinq sur un grand écran.

Pour implémenter ce type d'expérience différenciée, utilisez des points d'arrêt de taille d'écran. Pour afficher une autre mise en page lorsque la taille de l'écran dépasse 225 dp :

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

Les conseils de conception illustrent d'autres opportunités.

Tester les tuiles 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 tuiles, ainsi que les classes TilePreviewHelper et TilePreviewData :

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

Cela vous permet de prévisualiser vos mises en page de cartes directement dans Android Studio.

Pour obtenir un exemple complet, consultez l'exemple de tuiles de minuteur sur GitHub.