Créer un effet de défilement parallaxe

Le défilement parallaxe est une technique qui consiste à faire défiler le contenu de l'arrière-plan et celui du premier plan à des vitesses différentes. Vous pouvez implémenter cette technique pour améliorer l'interface utilisateur de votre application, créant ainsi une expérience plus dynamique lorsque vos utilisateurs font défiler l'écran.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Créer un effet parallaxe

Pour obtenir l'effet de parallaxe, vous appliquez une fraction de la valeur de défilement du composable de défilement au composable qui a besoin de l'effet de parallaxe. L'extrait de code suivant prend deux éléments visuels imbriqués (une image et un bloc de texte) et les fait défiler dans la même direction à des vitesses différentes:

@Composable
fun ParallaxEffect() {
    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
        layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            val height = if (rate > 0) scrollState.value / rate else scrollState.value
            layout(placeable.width, placeable.height) {
                placeable.place(0, height)
            }
        }

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {

        Image(
            painterResource(id = R.drawable.cupcake),
            contentDescription = "Android logo",
            contentScale = ContentScale.Fit,
            // Reduce scrolling rate by half.
            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
        )

        Text(
            text = stringResource(R.string.detail_placeholder),
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 8.dp),

        )
    }
}
ParallaxEffect.kt

Points clés concernant le code

  • Crée un modificateur layout personnalisé pour ajuster la vitesse de défilement du composable.
  • Le Image défile à un rythme plus lent que le Text, ce qui produit un effet de parallaxe lorsque les deux composables se déplacent verticalement à des vitesses différentes.

Résultats

Figure 1 Liste à défilement avec effet parallaxe.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Les listes et les grilles permettent à votre application d'afficher des collections sous une forme visuellement attrayante et facile à utiliser pour les utilisateurs.
Collection de guides rapides
Découvrez des techniques pour utiliser des visuels lumineux et attrayants afin de donner à votre application Android une belle apparence.
Collection de guides rapides

Texte à afficher

Le texte est un élément central de n'importe quelle interface utilisateur. Découvrez les différentes façons de présenter du texte dans votre application pour offrir une expérience utilisateur agréable.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires