[Compose] Box, 리스트, LazyColumn

[Box]

Compose 기초를 공부하면서 전 게시물에서는 Row와 Column에 대해서 다뤄보았다.

 

이번 글에서는 layout에서 FrameLayout을 대신하는 Box와, 리스트, 리사이클러뷰를 대체할 수 있는 LazyColumn에 대해 공부해보자!

setContent {
    //안에있는 자식들이 겹쳐서 정렬 FrameLayout 과 비슷함
    Box(
    ){
        Text("Hello") //겹쳤기 떄문에 하나로 보임
        Text("123455~~~~")
    }
}

Box태그를 만들고, 그 안에 Text를 위와 같이 설정했을 때는 글자가 겹쳐보이는 현상이 발생한다.

전 글에서는 Row나, Column태그를 사용하여 글자간의 정렬을 다르게 해주어서 이 문제를 해결하였다.

 

이번에는 Box안에 또 다른 Box태그를 만들어 아예 다른 방향에 있게 설정해보자.

setContent {
            //안에있는 자식들이 겹쳐서 정렬 FrameLayout 과 비슷함
            Box(
                modifier = Modifier
                    .background(color = Color.Green)
                    .fillMaxWidth()
                    .height(200.dp),//가로
                //세로
//                    .fillMaxSize(), //가로 세로 전체
                contentAlignment = Alignment.TopEnd, //자식들이 상단 우측으로 정렬됨
            /*
            밑 글자만 오른쪽 아래로 옮기고 싶다라고 한다면
            둘 다 옮겨지게됨.
             */
            ){
                Text("Hello") //겹쳤기 떄문에 하나로 보임
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(16.dp),
                    contentAlignment = Alignment.BottomEnd,
                ){
                    Text("123455~~~~")
                }
            }

위의 전체 코드를 뜯어보면서 Box가 어떠한 역할을 하는지 알아보자.

 

Box( ) 괄호 안에 있는 것은 전 글에서도 정리했듯이 modifier을 통해 Box만의 특징을 부여할 수 있다.

첫 번째 Box에서는 배경색을 초록으로, width를 max로 높이를 200dp로 설정하였다.

 

또한 contentAlignmnet로 첫 번째 Box 자식들이 상단 오른쪽에 가있도록 설정하였다.

이 때 Hello와 나머지 텍스트들을 분리하여 옮기고 싶다고 한다고 한다면 위의 코드처럼 Box태그를 하나 더 적어줄 수 있다.

 

안에 있는 Box태그에는 우측 하단으로 설정하고 padding을 설정해보겠다.

결과 화면

위와 같이 Box태그 안에 Box태그를 설정하여 각각의 위치를 다르게 성격도 다르게 설정할 수 있다.

 

[LazyColumn]

먼저 전체 코드를 살펴보자.

setContent {
            //컴포즈가 시작되는 부분은 setContent 부터 시작됨.
//            val scrollState = rememberScrollState()
            //스크롤 정보를 기억해주는 state
            LazyColumn(
                modifier = Modifier
                    .background(color = Color.Green)
                    .fillMaxWidth(),
                contentPadding = PaddingValues(16.dp),//사방에 padding
                verticalArrangement = Arrangement.spacedBy(8.dp) //아이템간의 공간
                   // .verticalScroll(scrollState) //기존 안드로이드 스크롤 뷰
            //리니어레이아웃으로 아이템들을 정의 해놓은 것과 같음, 데이터가 많으면 문제가 생길 수 있음
            //따라서 Lazy컬럼이 있음
            ){
                //빠르게 텍스트를 여러 개 만들 수 있음
                //스크롤이 안됨

                //레이지 컬럼은 for문으로 작성되게 안되어있음
//                for(i in 1..50){
//                    Text("글씨 $i")
//                }
                item{
                    Text("Header")
                }
                items(50){ index ->
                    Text("글씨 $index")
                }
                item{
                    Text("Footer")
                }
                //LazyColumn 을 사용하면 만들기 쉬워짐
                //리사이클러뷰를 사용하면 만들기 까다로웠던 것이 쉬워짐
            }
        }

먼저 LazyColumn을 사용하기 전에 Column을 사용하면서 리스트뷰와 비슷하게 만들어 본다면

for문을 통해 Text를 여러 번 출력하고, verticalScroll을 통해 스크롤뷰처럼 스크롤이 되게끔 만들어 볼 수 있다.

 

하지만 이렇게 설정하면, 리니어레이아웃으로 TextView를 50개 설정해놓은 것과 같으며 당연히 데이터가 많으면 문제가 생길 수 있다.

 

따라서 우린 LazyColumn을 이용해서 설정해보자.

리사이클러뷰에 있는 아이템간의 공간을 verticalArrangement로 설정하였고,

안에 있는 아이템들은 items태그로 위와 같이 설정할 수 있다.

 

또한, 여러 번 반복되는 items가 아닌, item으로도 설정할 수 있다.

스크롤까지 잘 되는 것을 확인할 수 있다.

기존에 있던 리사이클러뷰나 리스트뷰를 사용하면 만들기 까다로웠던 것들이 LazyColumn을 사용하여 간단히 구현할 수 있다.

 

 

Box ->

GitHub - SsongSik/Jetpack_Compose: Creating apps using Jetpack Compose

LazyColumn ->

GitHub - SsongSik/Jetpack_Compose: Creating apps using Jetpack Compose