Prendre en charge le contenu adaptable à la taille de l'écran

Implémentez des gestes pincer pour zoomer afin de prendre en charge le contenu évolutif dans votre application. Il s'agit de la méthode standard et cohérente avec la plate-forme pour améliorer l'accessibilité, permettant aux utilisateurs d'ajuster intuitivement la taille du texte et des éléments d'interface utilisateur en fonction de leurs besoins. Votre application peut définir un comportement de mise à l'échelle personnalisé avec un contrôle précis et un comportement contextuel qui offre une expérience que les utilisateurs découvrent souvent plus rapidement qu'une fonctionnalité au niveau du système, comme le zoom sur l'écran.

Choisir une stratégie de scaling

Les stratégies abordées dans ce guide entraînent un réagencement et une réorganisation de l'UI pour s'adapter à la largeur de l'écran. Cela offre un avantage considérable en termes d'accessibilité, car il n'est plus nécessaire de faire un panoramique horizontal ni le mouvement en zigzag frustrant qui serait autrement nécessaire pour lire de longues lignes de texte.

Pour en savoir plus : des études ont confirmé que, pour les utilisateurs malvoyants, le réagencement du contenu est beaucoup plus lisible et facile à parcourir que les interfaces qui nécessitent un déplacement bidimensionnel. Pour en savoir plus, consultez Comparaison du contenu avec zoom et déplacement et du contenu redistribuable sur les appareils mobiles.

Mettre à l'échelle tous les éléments ou uniquement les éléments de texte

Le tableau suivant montre l'effet visuel de chaque stratégie de mise à l'échelle.

Recommandations

Maintenant que vous avez vu les différences visuelles, le tableau suivant vous aide à peser le pour et le contre, et à choisir la meilleure stratégie pour votre contenu.

Détecter les gestes de scaling dans Jetpack Compose

Pour prendre en charge le contenu évolutif, vous devez d'abord détecter les gestes multitouch. Dans Jetpack Compose, vous pouvez le faire à l'aide de Modifier.transformable.

Le modificateur transformable est une API de haut niveau qui fournit le delta zoomChange depuis le dernier événement de geste. Cela simplifie la logique de mise à jour de l'état en accumulation directe (par exemple, scale *= zoomChange), ce qui la rend idéale pour les stratégies de scaling adaptatif abordées dans ce guide.

Exemples d'implémentation

Les exemples suivants montrent comment implémenter les stratégies de mise à l'échelle de la densité et de la mise à l'échelle de la police.

Mise à l'échelle de la densité

Cette approche permet de mettre à l'échelle la density de base d'une zone d'UI. Par conséquent, toutes les mesures basées sur la mise en page (y compris la marge intérieure, l'espacement et la taille des composants) sont mises à l'échelle, comme si la taille ou la résolution de l'écran avaient changé. Comme la taille du texte dépend également de la densité, elle est également mise à l'échelle de manière proportionnelle. Cette stratégie est efficace lorsque vous souhaitez agrandir uniformément tous les éléments d'une zone spécifique, en conservant le rythme visuel global et les proportions de votre UI.

private class DensityScalingState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledDensity(): Density {
        return Density(
            currentDensity.density * scaleFactor.floatValue,
            currentDensity.fontScale
        )
    }
}
ScalableContentSnippets.kt

Mise à l'échelle de la police

Cette stratégie est plus ciblée, car elle ne modifie que le facteur fontScale. Le résultat est que seuls les éléments de texte grandissent ou rétrécissent, tandis que tous les autres composants de mise en page (tels que les conteneurs, la marge intérieure et les icônes) conservent une taille fixe. Cette stratégie est idéale pour améliorer la lisibilité du texte dans les applications qui nécessitent beaucoup de lecture.

class FontScaleState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledFont(): Density {
        return Density(
            currentDensity.density,
            currentDensity.fontScale * scaleFactor.floatValue
        )
    }
}
ScalableContentSnippets.kt

Interface utilisateur de démonstration partagée

Il s'agit du composable DemoCard partagé utilisé par les deux exemples précédents pour mettre en évidence les différents comportements de mise à l'échelle.

@Composable
private fun DemoCard() {
    Card(
        modifier = Modifier
            .width(360.dp)
            .padding(16.dp),
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text("Demo Card", style = MaterialTheme.typography.headlineMedium)
            var isChecked by remember { mutableStateOf(true) }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text("Demo Switch", Modifier.weight(1f), style = MaterialTheme.typography.bodyLarge)
                Switch(checked = isChecked, onCheckedChange = { isChecked = it })
            }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(Icons.Filled.Person, "Icon", Modifier.size(32.dp))
                Spacer(Modifier.width(8.dp))
                Text("Demo Icon", style = MaterialTheme.typography.bodyLarge)
            }
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Blue)
                )
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Red)
                )
            }
            Text(
                "Demo Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit," +
                    " sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Justify
            )
        }
    }
}
ScalableContentSnippets.kt

Conseils et points à prendre en compte

Pour créer une expérience plus soignée et accessible, tenez compte des recommandations suivantes :

• Envisagez de proposer des commandes de mise à l'échelle sans geste : certains utilisateurs peuvent avoir des difficultés avec les gestes. Pour aider ces utilisateurs, envisagez de leur proposer une autre façon d'ajuster ou de réinitialiser l'échelle qui ne repose pas sur des gestes.
• Créez des applications pour toutes les échelles : testez votre UI par rapport à la mise à l'échelle dans l'application et aux paramètres de police ou d'affichage à l'échelle du système. Vérifiez que les mises en page de votre application s'adaptent correctement sans casser, chevaucher ni masquer le contenu. Découvrez comment créer des mises en page adaptatives.