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

Votre application doit fonctionner correctement sur les appareils Wear OS de toutes tailles, en tirant parti des d'espace supplémentaire, le cas échéant, tout en s'affichant parfaitement sur les écrans plus petits. 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 la 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 les valeurs absolues, utilisez plutôt des composants du La bibliothèque Horologist, qui offre les fonctionnalités suivantes:

  • Les marges horizontales sont correctement définies en fonction d'un pourcentage de l'écran de l'appareil la taille de l'image.
  • 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é. Par exemple, un Chip doit avoir un espacement différent de celui d'un 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 Mise en page ScalingLazyColumn pour créer un contenu attrayant sur diverses des tailles d'écran Wear OS:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

Cet exemple illustre également ScreenScaffold et AppScaffold. qui assurent la coordination entre l'application et les écrans individuels (itinéraires de navigation) pour garantir un défilement correct et TimeText.

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

  • Spécification du premier et du dernier élément ItemType, pour déterminer la bonne marge intérieure.
  • 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 plus des détails et des exemples, consultez les articles suivants:

  • La bibliothèque Horologist fournit des composants optimisées et différenciées pour Wear OS.
  • L'exemple ComposeStarter, qui montre comment des principes décrits dans ce guide.
  • L'exemple JetCaster : un exemple plus complexe de création d'une pour qu'elle fonctionne 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, par défaut. lors de l'implémentation de vos écrans. Cela permet aux utilisateurs d'accéder aux composants de votre appli indépendamment des préférences d'affichage ou de 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

L'effet des différentes tailles d'appareils et 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 la méthode suivantes:

  • Défilement par défaut.
  • Corriger les marges en fonction d'un pourcentage
  • Les boutons qui ajustent leur largeur lorsque l’espace le permet, afin de fournir une augmentation cibles tactiles.
Comportement des boîtes de dialogue adaptatives dans Horologist

Boîtes de dialogue responsives avec un 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 Incluez l'écran du lecteur principal dans une application multimédia et l'écran d'entraînement dans une de fitness.

Dans ce cas, consultez les conseils canoniques fournis dans les Kits de conception Figma, et mettre en œuvre une conception réactive à la taille. de l'écran, en utilisant les bonnes marges.

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. À implémenter ce type d'expérience différenciée, utilisez des points d'arrêt de taille d'écran Affichage d'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:

  • Comment vos écrans voient-ils les extrêmes de dimensionnement, par exemple, la plus grande taille de police associé au plus petit écran.
  • Le comportement de votre expérience différenciée entre les points d'arrêt

Veillez à 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 de comparer les tailles de matériel existantes. C'est particulièrement utile lorsque ces appareils peuvent ne sont pas immédiatement disponibles pour vous, et il est possible que le problème ne se présente pas d'autres tailles d'écran.

Les tests de captures d'écran vous aident également à identifier les régressions à des emplacements spécifiques 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 à 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 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 lorsque TimeText ne varier et faire échouer les tests par inadvertance.
  • WearDevice.entries contient les définitions des appareils Wear OS les plus populaires. que les tests sont 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 apportées à 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.