[Compose] LazyColumn이란?

LazyColumn이란?

android developer에서 lazy column은 다음과 같이 정의되어 있다.

현재 표시된 항목만 구성하고 배치하는 세로 스크롤 목록입니다. 
이 content블록은 다양한 유형의 항목을 내보낼 수 있는 DSL을 정의합니다. 
LazyListScope.item예를 들어 단일 항목을 추가하고 LazyListScope.items항목 목록을 추가하는 데 사용할 수 있습니다 .

이 설명을 읽어보면 "RecyclerView"가 떠오를 것이다.

LazyColumn은 세로로 아이템을 표시하고, LazyRow는 가로로 아이템을 표시한다.

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: @ExtensionFunctionType LazyListScope.() -> Unit
): Unit

• Modifier: LazyColumn에 적용할 modifier이다.
• LazyListState: 리스트 상태를 제어, 관찰할 때 사용하는 상태값, offset을 가져오는 프로퍼티, 드래그 이벤트를 가져오는 프로퍼티 등을 사용할 수 있다.
• PaddingValues: 전체 컨텐츠 주위에 패딩을 추가하고 싶을 때 사용한다.
  • 각 아이템 사이에 간격을 추가하려면 verticalArrangement를 사용한다.
• reserveLayout: 스크롤, 레이아웃 방향을 뒤집는 프로퍼티이다.
• verticalArrangement: 레이아웃의 자식들의 세로 배열이다. 아이템 사이의 간격 추가 또는 아이템 갯수가 충분하지 않을 때 아이템 배열을 지정할 수 있다.
• horizontalAligment: 아이템에 가로 정렬을 적용할 때 사용한다.
• flingBehavior: 플링 동작을 설명하는 로직이다.
  • 플링은 이 사이트를 참고하면 된다.
• userControlEnabled: 사용자의 제스처 또는 접근성 작업을 통한 스크롤이 허용되는지 여부이다.
• content: 내용을 설명하는 블럭이다. LazyListScope.item()으로 단일 아이템 혹은 LazyListScope.items()를 통해 여러 아이템을 추가할 수 있다.

예제

package com.example.composestudy

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.composestudy.ui.theme.ComposeStudyTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeStudyTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    LazyColumn()
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview
@Composable
fun LazyColumn() {
    LazyColumn {
        item {
            Text(
                text = "단일 아이템",
                fontSize = 30.sp
            )
        }
        items(30) { index ->
            Text(
                text = "${index}번째 아이템",
                fontSize = 30.sp
            )
        }
    }
}

위의 코드 실행 결과는 다음과 같다.