Jetpack Compose 무작정 따라해보기 2 - 리스트 화면

이전 글

2022.01.17 - [Android/Jetpack Compose] - Jetpack Compose 무작정 따라 해 보기 1 - 리스트 아이템

Jetpack Compose 무작정 따라해보기 1 - 리스트 아이템

이전 글에서 리스트 아이템을 Compose로 작성하였다. 이번에는 리스트 아이템이 모여서 하나의 리스트로 표현되는 Compose를 작성해볼 것이다.

Composable 함수 생성

@Composable
fun CoinListScreen(
    navController: NavController,
    viewModel: CoinListViewModel = hiltViewModel()
) {
    val state = viewModel.state.value
}

먼저 리스트 화면에 관한 Compose 함수인 CoinListScreen을 생성하고 매개변수로는 상황에 필요한 것들로 설정한다.

리스트를 감싸는 Compose Layout 생성

@Composable
fun CoinListScreen(
    navController: NavController,
    viewModel: CoinListViewModel = hiltViewModel()
) {
    val state = viewModel.state.value
    Box(modifier = Modifier.fillMaxSize()) {
        
    }

}

리스트를 감싸는 Compose Layout을 생성한다. Compose Layout에는 column, Row, Box가 있다. 이 중에서 Box를 사용하였다. 

Box

여러 Child Compose를 겹쳐서 놓을 수 있는 레이아웃이다. xml에서 FrameLayout과 흡사하다. Box 내부의 Child Compose는 align을 사용하여 자신의 위치를 지정할 수 있다. Box에 들어갈 콘텐츠들은 람다식으로 표현하고 있다.

코드에서는 Box의 사이즈를 Modifier.fillMaxSize()으로 선언하여 화면 전체 사이즈로 설정하였다.

Compose Lists 생성

기존 xml에서 List는 주로 ListView, RecycerView를 사용하였다. Compopse에서는 Column 또는 Row를 사용해서 만들거나, Lazy Composable를 사용해서 만든다.

Column 또는 Row

Column {
    state.coins.forEach { coin ->
        CoinListItem(
            coin = coin,
            onItemClick = {
                navController.navigate(Screen.CoinDetailScreen.route + "/${coin.id}")
            }
        )
    }
}

Modifer.verticalScroll를 사용하여 스크롤이 가능하다. 하지만 아이템의 개수만큼 UI가 미리 만들어져 있기 때문에 size가 큰 List일 경우에는 비효율적이다.

Lazy Composable

LazyColumn(modifier = Modifier.fillMaxSize()) {
    items(state.coins) { coin ->
        CoinListItem(
            coin = coin,
            onItemClick = {
                navController.navigate(Screen.CoinDetailScreen.route + "/${coin.id}")
            }
        )
    }
}

Lazy Compsable에서는 LazyColumn 및 LazyRow가 있다. Lazy Composable은 RecyclerView와 동일한 원칙을 따른다.

• LazyColumn : 세로 스크롤 리스트
• Lazy Row : 가로 스크롤 리스트
• item() : 단일 항목 추가
• items(Int) : 여러 항목을 추가

코드를 보면 LazyColumn을 사용해서 세로 스크롤 리스트를 생성하고 사이즈는 fillMaxSize를 사용해서 화면 전체로 한다. 리스트 안에 items를 사용하여 coins의 List만큼 항목을 생성한다. 1편에서 생성한 리스트 아이템에서 선언한 매개변수 coin과 itemClick이벤트를 설정한다.

그 결과 1편에서 생성한 리스트 아이템이 coins의 List 사이즈만큼 생성이 되며 LazyColumn을 사용해서 세로 스크롤이 가능한 리스트가 완성된다.