(기초) 1-3. Compose 고급 UI - LazyColumn, LazyRow

LazyColumn : 

LazyColumn은 Jetpack Compose에서 세로 리스트를 효율적으로 렌더링하는 Composable이다. Android의 RecyclerView와 역할적으로 유사하지만 Compose 스타일에 맞게 설계되어 있다. 

• 세로 방향 스크롤 리스트를 만들 때 사용
• 기존 xml을 사용할때 RecyclerView와 비슷하다고 할 수 있다.

핵심 개념 :

• Lazy(지연) 구성 : 화면에 표시되는 항목만 UI를 생성하고, 화면 밖으로 나간 항목은 해제되어 메모리/연산을 절약한다. 
• 재사용(유사) : Compose는 내부적으로 효율적으로 항목을 관리하지만, 항목의 식별자(key)를 제공하면 상태 보존을 더 안정적으로 할 수 있습니다. 
• 상태 관리 : 스크롤 위치 등은 LazyListState로 관리합니다. (rememberLazyListState()로 생성).
• 다양한 아이템 선언 방식 : item {}, items(list) {}, itemsIndexed {}, items(count) {}

@Composable
fun CustomLazyColumn() {
    val list = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

    val listState = rememberLazyListState() 				// 첫 번째 보이는 아이템 인덱스와 스크롤 오프셋을 추적할 수 있음

    LazyColumn(
        state = listState,                                  // 스크롤 상태 연결
        modifier = Modifier.fillMaxWidth(),                 // LazyColumn이 가로 전체를 차지하도록
        verticalArrangement = Arrangement.spacedBy(8.dp),   // 아이템 사이 수직 간격 8dp
        horizontalAlignment = Alignment.CenterHorizontally, // 아이템 수평 정렬: 가운데
        contentPadding = PaddingValues(16.dp)               // 리스트 안쪽 여백 16dp
    ) {
        item {
            Text(
                "헤더",
                style = MaterialTheme.typography.titleMedium, // Material3 Typography 스타일
                modifier = Modifier.padding(16.dp)            // 헤더 내부 여백
            )
        }

        items(items = list, key = { it }) { name ->
            Text(
                text = name.toString(), // 리스트 항목 텍스트 출력
                modifier = Modifier
                    .fillMaxWidth() // 아이템이 가로 전체 차지
                    .padding(12.dp) // 아이템 내부 여백
            )
        }
    }
}

 

 

modifier	LazyColumn 자체의 레이아웃 속성 설정 (크기, 패딩, 배경 등)	modifier = Modifier.fillMaxWidth().padding(16.dp)
state	스크롤 상태 추적 및 제어, 특정 아이템으로 스크롤 가능	val listState = rememberLazyListState() LazyColumn(state = listState) { ... }
verticalArrangement	세로 방향 아이템 간격 및 정렬 설정	verticalArrangement = Arrangement.spacedBy(8.dp)
horizontalAlignment	가로 방향 정렬 설정	horizontalAlignment = Alignment.CenterHorizontally
contentPadding	LazyColumn 내부 전체 여백 설정	contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
item { ... }	단일 아이템 정의 (헤더, 푸터, 광고 배너 등)	item { Text("헤더") }
items(list) { ... }	리스트 데이터를 기반으로 반복 아이템 생성	items(list) { name -> Text(name) }
itemsIndexed(list) { index, item -> ... }	리스트 데이터와 인덱스를 함께 사용	itemsIndexed(list) { index, name -> Text("$index: $name") }
stickyHeader { ... }	스크롤 시 상단 고정되는 헤더 (Experimental)	stickyHeader { Text("섹션 헤더") }
reverseLayout	아래에서 위로 쌓는 레이아웃 (채팅 UI 등)	LazyColumn(reverseLayout = true) { ... }
flingBehavior	스크롤 애니메이션/감속 방식 커스터마이징	LazyColumn(flingBehavior = ScrollableDefaults.flingBehavior()) { ... }

 

LazyRow :

LazyRow는 LazyColumn의 가로 버전이다.

@Composable
fun CustomLazyRow() {
    val list = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
    val listState = rememberLazyListState()

    LazyRow(
        state = listState,                                  // 스크롤 상태를 연결
        modifier = Modifier.fillMaxWidth(),                 // 전체 크기 사용
        horizontalArrangement = Arrangement.spacedBy(8.dp), // 아이템 사이 간격
        verticalAlignment = Alignment.CenterVertically,     // 가로 정렬
        contentPadding = PaddingValues(16.dp)               // 리스트 패딩
    ) {
        item {
            Text(
                "헤더",
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier.padding(16.dp)
            )
        }

        items(items = list, key = { it }) { name ->
            Text(
                text = name.toString(), // 리스트 항목의 텍스트 출력
                modifier = Modifier
                    .fillMaxWidth() // Text를 가로 전체 차지
                    .padding(12.dp) // 아이템 내부 여백 12dp
            )
        }
    }
}

modifier	LazyRow 자체의 레이아웃 속성 설정 (크기, 패딩, 배경 등)	modifier = Modifier.fillMaxWidth().padding(16.dp)
state	스크롤 상태 추적 및 제어, 특정 아이템으로 스크롤 가능	val listState = rememberLazyListState() LazyRow(state = listState) { ... }
horizontalArrangement	가로 방향 아이템 간격 및 정렬 설정	horizontalArrangement = Arrangement.spacedBy(8.dp)
verticalAlignment	세로 방향 정렬 설정	verticalAlignment = Alignment.CenterVertically
contentPadding	LazyRow 내부 전체 여백 설정	contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
item { ... }	단일 아이템 정의 (헤더, 광고 배너 등)	item { Text("헤더") }
items(list) { ... }	리스트 데이터를 기반으로 반복 아이템 생성	items(list) { name -> Text(name) }
itemsIndexed(list) { index, item -> ... }	리스트 데이터와 인덱스를 함께 사용	itemsIndexed(list) { index, name -> Text("$index: $name") }
reverseLayout	오른쪽에서 왼쪽으로 아이템 배치	LazyRow(reverseLayout = true) { ... }
flingBehavior	스크롤 애니메이션/감속 방식 커스터마이징	LazyRow(flingBehavior = ScrollableDefaults.flingBehavior()) { ... }