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

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Votre application doit fonctionner correctement sur les appareils Wear OS de toutes tailles, en exploitant l'espace supplémentaire disponible, et être tout aussi attrayante sur les écrans plus petits. Ce guide fournit des recommandations pour y parvenir.

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 à l'aide de Material 3

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

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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 se coordonnent entre l'application et les écrans individuels (routes de navigation) pour assurer le bon comportement de défilement et le positionnement de TimeText.

Pour la marge intérieure supérieure et inférieure, notez également les points suivants:

• Spécification du premier et du dernier ItemType pour déterminer le remplissage approprié.
• Utilisation de ListHeader pour le premier élément de la liste, car les en-têtes Text ne doivent pas avoir de marge intérieure.

Vous trouverez les spécifications complètes dans les kits de conception Figma. Pour en savoir plus et obtenir des exemples, consultez les pages suivantes:

• La bibliothèque Horologist fournit des outils d'assistance pour créer des applications optimisées et différenciées pour Wear OS.
• Exemple ComposeStarter : exemple illustrant les principes décrits dans ce guide.
• Exemple JetCaster : 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éfilement dans votre application

Utilisez une mise en page à défilement, comme indiqué plus haut 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, quels que soient leurs préférences d'affichage ou la taille de l'écran de l'appareil Wear OS.

Impact des différentes tailles d'appareils et de la mise à l'échelle de la police.

Boîtes de dialogue

Les boîtes de dialogue doivent également être à défilement, sauf si vous avez une très bonne raison de ne pas le faire. Le composant AlertDialog est responsif et peut être fait défiler 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éroulantes

Il est possible que certains écrans soient toujours adaptés aux mises en page non déroulantes. Plusieurs exemples incluent l'écran principal du lecteur dans une application multimédia et l'écran d'entraînement dans une application de fitness.

Dans ce cas, consultez les conseils canoniques fournis dans les kits de conception Figma et implémentez une conception responsive à la taille de l'écran, en utilisant les marges appropriées.

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

Avec des écrans plus grands, vous pouvez proposer des contenus 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.
    }
    // ...
List.kt

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

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

Les aperçus de composition vous aident à développer des applications pour différentes tailles d'écran Wear OS. Utilisez à la fois les définitions de prévisualisation des appareils et de la mise à l'échelle de la police pour afficher les éléments suivants:

• L'apparence de vos écrans aux tailles extrêmes (par exemple, la plus grande police associée au plus petit écran)
• Comment votre expérience différenciée se comporte-t-elle entre les points d'arrêt ?

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

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

Test des captures d'écran

En plus des tests d'aperçu, les tests de capture d'écran vous permettent de tester sur différentes tailles matérielles existantes. Cela est particulièrement utile lorsque ces appareils ne sont pas immédiatement disponibles et que le problème ne se produit peut-être pas sur d'autres tailles d'écran.

Les tests de capture d'écran vous aident également à identifier les régressions à des emplacements spécifiques dans 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 {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

Voici quelques points importants à retenir:

• WearDevice.entries contient des définitions pour les appareils Wear OS les plus populaires afin que les tests soient exécutés sur une gamme 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

Valider 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 capture d'écran, consultez l'exemple ComposeStarter.