Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

시차 스크롤 효과 만들기

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

결과

그림 1. 시차 효과가 있는 스크롤 목록

버전 호환성

이 구현을 사용하려면 프로젝트 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