y— title: Compose Lazy Layout(LazyColumn, LazyRow, ..) (작성 중) date: 2023-07-18T21:20:00+09:00 author: Seungmin Yang layout: post tag: [Android, Compose] —

Compose Lazy Layout(LazyColumn, LazyRow, ..)

기존 Android View System에서는 리스트, 그리드 형식의 데이터를 표시할 때에는 주로 RecyclerView를 사용했다. RecyclerView를 통해 뷰의 재사용을 통한 효율적인 다중 데이터 운용이 가능했지만 이를 위해 필요한 코드가 많았다.

• RecyclerView 생성
• RecyclerView Adapter 생성
• ItemView(ViewHolder) 생성

Compose에서는 많은 데이터를 리스트, 그리드 형식으로 보여주는 화면을 쉽게 구현하기 위해 LazyColumn, LazyRow, LazyVerticalGrid 등을 제공한다.

Lazy Layout 사용(LazyColumn)

LazyColumn의 content는 LazyListScope interface 내에서 호출하는 람다이다. 해당 람다는 item 및 items와 이를 이용한 확장들을 사용할 수 있다.

item

단일 아이템을 표현할 때 사용한다. key, item type이 꼭 필요하지는 않지만 비슷한 유형의 Composable을 여러 item을 이용하여 호출할 경우 key, item type을 적용할 경우 성능 상의 이점을 얻을 수 있다.

LazyColumn {  
    // Add a single item  
    item {  
        Text(text = "First item")  
    }
}

items

복수의 아이템을 표현할 때 사용한다. key, item type이 꼭 필요하지는 않지만 아이템의 추가 삭제 등의 변형이 일어날 경우 items 내의 모든 Composable이 Recomposition되지 않도록 key를 정해주는 것이 좋다. 특히 items 내에서 상태를 저장할 경우 key를 설정해야 위치가 변경될 때 Compose에서 상태를 올바르게 옮길 수 있다.

LazyColumn {  
    items(books, key = { it.id }) {  
        val rememberedValue = remember {  
            Random.nextInt()  
        }  
    }
}

이 외에도 stickyHeader 및 item 및 items를 편리하게 사용할 수 있는 여러 확장 함수를 제공한다.

LazyList 구현

LazyColumn은 어떻게 구현되어 있을까?

먼저 LazyColumn Composable은 LazyList Composable 함수를 호출하는 것으로 시작한다.

LazyList(  
    modifier = modifier,  
    state = state,  
    contentPadding = contentPadding,  
    flingBehavior = flingBehavior,  
    horizontalAlignment = horizontalAlignment,  
    verticalArrangement = verticalArrangement,  
    isVertical = true,  
    reverseLayout = reverseLayout,  
    userScrollEnabled = userScrollEnabled,  
    content = content  
)

LazyList는 전달받은 content를 바탕으로 LazyListItemProvider의 구현을 만들고 이를 LazyLayout에 전달한다.

ItemProvider는 다음의 형식으로 제공된다.

val itemProvider = rememberLazyListItemProvider(state, content)

rememberLazyListItemProvider 함수에서 content 람다와 함께 nearestItemsRangeState를 저장한다. nearestItemsRangeState는 화면상에 보이는 아이템의 정보가 어떤 것인지를 표현하는 객체이다.

LazyListItemProvider의 구현은 LazyListItemProvider와 LazyLayoutItemProvider(LazyLayout에 표시해야 할 Composable의 정보를 제공해줌)을 이용해서 진행한다.

LazyLayout은 현재 필요한 아이템만을 표시하는 Layout이다. 우리가 직접 사용하는 LazyColumn과 같은 Composable은 Scroll을 자동으로 처리하지만 하위 컴포저블인 LazyLayout은 스크롤이 구현되어 있지 않다. Modifier.scrollable을 이용하여 스크롤 처리를 진행한다.

LazyLayout은 LazyLayoutItemContentFactory을 이용해 전달받은 ItemProvider의 아이템을 캐싱하며 화면에 표시해야 할 Composable을 제공한다.