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, tout en restant esthétique sur les écrans plus petits. 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 conseils de conception.

Créer des mises en page responsives avec Material 3

Les mises en page doivent avoir des marges basées sur des pourcentages. Dans Wear Compose Material 3, ScreenScaffold calcule automatiquement la marge intérieure basée sur un pourcentage et fournit contentPadding à son lambda de contenu. Transmettez ce paramètre contentPadding à TransformingLazyColumn.

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,
                )
            }
        }
    }
}

Cet exemple illustre également ScreenScaffold et AppScaffold. Ils assurent la coordination entre l'application et les différents écrans (itinéraires de navigation) pour garantir un comportement de défilement et un positionnement de TimeText corrects.

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

  • L'utilisation de Modifier.minimumVerticalContentPadding (comme ListHeaderDefaults.minimumTopListContentPadding et ButtonDefaults.minimumVerticalListContentPadding), de sorte que TransformingLazyColumn utilise au moins la marge intérieure recommandée en haut et en bas lorsque ces éléments apparaissent au bord de la liste.
  • L'utilisation de ListHeader pour le premier élément de la liste, plutôt qu'un simple composable Text.

Les spécifications complètes sont disponibles 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'aide pour 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.
  • 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é 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 leurs préférences d'affichage ou la taille de l'écran de leur appareil Wear OS.

L'effet de différentes tailles d'appareil et de mise à l'échelle des polices

L'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éfilables, sauf s'il existe une très bonne raison de ne pas le faire. Le composant AlertDialog est responsive et permet de faire défiler le contenu par défaut s'il dépasse la hauteur de la fenêtre d'affichage.

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. Par exemple, 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 en fonction de 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 introduire 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.
    }
    // ...

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

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

Les aperçus Compose vous aident à développer des applications pour différentes tailles d'écran Wear OS. Utilisez les définitions d'aperçu des appareils et de 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.
  • 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. Pour en savoir plus sur la configuration des aperçus Wear OS, les spécifications matérielles personnalisées et l'aperçu des listes déroulantes, consultez Prévisualiser votre UI dans Compose pour Wear OS.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}

Tests de capture d'écran

Au-delà des tests d'aperçu, les tests de capture 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 capture d'écran vous aident également à identifier les régressions à des emplacements spécifiques de votre codebase.

Nos exemples utilisent Roborazzi pour les tests de capture 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
    }
}

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 un éventail représentatif 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.