Votre application doit fonctionner correctement sur les appareils Wear OS de toutes tailles, exploiter l'espace supplémentaire disponible et s'afficher correctement sur les petits écrans. 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 les 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 des valeurs absolues, utilisez des composants de la bibliothèque Horologist, qui offre les fonctionnalités suivantes:
- Les marges horizontales sont définies correctement en fonction d'un pourcentage de la taille de l'écran de l'appareil.
- L'espacement en haut et en bas est correctement défini. Cela présente des difficultés particulières, car l'espacement supérieur et inférieur recommandé peut dépendre des composants utilisés. Par exemple, un
Chip
doit avoir un espacement différent d'un composantText
lorsqu'il est utilisé dans une liste. - Les marges de
TimeText
sont correctement définies.
L'extrait de code suivant utilise la version Horologist de la mise en page ScalingLazyColumn
pour créer un contenu attrayant sur diverses tailles d'écran Wear OS:
import com.google.android.horologist.compose.layout.ScalingLazyColumn
val columnState = rememberResponsiveColumnState(
contentPadding = ScalingLazyColumnDefaults.padding(
first = ItemType.Text,
last = ItemType.SingleButton
)
)
ScreenScaffold(scrollState = columnState) {
ScalingLazyColumn(
columnState = columnState,
modifier = Modifier.fillMaxSize()
) {
item {
ResponsiveListHeader(contentPadding = firstItemPadding()) {
Text(text = "Header")
}
}
// ... other items
item {
Button(...)
}
}
}
Cet exemple illustre également ScreenScaffold
]3 et AppScaffold
.
Ces éléments se coordonnent entre l'application et les écrans individuels (itinéraires de navigation) pour garantir le bon comportement de défilement et le bon positionnement de TimeText
.
Pour la marge intérieure supérieure et inférieure, veuillez également noter les points suivants:
- Spécification des premier et dernier éléments
ItemType
pour déterminer la marge intérieure appropriée. - 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 obtenir plus de détails et d'exemples, consultez les pages suivantes:
- La bibliothèque Horologist fournit des composants permettant de créer des applications optimisées et différenciées pour Wear OS.
- L'exemple ComposeStarter, qui illustre les principes décrits dans ce guide.
- L'exemple JetCaster : un exemple plus complexe de création d'une application compatible 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 lorsque vous implémentez vos écrans. Cela permet aux utilisateurs d'accéder aux composants de votre application, quelles que soient les préférences d'affichage ou 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.google.cn/static/images/wear/screenshot-test.png?hl=fr)
L'effet des différentes tailles d'appareils et de la 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 les éléments suivants:
- Défilement par défaut.
- Corriger les marges en fonction d'un pourcentage
- Boutons qui ajustent leur largeur lorsque l'espace le permet, afin d'augmenter le nombre d'éléments tactiles.
![Comportement des boîtes de dialogue adaptatives dans Horologist](https://developer.android.google.cn/static/images/wear/adaptive-dialogs.png?hl=fr)
Boîtes de dialogue responsives avec le 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 incluent l'écran du lecteur principal dans une application multimédia et l'écran d'entraînement dans une application de fitness.
Dans ces cas, consultez les conseils canoniques fournis dans les kits de conception Figma et implémentez une conception qui s'adapte à la taille de l'écran, en utilisant les marges appropriées.
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:
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:
- La manière dont vos écrans ressemblent aux extrêmes de dimensionnement, par exemple, la plus grande police associée au plus petit écran.
- Le comportement de votre expérience différenciée entre les points d'arrêt
Assurez-vous d'implémenter les aperçus à l'aide de WearPreviewDevices
et WearPreviewFontScales
pour tous les écrans de votre application.
@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
ListScreen()
}
Test des captures d'écran
En plus des tests de prévisualisation, les tests de captures d'écran vous permettent d'effectuer des tests par rapport à une plage de tailles de matériel existantes. Cela est particulièrement utile lorsque ces appareils ne sont pas disponibles immédiatement et que le problème ne se présente pas sur d'autres tailles d'écran.
Les tests de captures d'écran vous permettent également d'identifier les régressions à des emplacements spécifiques de 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 pour 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 illustré 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 oùTimeText
ne varie pas et fait échouer les tests par inadvertance.WearDevice.entries
contient les définitions des appareils Wear OS les plus courants afin que les tests soient 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 par rapport à 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.