Votre application doit fonctionner correctement sur les appareils Wear OS de toutes tailles, en tirant parti des d'espace supplémentaire, le cas échéant, tout en s'affichant parfaitement sur les écrans plus petits. Ce guide fournit des recommandations pour offrir une expérience utilisateur optimale.
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 avec Horologist
Les mises en page doivent avoir des marges basées sur un pourcentage. Comme Compose fonctionne par défaut dans les valeurs absolues, utilisez plutôt des composants du La bibliothèque Horologist, qui offre les fonctionnalités suivantes:
- Les marges horizontales sont correctement définies en fonction d'un pourcentage de l'écran de l'appareil la taille de l'image.
- L'espacement supérieur et inférieur sont correctement définis. Cela présente des difficultés particulières
car l'espacement supérieur et inférieur recommandé peut dépendre des composants
utilisé. Par exemple, un
Chip
doit avoir un espacement différent de celui d'unText
lorsqu'il est utilisé dans une liste. - Les marges de
TimeText
sont correctement définies.
L'extrait de code suivant utilise la version Horologist
Mise en page ScalingLazyColumn
pour créer un contenu attrayant sur diverses
des tailles d'écran Wear OS:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
Cet exemple illustre également ScreenScaffold
et AppScaffold
.
qui assurent la coordination entre l'application et les écrans individuels
(itinéraires de navigation) pour garantir un défilement correct et
TimeText
.
Pour la marge intérieure supérieure et inférieure, veuillez également noter les points suivants:
- Spécification du premier et du dernier élément
ItemType
, pour déterminer la bonne marge intérieure. - L'utilisation de
ResponsiveListHeader
pour le premier élément de la liste, car Les en-têtesText
ne doivent pas comporter de marge intérieure.
Les caractéristiques complètes sont disponibles dans les kits de conception Figma. Pour plus des détails et des exemples, consultez les articles suivants:
- La bibliothèque Horologist fournit des composants optimisées et différenciées pour Wear OS.
- L'exemple ComposeStarter, qui montre comment des principes décrits dans ce guide.
- L'exemple JetCaster : un exemple plus complexe de création d'une pour qu'elle fonctionne avec différentes tailles d'écran, à l'aide de la bibliothèque Horologist.
Utiliser des mises en page avec défilement dans votre application
Utilisez une mise en page avec défilement, comme indiqué précédemment sur cette page, comme choix par défaut. lors de l'implémentation de vos écrans. Cela permet aux utilisateurs d'accéder aux composants de votre appli indépendamment des préférences d'affichage ou de la taille d'écran de l'appareil Wear OS.
![Effet des différentes tailles d'appareil et de la mise à l'échelle de la police](https://developer.android.com/static/images/wear/screenshot-test.png?authuser=5&hl=fr)
L'effet des différentes tailles d'appareils et mise à l'échelle de la police.
Boîtes de dialogue
Il est également recommandé de faire défiler les boîtes de dialogue, sauf s'il y a une très bonne raison de ne pas le faire.
Le composant ResponsiveDialog
, fourni par Horologist, ajoute la classe
suivantes:
- Défilement par défaut.
- Corriger les marges en fonction d'un pourcentage
- Les boutons qui ajustent leur largeur lorsque l’espace le permet, pour une augmentation cibles tactiles.
![Comportement des boîtes de dialogue adaptatives dans Horologist](https://developer.android.com/static/images/wear/adaptive-dialogs.png?authuser=5&hl=fr)
Boîtes de dialogue responsives avec un défilement par défaut et des boutons qui s'adaptent à l'espace disponible.
Les écrans personnalisés peuvent nécessiter des mises en page sans défilement
Certains écrans peuvent toujours être adaptés aux mises en page sans défilement. Plusieurs exemples Incluez l'écran du lecteur principal dans une application multimédia et l'écran d'entraînement dans une de fitness.
Dans ce cas, consultez les conseils canoniques fournis dans les Kits de conception Figma, et mettre en œuvre une conception réactive à la taille. de l'écran, en utilisant les marges appropriées.
Proposer 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. À implémenter ce type d'expérience différenciée, utilisez des points d'arrêt de taille d'écran Affichage d'une mise en page différente lorsque la taille de l'écran dépasse 225 dp:
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
Les conseils de conception illustrent davantage ces opportunités.
Tester des combinaisons de tailles d'écran et de police à l'aide d'aperçus
Les aperçus Compose vous aident à développer des applications pour différentes tailles d'écran Wear OS. Utilisez à la fois les définitions des appareils et des aperçus de mise à l'échelle de la police pour obtenir les éléments suivants:
- Comment vos écrans voient-ils les extrêmes de dimensionnement, par exemple, la plus grande taille de police associé au plus petit écran.
- Le comportement de votre expérience différenciée entre les points d'arrêt
Veillez à implémenter les aperçus à l'aide de WearPreviewDevices
et
WearPreviewFontScales
pour tous les écrans de votre application.
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
Test des captures d'écran
En plus des tests de prévisualisation, les tests de captures d'écran vous permettent de comparer les tailles de matériel existantes. C'est particulièrement utile lorsque ces appareils peuvent ne sont pas immédiatement disponibles pour vous, et il est possible que le problème ne se présente pas d'autres tailles d'écran.
Les tests de captures d'écran vous aident également à identifier les régressions à des emplacements spécifiques votre codebase.
Nos exemples utilisent Roborazzi pour les tests de captures d'écran:
- Configurez les fichiers
build.gradle
de votre projet et de votre application à utiliser Roborazzi - Créez un test de capture d'écran pour chaque écran de votre application. Par exemple :
Dans l'exemple ComposeStarter, un test pour
GreetingScreen
est implémenté comme indiqué dansGreetingScreenTest
:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Quelques points importants à noter:
FixedTimeSource
vous permet de générer des captures d'écran lorsqueTimeText
ne varier et faire échouer les tests par inadvertance.WearDevice.entries
contient les définitions des appareils Wear OS les plus populaires. que les tests sont exécutés sur une plage représentative de tailles d'écran.
Générer des images dorées
Pour générer des images pour vos écrans, exécutez la commande suivante dans un terminal:
./gradlew recordRoborazziDebug
Vérifier les images
Pour vérifier les modifications apportées à des images existantes, exécutez la commande suivante dans un terminal:
./gradlew verifyRoborazziDebug
Pour obtenir un exemple complet de tests de capture d'écran, consultez l'exemple ComposeStarter.