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

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 composant Text 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êtes Text 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.

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.

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:

1. Configurez les fichiers build.gradle de votre projet et de votre application pour utiliser Roborazzi.
2. 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é dans GreetingScreenTest:

@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.