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

Votre application doit fonctionner correctement sur les appareils Wear OS de toutes tailles, en tirant parti de l'espace supplémentaire disponible et en s'affichant 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 consignes de conception.

Créer des mises en page responsives à l'aide de Material 3

L'extrait de code suivant utilise un composant TransformingLazyColumn pour créer du contenu qui s'affiche correctement sur différentes tailles d'écran Wear OS :

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

Cet exemple illustre également ScreenScaffold et AppScaffold. Ils coordonnent l'application et les écrans individuels (itinéraires de navigation) pour garantir le bon comportement de défilement et TimeText le bon positionnement.

Pour le remplissage en haut et en bas, notez également les points suivants :

• La spécification du premier et du dernier ItemType, pour déterminer le remplissage correct.
• L'utilisation de ListHeader pour le premier élément de la liste, car les en-têtes Text ne doivent pas avoir de remplissage.

Les spécifications complètes sont disponibles dans les kits de conception Figma. Pour en savoir plus et obtenir des exemples, consultez les ressources suivantes :

• La bibliothèque Horologist fournit des assistants pour vous aider à créer des applications optimisées et différenciées pour Wear OS.
• L'exemple ComposeStarter illustre les principes décrits dans ce guide.
• L'exemple JetCaster est 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 défilantes dans votre application

Utilisez une mise en page défilante, 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 application, quelles que soient les préférences d'affichage ou la taille de l'écran de l'appareil Wear OS.

Effet des différentes tailles d'appareil et de la mise à l'échelle des polices

Boîtes de dialogue

Les boîtes de dialogue doivent également être défilantes, sauf raison valable de ne pas le faire. Le composant AlertDialog est responsif et défilant par défaut si le contenu dépasse la hauteur de la fenêtre d'affichage.

Les écrans personnalisés peuvent nécessiter des mises en page non défilantes

Certains écrans peuvent toujours être adaptés aux mises en page non défilantes. Par exemple, l'écran principal du lecteur dans une application multimédia et l'écran d'entraînement dans une application de remise en forme.

Dans ce cas, consultez les consignes canoniques fournies dans les kits de conception Figma et implémentez une conception adaptée à la taille de l’écran, en utilisant les marges appropriées.

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

Avec des écrans plus grands, vous pouvez introduire 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 la taille de l'é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.
    }
    // ...
List.kt

Les consignes de conception illustrent davantage ces opportunités.

Tester les combinaisons de tailles d'écran et de police à l'aide d'aperçus

Les aperçus Compose vous aident à développer pour différentes tailles d'écran Wear OS. Utilisez les définitions d'aperçu des appareils et de la mise à l'échelle des polices pour voir les éléments suivants :

• L'apparence de vos écrans aux extrêmes de la taille, par exemple, la plus grande police associée au plus petit écran.
• Le comportement de votre expérience différenciée sur les points d'arrêt.

Assurez-vous d'implémenter des aperçus à l'aide de WearPreviewDevices et WearPreviewFontScales pour tous les écrans de votre application.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

Test des captures d'écran

Au-delà des tests d'aperçu, les tests de captures d'écran vous permettent de tester différentes tailles de matériel existantes. Cela est particulièrement utile lorsque ces appareils ne sont pas immédiatement disponibles et que le problème ne se présente pas sur d'autres tailles d'écran.

Les tests de captures d'écran vous aident également à identifier les régressions à des emplacements spécifiques de votre code.

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, le code suivant montre un test de capture d'écran pour un écran contenant une liste :

@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}
ListTest.kt

Quelques points importants à noter :

• WearDevice.entries contient des définitions pour les 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 de référence

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 aux images existantes, exécutez la commande suivante dans un terminal :

./gradlew verifyRoborazziDebug

Pour obtenir un exemple complet de test de captures d'écran, consultez l'exemple ComposeStarter.