Jetpack Compose (Row & Column)

Row

Row는 각 요소들을 가로로 배치하고싶을 때 사용하는 Composable이다.

높이가 40dp이며 text가 3개인 row

Row(modifier=Modifier.height(40.dp)) {
        //가로로 배치
        Text(text = "첫 번째!")
        Text(text = "두 번째!")
        Text(text = "세 번째!")
    }

preview를 보면 자동적으로 텍스트가 가로로 배치되는 것을 볼 수 있다.

Row를 어떻게 사용할 수 있는지 몇가지 예시로 알아보자!

1.각 text의 modifier에 align을 설정해보자

Row(modifier=Modifier.height(40.dp)) {
        //기본적으로는 align은 vertical
        Text(text = "첫 번째!",modifier=Modifier.align(Alignment.Top))
        Text(text = "두 번째!", modifier = Modifier.align(Alignment.CenterVertically))
        Text(text = "세 번째!",modifier=Modifier.align(Alignment.Bottom))
    }

기본적으로 text의 modifier align은 vertical이다.
첫번째 text는 Top, 두번째 text는 CenterVertically, 세번째 text는 Bottom으로 설정했다.
Row이기 때문에 각각의 text는 가로로배치되면서 수직으로 top, center, bottom으로 위치가 놓여있는 것을 볼 수 있다.

2. Row에 verticalAlignment를 설정해보자

Row(
        verticalAlignment = Alignment.Bottom
        ,modifier=Modifier.height(40.dp)
    ) {
        //기본적으로는 align은 vertical
        Text(text = "첫 번째!",modifier= Modifier.align(Alignment.Top)) //그중 따로 설정 가능
        Text(text = "두 번째!")
        Text(text = "세 번째!")
    }

1번과 같이 각각의 text에 다 적어야 할까? 아니다
Row에 직접 verticalAlignment를 설정해주면 text에 다 적용이 된다.
위 코드에서는 첫번째 text만 align을 top으로 지정해줬기에 첫번째 글자만 top에 위치하고 나머지 글자들은 bottom에 위치해있는 것을 볼 수 있다.

3. Row에 horizontalArrangement를 설정해보자

Row(
        horizontalArrangement= Arrangement.End
        ,verticalAlignment = Alignment.Bottom
        ,modifier=Modifier.height(40.dp).width(200.dp)
    ) {
        //기본적으로는 align은 vertical
        Text(text = "첫 번째!",modifier= Modifier.align(Alignment.Top)) //그중 따로 설정 가능
        Text(text = "두 번째!")
        Text(text = "세 번째!")
    }

horizontalArrangement를 통해서 Row안에 있는 요소들이 수평으로 어떻게 정렬 될지 정할 수 있다. Arrangement를 활용해 Start, End, SpaceAround, SpaceBetween, SpaceEvnely 를 사용할 수 있다.
그림에서는 Arrangement.End를 사용했기에 text들이 왼쪽으로 붙어있는 것을 볼 수 있다.

4. Row에 text 대신에 Icon을 넣어보자

Row(
        verticalAlignment = Alignment.Bottom, modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        //기본적으로는 align은 vertical
        Text(
            textAlign = TextAlign.Center,
            text = "첫 번째!",
            modifier = Modifier
                .align(Alignment.Top)
                .weight(3f)
                .background(Color.Magenta)
        ) //그중 따로 설정 가능
        Icon(
            imageVector = Icons.Filled.Add,
            contentDescription = "추가",
            modifier = Modifier
                .weight(1f)
                .background(Color.Cyan)
        )
        Text(
            text = "세 번째!",
            modifier = Modifier
                .weight(3f)
                .background(Color.Blue)
        )
    }

text 뿐만 아니라 icon도 넣을 수 있으며, 각각의 요소들의 modifier를 활용하여 align, weight, background 등을 추가할 수 있다.

Column

