Jetpack Compose NestedScroll 상세 설명 및 사용 예시

 

NestedScroll 개요

NestedScroll은 Jetpack Compose에서 부모와 자식 스크롤 구성 요소가 원활하게 상호작용할 수 있도록 도와주는 기능입니다. 여러 스크롤 가능한 요소가 중첩되어 있을 때, 스크롤 이벤트의 흐름을 조정하여 자연스러운 사용자 경험을 제공합니다.

NestedScroll의 주요 기능

• 상위(부모)와 하위(자식) 스크롤 이벤트 조정
• 자연스러운 스크롤 동작 구현
• 스크롤 이벤트 전달을 통해 원활한 사용자 경험 제공

 

---

 

NestedScroll 사용 예시

1. NestedScroll과 Collapsing AppBar

@Composable
fun CollapsingAppBarExample() {
    val nestedScrollConnection = rememberNestedScrollInteropConnection()
    Column(
        modifier = Modifier.nestedScroll(nestedScrollConnection)
    ) {
        TopAppBar(title = { Text("Collapsing AppBar") })
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(50) { index ->
                Text("Item #$index", Modifier.padding(16.dp))
            }
        }
    }
}

설명:

• rememberNestedScrollInteropConnection()를 사용해 스크롤 이벤트를 부모와 연결합니다.
• 상단의 TopAppBar가 스크롤 시 접히는 효과를 가집니다.

 

---

 

2. NestedScroll을 활용한 중첩 리스트 구현

@Composable
fun NestedLazyColumnExample() {
    val nestedScrollConnection = rememberNestedScrollInteropConnection()
    Column(modifier = Modifier.nestedScroll(nestedScrollConnection)) {
        LazyColumn {
            items(10) { outerIndex ->
                Text("Outer Item #$outerIndex", Modifier.padding(16.dp))
                LazyColumn(modifier = Modifier.height(200.dp)) {
                    items(5) { innerIndex ->
                        Text("Inner Item #$innerIndex", Modifier.padding(8.dp))
                    }
                }
            }
        }
    }
}

설명:

• LazyColumn 내부에 또 다른 LazyColumn을 중첩하여 스크롤을 테스트합니다.
• 부모 스크롤과 자식 스크롤 간의 원활한 이벤트 처리를 보장합니다.
• 내부 LazyColumn에 Modifier.height()를 적용하여 레이아웃 오류 방지.

 

---

 

주의 사항

• nestedScroll을 사용하려면 올바른 NestedScrollConnection을 제공해야 정상적으로 동작합니다.
• 부모와 자식 스크롤 동작이 중첩될 경우 이벤트가 올바르게 분배되지 않으면 스크롤 충돌이 발생할 수 있습니다.
• 성능 최적화를 위해 불필요한 중첩을 피하고, 최적의 스크롤 이벤트 처리를 구현해야 합니다.
• LazyColumn을 중첩할 때는 내부 리스트에 Modifier.height() 또는 Modifier.weight()를 지정하여 예상치 못한 스크롤 문제를 방지해야 합니다.

 

---

 

변형 사용 방법

• Custom NestedScroll Connection 구현:

    val customNestedScrollConnection = object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            return Offset.Zero // 필요에 따라 조정 
        }
    }

    Column(
    	modifier = Modifier.nestedScroll(customNestedScrollConnection)
    ) { 
    	/* 내용 */ 
    }

 

• NestedScroll과 SwipeRefresh 결합:

 SwipeRefresh(
        state = rememberSwipeRefreshState(isRefreshing = false),
        onRefresh = { /* 갱신 로직 */ }
    ) {
        LazyColumn(
            modifier = Modifier.nestedScroll(
                rememberNestedScrollInteropConnection()
            )
        ) {
            items(30) {
                Text("Item #$it")
            }
        }
    }

 

---