이 페이지는 Cloud Translation API를 통해 번역되었습니다.

시차 스크롤 효과 만들기

시차 스크롤은 배경 콘텐츠와 포그라운드 콘텐츠가 서로 다른 속도로 스크롤되는 기법입니다. 이 기법을 구현하여 앱의 UI를 개선하고 사용자가 스크롤할 때 더 역동적인 환경을 만들 수 있습니다.

버전 호환성

이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.

종속 항목

시차 효과 만들기

시차 효과를 얻으려면 스크롤 컴포저블의 스크롤 값 일부를 시차 효과가 필요한 컴포저블에 적용합니다. 다음 스니펫은 중첩된 두 시각적 요소(이미지와 텍스트 블록)를 가져와 서로 다른 속도로 같은 방향으로 스크롤합니다.

@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