Créer un effet de défilement parallaxe

Le défilement parallaxe est une technique dans laquelle le contenu d'arrière-plan et le contenu de premier plan défilent à des vitesses différentes. Vous pouvez implémenter cette technique pour améliorer l'UI de votre application et créer une expérience plus dynamique lorsque vos utilisateurs font défiler l'écran.

Résultats

Figure 1 : Liste à défilement avec un effet de parallaxe.

Compatibilité des versions

Cette implémentation nécessite que le minSDK de votre projet soit défini 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 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 à une vitesse plus lente que le Text, ce qui produit un effet de parallaxe lorsque les deux composables se déplacent verticalement à des vitesses différentes.

Collections contenant ce guide

Ce guide fait partie des collections de guides de démarrage rapide organisé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 agréable et facile à consulter 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 apparence agréable.
Collection de guides rapides

Texte à afficher

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

Poser des questions ou envoyer des commentaires

Consultez notre page de questions fréquentes pour en savoir plus sur les guides rapides ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Laisser un commentaire