Column은 각 요소들을 세로로 배치하고싶을 때 사용하는 Composable이다.

가로세로가 100dp 이며 text가 3개인 Column

Column(//세로로 배치시키는 레이아웃
        modifier = Modifier.size(100.dp)
    ) {
        Text(text = "첫 번째")
        Text(text = "두 번째")
        Text(text = "세 번째")
    }

preview를 보면 자동적으로 텍스트가 세로로 배치되는 것을 볼 수 있다.

Row와 비슷하니 금방 이해할 수 있을 것이다!

Column을 어떻게 사용할 수 있는지 몇가지 예시로 알아보자!

1. horizontalAlignment를 Column에 적용해보자

Column(//세로로 배치시키는 레이아웃
        horizontalAlignment = Alignment.End,
        modifier = Modifier.size(100.dp)
    ) {
        Text(text = "첫 번째")
        Text(text = "두 번째")
        Text(text = "세 번째")
    }

Row에서는 verticalAlignment를 사용했지만 Column에서는 반대로 horizontalAlignment를 사용했다.
Row에서 사용한 것과 비슷하게 horizontalAlignment를 통해서 세로로 어떻게 정렬 시킬것인지 설정할 수 있다.
위 코드에서는 Alignment.End를 적용해줬기에 text들이 오른쪽 끝에붙어있는것을 볼 수 있다.

2. verticalArrangement를 Column에 적용해보자

Column(//세로로 배치시키는 레이아웃
        verticalArrangement= Arrangement.Center,
        horizontalAlignment = Alignment.End,
        modifier = Modifier.size(100.dp)
    ) {
        Text(text = "첫 번째")
        Text(text = "두 번째")
        Text(text = "세 번째")
    }

verticalArrangement를 사용하면 각 요소들이 수평적으로 어떻게 정렬할지 정할 수 있다.
위 코드에서는 Center로 지정했기에 가운데에 있는것을 볼 수 있다.

3. text에 Modifier.align을 적용해보자

Column(//세로로 배치시키는 레이아웃
        verticalArrangement= Arrangement.Center,
        horizontalAlignment = Alignment.End,
        modifier = Modifier.size(100.dp)
    ) {
        Text(
            text = "첫 번째",
            modifier = Modifier.align(Alignment.Start)
        )
        Text(
            text = "두 번째",
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        Text(
            text = "세 번째"
        )
    }

Column에서도 마찬가지로 각각의 text에 여러가지 modifier를 설정 할 수 있다.

여기서 Row와 Column의 약간의 차이점이 있다!!

바로 2번째 text를 보면 Alignment.CenterHorizontally이고 Row의 1번째 예시를 보면 Alignment.CenterVertically이다.

그 이유는 Column에서는 ColumnScope이고 Row에서는 RowScope이기에 차이가 있는 것이다.

		// 1D Alignment.Verticals.
        @Stable
        val Top: Vertical = BiasAlignment.Vertical(-1f)
        @Stable
        val CenterVertically: Vertical = BiasAlignment.Vertical(0f)
        @Stable
        val Bottom: Vertical = BiasAlignment.Vertical(1f)

        // 1D Alignment.Horizontals.
        @Stable
        val Start: Horizontal = BiasAlignment.Horizontal(-1f)
        @Stable
        val CenterHorizontally: Horizontal = BiasAlignment.Horizontal(0f)
        @Stable
        val End: Horizontal = BiasAlignment.Horizontal(1f)

위 코드는 Alignment에 들어있는 상수들이다.

각 Scope에 따라 사용하는 상수들이 다른데 비슷한거 같으면서도 당연한거 같으면서도 헷갈린다.

Row는 요소들을 가로로 배치하는 것이고 Column은 세로로 배치하는 차이를 잘 생각해보면 쉽게 이해할 수 있을 것이다!

jetpack compose 연습 깃헙 링크
https://github.com/unso99/jetpack_compose_practice