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}")
}
}
}
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)
}
}
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)
}
}
앞선 글 [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)을 이용해서 컴포저블 생성
}
}위 코드의 결과물은 다음과 같다.
물론 items를 이용해서도 바깥에 List를 만든 다음 Index를 이용해 접근하여 위의 결과물을 만들 수 있지만, 가독성을 위해 itemsIndexed를 쓰는 습관을 들이도록 하자.
