Parallax-Scrolling-Effekt erstellen

Beim Parallax-Scrolling bewegen sich die Inhalte im Hintergrund und im Vordergrund mit unterschiedlichen Geschwindigkeiten. Sie können diese Technik implementieren, um die Benutzeroberfläche Ihrer App zu optimieren und eine dynamischere Nutzererfahrung zu schaffen, wenn Nutzer scrollen.

Ergebnisse

Abbildung 1. Eine scrollende Liste mit Parallaxeneffekt.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Parallaxeneffekt erstellen

Um den Parallaxeneffekt zu erzielen, wenden Sie einen Bruchteil des Scrollwerts aus dem scrollbaren Composable auf das Composable an, das den Parallaxeneffekt benötigt. Im folgenden Snippet werden zwei verschachtelte visuelle Elemente – ein Bild und ein Textblock – in derselben Richtung mit unterschiedlichen Geschwindigkeiten gescrollt:

@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

Wichtige Punkte zum Code

  • Erstellt einen benutzerdefinierten layout-Modifikator, um die Scrollgeschwindigkeit des Composables anzupassen.
  • Das Image scrollt langsamer als das Text. Dadurch entsteht ein Parallaxeneffekt, da die beiden Composables unterschiedlich schnell vertikal verschoben werden.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden Kurzanleitungen, die umfassendere Ziele der Android-Entwicklung abdecken:

Mit Listen und Rastern können Sie Sammlungen in Ihrer App auf visuell ansprechende Weise präsentieren, die für Nutzer leicht zu erfassen ist.
Sammlung von Kurzanleitungen
Hier finden Sie Techniken, mit denen Sie Ihrer Android-App mit hellen, ansprechenden Grafiken ein attraktives Erscheinungsbild verleihen können.
Sammlung von Kurzanleitungen

Anzeigetext

Text ist ein zentraler Bestandteil jeder Benutzeroberfläche. Hier finden Sie verschiedene Möglichkeiten, Text in Ihrer App zu präsentieren, um eine ansprechende Nutzererfahrung zu bieten.
Sammlung von Kurzanleitungen

Fragen oder Feedback

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich aber auch gern an uns wenden und uns Ihre Meinung mitteilen.
Zu den FAQs Feedback geben