LazyColumn을 사용한 시차 스크롤

패럴랙스 스크롤링 효과는 보기에 좋고 사용자의 관심을 끈다. Jetpack Compose를 사용하면 이 효과를 상당히 쉽게 구현할 수 있습니다.

또 다른 항목

이 예에서는 텍스트 항목이 있는 목록 위에 이미지가 있습니다. 이는 이미지 뒤에 LazyColumn이 있음을 의미할 수 있지만 API LazyColumn을 볼 때 항목 메서드를 호출하고 항목을 생성할 데이터가 포함된 목록을 제공할 수 없습니다.

val list = (0..1_000).map{ "Item $it" }.toList()

LazyColumn {
    items(list) { item ->
        Text(text = item)
    }
}

LazyColumn 범위에서 여러 항목 및 항목 메서드를 호출할 수도 있습니다. 항목 함수를 호출하는 것만으로 제한되지 않습니다.
이를 위해 item을 사용하여 이미지를 표시하고 항목을 사용하여 목록을 만들 수 있습니다.

val list = (0..1_000).map{ "Item $it" }.toList()

LazyColumn {

    item {
        Image(
            painter = resourcePainter(id = R.drawable.image),
            contentDescription = "Top image"),
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillParentMaxWidth()
    }

    items(list) { item ->
        Text(text = item)
    }
}

그것으로 우리는 이미 두 가지 유형의 항목이 있는 목록을 가지고 있으며 물론 지금은 동일한 속도로 스크롤하고 있습니다.

그렇게 빠르지 않아

시차 효과를 얻으려면 다른 항목의 스크롤 속도를 그대로 유지하면서 이미지의 스크롤 속도를 줄여야 합니다.

스크롤링에 영향을 미치려면 필요한

정보를 스크롤하는 방법

이미지의 스크롤 동작을 조작하는 방법입니다.

스크롤 정보의 경우 LazyColumns 매개변수 LazyListState를 활용할 수 있으며 여기에는 필요한 정보가 포함되어 있습니다. 이를 위해 기본값을 유지하는 대신 직접 생성하여 전달합니다.

val lazyListState = rememberLazyListState()

LazyColumn(state = lazyListState){
    ...
}

LazyListState에서 파생되어 다른 항목에 비해 y축을 따라 이미지의 느린 변환을 계산할 수 있습니다.

val firstItemTranslationY by remember {
        derivedStateOf {
            when {
                lazyListState.layoutInfo.visibleItemsInfo.isNotEmpty() && lazyListState.firstVisibleItemIndex == 0 -> lazyListState.firstVisibleItemScrollOffset * .6f
                else                                                                                               -> 0f
            }
        }
    }

우리는 이미지가 화면에 보이는지 확인하고, 그렇지 않으면 아무 것도 하고 싶지 않고 0의 변환을 반환하여 정상적으로 작동한다고 말합니다. 이미지가 보이는 한 현재 스크롤 오프셋을 곱합니다. 1과 0 사이의 숫자. 숫자가 1에 가까울수록 스크롤링과 함께 이미지가 느리게 움직입니다. 패럴랙스 스크롤 효과를 위해 평소처럼 이미지를 화면에 더 오래 유지하려고 합니다.

해당 값을 가지고 놀면서 원하는 대로 속도를 조정할 수 있습니다. 이 예에서는 0.6으로 중간 어딘가에 유지하겠습니다.

이제 이미지 스크롤을 조정할 수 있는 값이 생겼습니다. 하지만 어디에 적용해야 할까요? 이를 위해 Compose는 우리가 사용할 수 있는 매우 편리한 수정자를 제공합니다. Modifier.graphicsLayer는 적용되는 컴포저블의 크기 조정, 회전, 알파, 변환 등을 조작할 수 있는 가능성을 제공합니다.

번역은 좋은 선택처럼 들립니다. Modifier.graphicsLayer를 이미지에 적용하고 수직 이동을 방금 계산한 값으로 설정합니다.

...
item {
    Image(
        painter = painterResource(id = R.drawable.image),
        contentDescription = "Top image",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .fillParentMaxWidth()
            .graphicsLayer {
                translationY = firstItemTranslationY
            }
    )
}
...

조금 더 놀기 위해 스크롤하는 동안 이미지를 천천히 페이드 아웃해 보겠습니다.

val visibility by remember {
        derivedStateOf {
            when {
                lazyListState.layoutInfo.visibleItemsInfo.isNotEmpty() && lazyListState.firstVisibleItemIndex == 0 -> {
                    val imageSize = lazyListState.layoutInfo.visibleItemsInfo[0].size
                    val scrollOffset = lazyListState.firstVisibleItemScrollOffset

                    scrollOffset / imageSize.toFloat()
                }
                else                                                                                               -> 1f
            }
        }
    }

절차는 기본적으로 이전과 동일하지만 차이점은 첫 번째 항목의 오프셋을 취하는 대신 크기와 스크롤 오프셋을 취하고 알파 값을 계산한다는 것입니다.

적용할 때 계산된 가시성을 1에서 빼면 이미지가 화면을 떠날 때 완전히 투명해집니다.

.graphicsLayer {
    alpha = 1f - visibility
    translationY = firstItemTranslationY
}

결론

Jetpack Composes LazyColumn 및 Modifier.graphicsLayer를 사용하면 시차 스크롤 효과를 만드는 것이 정말 간단합니다. LazyListState에서 파생된 변환을 계산하고 Modifier에 적용합니다.

이에 대한 전체 코드는 GitHub에서 찾을 수 있습니다.

또한 페이딩 TopBar를 이 예제에 추가했습니다. 나는 뒤로 화살표를 항상 보이게 하고 싶었고 결국 나만의 TopBar를 만들게 되었습니다. 표준 Compose TopBar와 함께 작동하게 하는 방법에 대한 아이디어가 있으면 의견을 남기거나 저에게 직접 편지를 보내주십시오. 나는 그것에 대해 듣고 싶습니다 :-).

패럴랙스 스크롤링에 대한 이 작은 예제를 즐기셨기를 바랍니다.
다음편에서 만나요👋.