Tworzenie efektu paralaksy

Przewijanie z paralaksą to technika, w której treści w tle i na pierwszym planie przewijają się z różną prędkością. Możesz wdrożyć tę technikę, aby ulepszyć interfejs aplikacji i zapewnić użytkownikom bardziej dynamiczne wrażenia podczas przewijania.

Wyniki

Rysunek 1. Przewijana lista z efektem paralaksy.

Zgodność wersji

Ta implementacja wymaga, aby minSDK projektu było ustawione na poziom API 21 lub wyższy.

Zależności

Tworzenie efektu paralaksy

Aby uzyskać efekt paralaksy, zastosuj ułamek wartości przewijania z elementu kompozycyjnego przewijania do elementu kompozycyjnego, który ma mieć efekt paralaksy. Poniższy fragment kodu pobiera 2 zagnieżdżone elementy wizualne – obraz i blok tekstu – i przewija je w tym samym kierunku z różną prędkoś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 elementu kompozycyjnego.
  • Element Image przewija się wolniej niż element Text, co daje efekt paralaksy, gdy 2 elementy kompozycyjne przesuwają się pionowo z różną prędkością.

Zbiory zawierające ten przewodnik

Ten przewodnik jest częścią tych wybranych zbiorów krótkich przewodników, które obejmują szersze cele związane z tworzeniem aplikacji na Androida:

Listy i siatki umożliwiają aplikacji wyświetlanie zbiorów w atrakcyjnej wizualnie formie, która jest łatwa w odbiorze dla użytkowników.
Zbiór krótkich przewodników
Poznaj techniki wykorzystywania jasnych, angażujących elementów wizualnych, aby nadać aplikacji na Androida piękny wygląd.
Zbiór krótkich przewodników

Wyświetlanie tekstu

Tekst jest centralnym elementem każdego interfejsu. Poznaj różne sposoby prezentowania tekstu w aplikacji, aby zapewnić użytkownikom przyjemne wrażenia.
Zbiór krótkich przewodników

Masz pytania lub chcesz się podzielić opinią?

Otwórz stronę z najczęstszymi pytaniami i dowiedz się więcej o krótkich przewodnikach lub skontaktuj się z nami i podziel się swoimi przemyśleniami.
Otwórz najczęstsze pytania Prześlij opinię