Compose List - LazyColumn, LazyRow로 리스트 구현
LazyColumn과 LazyRow란?
LazyColumn과 LazyRow는 각각 Jetpack Compose에서 제공하는 리스트 컴포넌트이다.
LazyColumn은 수직(세로)로 스크롤이되는 리스트를, LazyRow는 수평(가로)로 스크롤이되는 리스트를 구현한다.
이들은 기존의 RecyclerView와 비슷한 동작을 수행하여 리스트를 효율적으로 구현한다.
LazyColumn과 LazyRow 사용
기존 Android 리스트가 동일한 레이아웃의 아이템만 나타날 수 있었다면, LazyColumn과 LazyRow에서는 단일 아이템을 원하는 위치의 넣어서 구현 가능한 장점이 있다.
그래서 유연성 있는 아이템 배치를 위해서 아래와 같은 함수들을 제공한다.
- item : 단일 아이템
- items : 다수 아이템
- itemsIndexed : 다수 아이템 + 아이템 인덱스
 |
| 그림1. 아이템 함수 종류 |
item
리스트에서 1개의 아이템만 나타내고 싶을 경우 사용한다.
리스트는 보통 동일한 레이아웃을 갖는 항목들을 나타내기 위하여 사용하지만 Header나 Footer처럼 리스트의 최상단이나 최하단에 다른 레이아웃을 갖는 아이템을 추가하고 싶을 경우가 있다.
이런 경우 item을 사용하면 간단하게 추가가 가능하며, 만약 글 목록을 나타내는 리스트의 경우 최상단의 제목행을 나타내는 데 사용할 수 있을 것이다.
items
item과 달리 동일한 레이아웃을 갖는 여러 개의 아이템을 나타내는 데 사용한다.
리스트를 사용하는 주된 이유로
그림 1을 보면 Int 타입이나 List 타입을 파라미터로 받는 것을 볼 수 있는데
Int 타입인 경우 해당 숫자만큼 아이템 나타낼 수도 있고, 리스트를 전달하여 나타낼 수도 있기 때문에 선택하여 사용하면 된다.
itemsIndexed
items와 동일한 역할을 하며, 추가적으로 index의 값을 사용할 수 있다.
실제로 이벤트 처리 등 index 값이 필요한 경우가 다수 있어서 items보다 자주 사용된다.
이제 위 3개의 함수들을 적절하게 사용하여 구성하면 원하는 리스트 형태를 구현할 수 있다.
LazyColumn
item, items, item을 순서대로 사용하여서 최상단과 최하단의 Header와 Footer를 추가하였다.
item은 이런 식으로 반복되지 않는 단일 아이템을 나타내는 데 사용할 수 있는데
그림 2를 보면 최상단의 Header 항목을 보여준 후 items로 리스트의 각 아이템들을 보여주는 것을 볼 수 있다.
또한, ListHeader, ListItem, ListFooter 각각 별도의 컴포저블 함수로 정의하였는데, 이렇게 분리를 해주어야 재사용성과 가독성을 올려준다.
LazyColumn {
item {
ListHeader()
}
items(sample) { text ->
ListItem(text = text)
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.padding(horizontal = 10.dp)
.background(Color.Black)
)
}
item {
ListFooter()
}
}
 |
| 그림2. LazyColumn |
LazyRow
LazyRow는 리스트의 방향만 수평(가로)일 뿐 구성이나 구현 방법은 LazyColumn과 동일하다.
다만, 여기서 itemsIndexed를 사용하였는데 앞쪽의 인자가 index 뒤쪽의 인자가 List의 각 item를 의미한다. 인자의 이름은 무엇이든 상관없지만 순서는 맞추어 줘야 한다.
LazyRow {
item {
ListHeader()
}
itemsIndexed(sample) { index, text ->
ListItem(text = text, index = index)
}
item {
ListFooter()
}
}
 |
| 그림3. 테스트 결과 |
댓글
댓글 쓰기