Tworzenie efektu paralaksy

Przewijanie paralaksy to technika, w której treści tła i pierwszego planu przesuwają się z różną prędkością. Możesz zastosować tę technikę, aby ulepszyć interfejs aplikacji i utworzyć bardziej dynamiczne wrażenia podczas przewijania przez użytkowników.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Tworzenie efektu paralaksy

Aby uzyskać efekt paralaksy, zastosuj ułamek wartości przewijania z komponentu przewijania do komponentu, który wymaga efektu paralaksy. Poniższy fragment kodu wybiera 2 zagnieżdżone elementy wizualne – obraz i blok tekstu – i przewija je w tym samym kierunku z różną szybkością:

@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

Najważniejsze informacje o kodzie

  • Tworzy niestandardowy modyfikator layout, aby dostosować szybkość przewijania składanego.
  • Image przewija się wolniej niż Text, co powoduje efekt paralaksy, gdy oba komponenty przesuwają się w pionie z różną szybkością.

Wyniki

Rysunek 1. Przewijana lista z efektem paralaksy.

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Listy i siatki umożliwiają wyświetlanie kolekcji w atrakcyjnej wizualnie formie, która jest łatwa w odczytaniu dla użytkowników.
Kolekcja krótkich przewodników
Poznaj techniki tworzenia jasnych i przyciągających uwagę elementów wizualnych, które nadadzą Twojej aplikacji na Androida atrakcyjny wygląd.
Kolekcja krótkich przewodników

Tekst wyświetlany

Tekst jest centralnym elementem każdego interfejsu użytkownika. Dowiedz się, jak możesz wyświetlać tekst w aplikacji, aby zapewnić użytkownikom przyjemne wrażenia.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię