Parallax-Scrolling-Effekt erstellen

Beim Parallax-Scrolling werden die Hintergrund- und Vordergrundinhalte mit unterschiedlichen Geschwindigkeiten gescrollt. Sie können diese Technik implementieren, um die Benutzeroberfläche Ihrer App zu verbessern und beim Scrollen ein dynamischeres Erlebnis zu schaffen.

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 Parallaxeeffekt zu erzielen, wenden Sie einen Bruchteil des Scrollwerts aus dem Scroll-Komposit auf das Komposit an, für das der Parallaxeeffekt benötigt wird. Im folgenden Snippet werden zwei verschachtelte visuelle Elemente – ein Bild und ein Textblock – in dieselbe 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 Geschwindigkeit anzupassen, mit der der zusammensetzbare Inhalt scrollt.
  • Das Image scrollt langsamer als das Text, was einen Parallaxeneffekt erzeugt, da sich die beiden Composables vertikal mit unterschiedlichen Geschwindigkeiten verschieben.

Ergebnisse

Abbildung 1: Eine scrollbare Liste mit einem Parallaxeneffekt.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Mit Listen und Rastern können Sie Sammlungen in Ihrer App in einer visuell ansprechenden und für Nutzer leicht verständlichen Form präsentieren.
Sammlung von Kurzanleitungen
Hier erfahren Sie, wie Sie mit leuchtenden, ansprechenden visuellen Elementen Ihrer Android-App ein ansprechendes Erscheinungsbild verleihen.
Sammlung von Kurzanleitungen

Anzeigetext

Text ist ein zentrales Element jeder Benutzeroberfläche. Hier erfahren Sie, wie Sie Text in Ihrer App präsentieren können, um die Nutzerfreundlichkeit zu verbessern.
Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

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