Jetpack Compose - LayzColumn

LayzColumn

LazyColumn은 리스트 형태로 세로 방향으로 스크롤할 수 있는 요소를 표시할 때 사용한다. 스크롤 가능한 리스트를 효율적으로 렌더링할 수 있게 해준다.

Arrangement 속성

Arrangement는 레이아웃 내 아이템들이 어떻게 배치될지를 결정한다. 주로 아이템 간의 간격이나 배치 방법을 제어할 때 사용한다.

Arrangement.Start: 모든 아이템을 레이아웃의 시작 부분에 배치한다.
Arrangement.Center: 아이템들을 중앙에 배치한다.
Arrangement.End: 아이템들을 끝 부분에 배치한다.
Arrangement.spacedBy: 아이템 간 일정한 간격 설정, SpaceBetween과 비슷하지만 직접 간격값을 설정할 수 있다.
Arrangement.SpaceBetween: 첫 번째와 마지막 항목은 시작과 끝에 고정되고, 나머지 항목들이 균등한 간격을 유지한다.
Arrangement.SpaceAround: 모든 항목 주위에 동일한 간격을 적용한다. 단, 첫 번째와 마지막 아이템과 가장자리 간격은 그 절반이다.
Arrangement.SpaceEvenly: 모든 항목 사이와 가장자리 사이에 동일한 간격을 적용한다.

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(itemsList) { item ->
        // 각 항목에 대한 Composable 코드
    }
}

Alignment 속성

Alignment 속성은 아이템들이 레이아웃 내에서 세로 또는 가로 방향으로 어떻게 정렬될지 결정한다. LazyRow, LazyColumn과 같은 레이아웃에서 사용할 수 있다.

Alignment.Start: 아이템을 시작 부분에 정렬한다.
Alignment.CenterHorizontally: 가로 방향에서 아이템을 중앙에 정렬한다.
Alignment.End: 아이템을 끝 부분에 정렬한다.

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    items(itemsList) { item ->
        // 각 항목에 대한 Composable 코드
    }
}

LazyHorizontalGrid

LazyHorizontalGrid는 가로 방향으로 스크롤 가능한 그리드를 구성할 수 있다. Jetpack Compose에서 다양한 그리드 형식을 만들 때 유용하다. LazyVerticalGrid와 비슷하지만, 가로로 스크롤된다.

LazyHorizontalGrid(
    rows = GridCells.Fixed(2),  // 고정된 행 수
    contentPadding = PaddingValues(16.dp)
) {
    items(itemList) { item ->
        // 각 그리드 항목에 대한 Composable 코드
    }
}

LazyVerticalGrid

LazyVerticalGrid는 그리드 형식으로 세로 방향으로 스크롤 가능한 레이아웃을 만들 때 사용한다. Jetpack Compose에서 다양한 아이템을 그리드 형태로 배치하고 효율적으로 렌더링할 수 있게 도와준다.

LazyVerticalGrid(
    columns = GridCells.Adaptive(128.dp),  // 최소 128dp 크기를 가지는 그리드 셀
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(itemList) { item ->
        // 각 그리드 항목에 대한 Composable 코드
    }
}