Compose 기초 1 : Column, Row, Box

1. Compose

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    ...

</androidx.constraintlayout.widget.ConstraintLayout>

기존의 안드로이드에서 UI는 위와 같이 xml을 이용해서 구현할 수 있었습니다.

기본적으로 구현하는 방식은 전체를 Layout으로 감싸고 그 안에 각종 View을 추가하는 방식으로 구현합니다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        StandardStudyTheme {
            // A surface container using the 'background' color from the theme
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background
            ) {
                Greeting("Android")
            }
        }
    }
}

Compose는 ComponentActivity의 onCreate안에서 @Composable로 구현된 함수를 이용하여 뷰를 그려 나갑니다.

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

Composable 함수는 위와 같이 정의가 가능합니다.

Surface(modifier = Modifier.fillMaxSize()) {
    Column(Modifier.padding(16.dp)) {
        Box(
            modifier = Modifier
                .padding(8.dp)
                .fillMaxSize(),
            contentAlignment = Alignment.Center,
        ) {
            Text(text = description, style = TextStyle(Color.Black, 22.sp, FontWeight.Medium))
            Button(
                onClick = { routeAction.gotoBack.invoke() },
                modifier = Modifier
                    .padding(16.dp)
                    .offset(y = 100.dp),
                colors = ButtonDefaults.buttonColors(containerColor = btnColor),
            ) {
                Text(text = "뒤로가기")
            }
        }
    }
}

이 함수에서 사용된 Surface, Column, Box, Text, Button 역시 이미 정의되어있는 Composable 함수입니다.

이런 식으로 Composable 함수 안에 Composable 함수를 넣는 방식으로 계속 안으로 들어가는 구조를 가지게 됩니다.

추천하는 구현 방식은 커스텀뷰 만들어 사용하듯이

특정 영역을 사용성에 맞게 구분하여 Composable 함수로 만들어서 관리하는 것입니다.

 

2. Layout

기본적인 Layout 종류는 Box, Column, Row가 있습니다.

Box는 FrameLayout과 유사한 방식이고 Column, Row는 LinearLayout과 유사한 방식입니다.

2-0 준비

@Composable
fun ColorBox(modifier: Modifier = Modifier, color: Color?= null) {
    Box(
        modifier = modifier
            .size(30.dp)
            .background(color ?: Color(0xFFEF5350))
    )
}

레이아웃 진행하기 전에 눈으로 확인하기 위해 사각형 박스를 준비해줍니다.

Modifer는 각종 속성들을 주기위해 사용하는 값입니다.

size 안에 값을 하나만 쓰면 width, height 크기가 동일하게 만들어지고
다르게 설정하고 싶으면 2개의 값을 넣어주면 됩니다.

색상은 0x 다음에 원하는 색상의 Hex값을 넣어주면 됩니다.

@Composable
fun Container() {
    Surface(
        modifier = Modifier.size(150.dp),
        color = MaterialTheme.colorScheme.background
    ) {
        ColumnContainer()
    }
}

전체 사이즈를 스크린샷 때문에 편의상 150dp로 설정하였습니다.

만약 전체 크기로 하고 싶다고 하면

Modifier.fillMaxSize()
Modifier.fillMaxWidth()
Modifier.fillMaxHeight()

위의 3개 중 상황에 맞게 사용하시면 됩니다.

2 -1 Column

@Composable
fun ColumnContainer() {
    Column(Modifier.fillMaxSize()) {
        ColorBox()
        ColorBox(color = Color(0xFF5C6BC0))
        ColorBox(color = Color(0xFF26A69A))
    }
}

간단하게 ColorBox를 3개를 넣었습니다.

보시다시피 LinearLayout의 vertical과 유사하게 사용이 가능합니다.

@Composable
fun ColumnContainer() {
    Column {
        ColorBox()
        ColorBox(modifier = Modifier.weight(1f), color = Color(0xFF5C6BC0))
        ColorBox(color = Color(0xFF26A69A))
    }
}

LinearLayout에서 사용하던 weight 또한 똑같이 있습니다.

Arrangement

@Composable
fun ColumnContainer() {
    Column(
        verticalArrangement = Arrangement.Bottom,
    ) {
        ColorBox()
        ColorBox(color = Color(0xFF5C6BC0))
        ColorBox(color = Color(0xFF26A69A))
    }
}

Arrangement는 배치를 결정하는 요소로 Top, Center, Bottom, SpaceEvenly, SpaceBetween, SpaceAround, spaceBy가 있습니다.

Top, Center, Bottom은 위, 중간, 아래쪽으로 설정합니다.

* 임의로 여백을 회색으로 표기하였습니다.

SpaceBy는 원하는 dp만큼 요소들의 간격을 떨어트립니다.

SpaceBetween은 요소들 간의 간격을 동일하게 설정합니다.

* 임의로 여백을 회색으로 표기하였습니다.

SpaceEvenly는 SpaseBetween과 달리 최상단, 최하단의 여백을 추가하고 간격을 동일하게 설정합니다.

SpaceAround는 최상단, 최하단의 여백을 요소들의 여백의 절반만큼만 차지합니다.

Column의 경우 Vertical로 UI를 만들어 나가므로 verticalArrangement를 사용하고 

Row의 경우 HorizontalArrangement를 이용합니다.

Alignment

@Composable
fun ColumnContainer() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        ColorBox()
        ColorBox(color = Color(0xFF5C6BC0))
        ColorBox(color = Color(0xFF26A69A))
    }
}

Aligment는 정렬을 어떻게 할지를 결정하게 됩니다.

Arrangement와 반대로 Column은 horiznotalAligment를, Row는 verticalAligment를 사용합니다.

 

2-2 Row

@Composable
fun RowContainer() {
    Row(
        verticalAlignment = Alignment.Top,
        horizontalArrangement = Arrangement.Start,
    ) {
        ColorBox()
        ColorBox(color = Color(0xFF5C6BC0))
        ColorBox(color = Color(0xFF26A69A))
    }
}

Column과 방식은 동일하며 명칭만 조금 다른 거라서 이미지만 첨부하겠습니다.

* 회색 영역은 역시 편의상 넣은것입니다.

2-3 Box

@Composable
fun BoxContainer() {
    Box() {
        ColorBox(modifier = Modifier.size(70.dp), color = Color(0xFF26A69A))
        ColorBox(modifier = Modifier.size(50.dp), color = Color(0xFF5C6BC0))
        ColorBox()
    }
}

Box는 FrameLayout처럼 코드가 아래 있을수록 위로 쌓이는 형식입니다.

ColorBox를 만들 때 함수에서 Modifer를 받도록 설정하였기 때문에 Modifer.size()를 넣어주면 크기를 조정할 수 있습니다.

Box의 경우 Arrangement는 없고 Alignment만 있습니다.

 

Modifer를 활용해서 사용하는 방법도 있습니다. (Box, Column, Row 다 가능)

Box(
    contentAlignment = Alignment.CenterStart,
) {
    ColorBox(modifier = Modifier.size(70.dp), color = Color(0xFF26A69A))
    ColorBox(modifier = Modifier.size(50.dp).align(Alignment.Center), color = Color(0xFF5C6BC0))
    ColorBox()
}