[Compose UI] LazyColumn (스크롤 가능한 Column)

Jetpack Compose에서는 LazyColumn 컴포저블을 사용하여 스크롤 가능한 목록을 만들 수 있다. 

LazyColumn과 Column의 차이점은 Compose가 한 번에 모두 로드하므로 표시할 항목이 적은 경우 Column을 사용해야 한다는 것입니다. Column은 사전 정의된 또는 고정된 개수의 컴포저블만 보유할 수 있다. 

하지만 LazyColumn은 콘텐츠를 추가할 수 있어 긴 목록의 경우 특히 목록의 길이를 알 수 없을 때 유용하게 사용할 수 있다. LazyColumn는 추가 코드 없이 기본적으로 스크롤도 제공하고 있다. 특히 LazyColumn은 화면에 보여지는 컴포저블만 추가하여 보여주는 방식이기에 많은 리스트를 보여줘야 하는 경우 최적화에 사용하기 용이하다.

 

LazyColumn 함수 시그니처

@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical =
        if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyListScope.() -> Unit
)

 

파라미터 설명

• modifier - 이 레이아웃에 적용하는 Modifier.
• state - 목록의 상태를 제어하거나 관찰하는 데 사용되는 상태 개체.
• contentPadding - 전체 콘텐츠 주변의 패딩. 수정자 매개변수를 통해 padding을 주입하는 것은 불가능하다. 이를 사용하여 첫 번째 항목 앞이나 마지막 항목 뒤에 패딩을 추가할 수도 있다. 각 항목 사이에 간격을 추가하려면 verticalArrangement를 사용한다.
• reverseLayout - 스크롤 및 레이아웃 방향을 반대로 바꿉니다. true인 경우 항목이 역순으로 배치되며 LazyListState.firstVisibleItemIndex == 0은 열이 맨 아래로 스크롤됨을 의미한다. reverseLayout은 verticalArrangement의 동작을 변경하지 않습니다
  verticalArrangement - 레이아웃 자식의 세로 배열이다. 전체 최소 크기를 채우기에 항목이 충분하지 않을 때 항목 사이에 간격을 추가하고 항목의 배열을 지정할 수 있습니다.
• horizontalAlignment - 항목에 적용된 수평 정렬이다.
• flingBehavior - 플링 동작(Fling Behavior)을 설명하는 파라미터.
• userScrollEnabled - 사용자 제스처 또는 접근성 작업을 통한 스크롤이 허용되는지 여부를 설정한다. 비활성화된 경우에도 상태를 사용하여 프로그래밍 방식으로 계속 스크롤할 수 있다. 초기값은 true 이므로 기본적으로 스크롤을 제공한다.
• content - 내용을 설명하는 블록. 이 블록 내에서 LazyListScope.item과 같은 메서드를 사용하여 단일 항목을 추가하거나 LazyListScope.items를 사용하여 항목 목록을 추가할 수 있습니다.

 

코드 예시

아래 코드는 안드로이드 코드랩(https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations) 에서 제공하는 코드를 참고하여 구성하였다.

아래와 같이 LazyColumn에 리스트를 추가하면 자동으로 스크롤이 가능한 Column들이 추가된다. 각 Column에 추가되는 아이템은 Card로 구성한 코드이다.

@Composable
fun AffirmationCard(
    affirmation: Affirmation,
    modifier: Modifier = Modifier)
{
    Card(
        modifier = modifier.padding(8.dp),
        elevation = 4.dp
    ) {
        Column {
            Image(
                painter = painterResource(id = affirmation.imageResourceId),
                contentDescription = stringResource(id = affirmation.stringResourceId),
                modifier = Modifier
                    .fillMaxWidth()
                    .height(194.dp),
                contentScale = ContentScale.Crop
            )
            Text(
                text = stringResource(id = affirmation.stringResourceId),
                modifier = Modifier.padding(16.dp),
                style = MaterialTheme.typography.h6
            )
        }
    }
}

@Composable
fun AffirmationList(
    affirmationList: List<Affirmation>,
    modifier: Modifier = Modifier) {
    LazyColumn {
        items(affirmationList) { affirmation ->
            AffirmationCard(affirmation)
        }
    }
}

 

만약 아래와 같이 contentPadding을 추가하면 아이템 컨텐츠 주변에 여백이 추가된 것을 확인할 수 있다.

@Composable
fun AffirmationList(
    affirmationList: List<Affirmation>,
    modifier: Modifier = Modifier) {
    LazyColumn (
        contentPadding = PaddingValues((20.dp)),
    ) {
        items(affirmationList) { affirmation ->
            AffirmationCard(affirmation)
        }
    }
}

 

LazyColumn 외에도 LazyRow, LazyVerticallGrid, LazyHorizontalGrid 도 제공을 하고 있다. 사용하는 방법은 유사하니 필요한 경우에 맞춰서 사용하면 좋을 것 같다.

참고

• https://developer.android.com/jetpack/compose/lists
• https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations