[Android Compose Lists] 2. Compose LazyColumn을 이용해 RecyclerView 만들기 + item, items, itemsIndexed사용법 정리

LazyColumn이란?

LazyColumn은 화면에 보여지는 컴포저블만을 표시하는 scrollable한 Column이다. LazyColumn은 화면에 보여지는 컴포저블만을 표시하기 때문에 화면 로딩 시간을 최적화 시킬 수 있어 많은 아이템이 표시되어야 할 경우 필수적으로 사용되어야 하는 레이아웃이다. 

 

LazyColumn의 item으로 사용할 컴포저블 정의

LazyColumn을 사용하기 위해서 먼저 LazyColumn의 item으로 사용할 컴포저블을 정의하자. Text를 Card로 감싼 간단한 컴포저블이다.

@Composable
fun KotlinWorldCard(order: Int) {
    Card(
        Modifier
            .padding(12.dp)
            .border(width = 4.dp, color = Color.Black)
            .fillMaxWidth()
            .height(100.dp)
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text("Kotlin World ${order}")
        }
    }
}

그림1. Card Composable

 

LazyColumn 사용하기

LazyColumn은 item을 기반으로 동작한다. item 하나가 자식 컴포저블에 대응되며 LazyColumnScope내에서 다음의 item들을 사용할 수 있다.

• item
• items
• itemsIndexed

이들을 순서대로 사용하면서 LazyColumn의 사용법을 익히도록 하자.

 

item

item은 LazyColumn 내부에 컴포저블을 직접 넣고 싶을 때 사용하는 메서드이다.

fun item(key: Any? = null, content: @Composable LazyItemScope.() -> Unit)

item의 LazyItemScope에 있는 컴포저블이 하나의 item으로 인식되어 모두 표시된다. 예를 들어 아래와 같이 두개의 Card를 설정할 경우 컴포저블이 LazyColumn에 생기게 된다. 

LazyColumn() {
    item {
        //아래 둘은 하나의 item이 된다.
        KotlinWorldCard(order = 0)
        KotlinWorldCard(order = 1)
    }
}

그림2. item

 

 

items

items는 컴포저블을 반복해서 나타내고자 할 때 사용한다. 

fun items(
    count: Int,
    key: ((index: Int) -> Any)? = null,
    itemContent: @Composable LazyItemScope.(index: Int) -> Unit
)

itemContent의 인자값으로는 index에 해당하는 값을 내보내므로 it 값을 통해 몇번째 item인지를 알 수 있다. 예를 들어 아래와 같이 코드를 작성하면 KotlinWorldCard의 인자로 item의 순서값이 들어가게 된다.

LazyColumn() {
    items(5000) {
        KotlinWorldCard(order = it)
    }
}

그림3. items

앞선 글 [Android Compose Lists] 1. Column과 ScrollState를 이용해 Scroll View만들기의 [그림4] 에서와 같은 동작을 하지만 실행 시 지연 시간이 전혀 없는 것을 확인할 수 있다. 이유는 LazyColumn이 화면에 보이는 컴포저블만을 로딩하기 때문이다.

 

itemsIndexed

itemsIndexed는 우리가 실제 제품을 개발할 때 가장 많이 쓰일 방식이다. itemsIndex를 설정하면 아이템으로 Custom한 클래스(객체)의 설정이 가능하다.

inline fun <T> LazyListScope.itemsIndexed(
    items: List<T>,
    noinline key: ((index: Int, item: T) -> Any)? = null,
    crossinline itemContent: @Composable LazyItemScope.(index: Int, item: T) -> Unit
)

위의 itemContent에서 index와 item을 인자값으로 내보내는 것을 확인할 수 있다.

 

자 이번에는 아이템을 100,200,300으로 세개를 만들고 이를 이용해 LazyColumn의 아이템을 만들어보자.

• itemsIndexed의 인자로 listOf(100,200,300) 을 넘김으로써 아이템 3개의 생성한다.
• 그 후 index, value 를 인자로 하는 람다식에 해당 값을 이용한 Composable을 생성한다.

LazyColumn {
    itemsIndexed(
        listOf(100, 200, 300) // 1. 아이템 3개 생성
    ) { index, item ->
        KotlinWorldCard(order = item) // 2. 위의 3개 아이템(100,200,300)을 이용해서 컴포저블 생성
    }
}

위 코드의 결과물은 다음과 같다.

그림4. LazyColumn에 Custom Item이용

 

물론 items를 이용해서도 바깥에 List를 만든 다음 Index를 이용해 접근하여 위의 결과물을 만들 수 있지만, 가독성을 위해 itemsIndexed를 쓰는 습관을 들이도록 하자.