[Android-Compose] 안드로이드 컴포즈 3편 - Row,Column

• # Row

• # Column

• # Row, Column 주요 속성

• # Arrangement의 정의와 사용법

• ## Arrangement 정렬 위치

• 1. Center : 요소들이 가운데로 정렬이 된다.

• 2. Start : 요소들이 왼쪽 정렬이 된다.

• 3. End : 요소들이 오른쪽 정렬이 된다.

• 4. SpaceAround : 요소들 사이사이에 빈 공간을 남겨둔다.

• 5. SpaceBetween : 요소들 사이에 공간을 밀어 넣는다.

• 6. SpaceEvenly : 요소들 사이에 공간 모두 동일하게 간격을 준다.

• # Alignment의 정의와 사용법

• # Alignment 정렬 위치

• 1. Center(Vertically/Horizontally) : 요소가 가운데로 정렬이 된다. 

• 2. Top : 요소가 위로 정렬이 된다. 

• 3. Bottom : 요소가 아래로 정렬이 된다. 

이번 Compose 시리즈 3편의 공부할 내용은 정말 중요한 Row, Column을 알아보겠다.

# Row

- 컴포즈에서 각 아이템 요소들을 가로로 나열하고 싶을 때 사용하는 함수이다.

Row는 기존 XML에서 LinearLayout의 orientation을 horizontal로 한다는 거와 같은 의미이다.

즉 Row = LinearLayout orientation = "horizontal"이다.

 

@Composable
fun TestRow() {
    // Row로 가로 배치
    Row(
        modifier = Modifier.fillMaxSize()
    ) {
        BoxAndText(Color.Red)
        BoxAndText(Color.Blue)
        BoxAndText(Color.Green)
    }

}

// 각 아이템을 만드는 Composable 함수
@Composable
fun BoxAndText(
    color: Color
){
    Box(modifier = Modifier
        .size(100.dp)
        .background(color),
        contentAlignment = Alignment.Center
    ){
        Text(
            text = "테스트",
            textAlign = TextAlign.Center
        )
    }
}

위에 이미지의 전체 적인 코드이다 TestRow() 함수를 보면 Row를 사용해서 요소들을 가로로 나타낸 것을 볼 수 있다.

# Column

- 컴포즈에서 각 아이템 요소들을 세로로 나열하고 싶을 때 사용하는 함수이다.

Row는 기존 XML에서 LinearLayout의 orientation을 vertical로 한다는 거와 같은 의미이다.

즉 Row = LinearLayout orientation = "vertical"이다.

@Composable
fun TestColumn() {
    // Column으로 세로 배치
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        BoxAndText(Color.Red)
        BoxAndText(Color.Blue)
        BoxAndText(Color.Green)
    }

}

// 각 아이템을 만드는 Composable 함수
@Composable
fun BoxAndText(
    color: Color
){
    Box(modifier = Modifier
        .size(100.dp)
        .background(color),
        contentAlignment = Alignment.Center
    ){
        Text(
            text = "테스트",
            textAlign = TextAlign.Center
        )
    }
}

TestColumn() 함수를 보면 Row를 사용해서 요소들을 세로로 나타낸 것을 볼 수 있다.

# Row, Column 주요 속성

Arrangement, Alignment가 있다 이 속성들은 컨테이너 성격을 가진 컴포저블 요소들을 정렬할 때 사용되는 속성이다.

# Arrangement의 정의와 사용법

- 해당 컨테이너에 들어있는 요소들을 어떤 방법으로 간격을 정렬할지 정하는 함수이다.

- Row는 가로로 나열하는 함수이므로 Arrangement는 horizontalArrangement를 사용할 수 있다.

- Column은 세로로 나열하는 함수이므로 Arrangement는 verticalArrangement를 사용 할 수 있다.

@Composable
fun TestRow() {
    Row(
        modifier = Modifier.fillMaxSize(),
        // horizontalArrangement = Arrangement.Center로 가운데 정렬
        horizontalArrangement = Arrangement.Center
    ) {
        BoxAndText(Color.Red)
        BoxAndText(Color.Blue)
        BoxAndText(Color.Green)
    }

}

사용법은 위에 코드와 같이 Row나 Column안에 (horizontal/vertical) Arrangement  = Arrangement. 정렬하고 싶은 위치를 적어 주면 된다.

## Arrangement 정렬 위치

1. Center : 요소들이 가운데로 정렬이 된다.

2. Start : 요소들이 왼쪽 정렬이 된다.

3. End : 요소들이 오른쪽 정렬이 된다.

4. SpaceAround : 요소들 사이사이에 빈 공간을 남겨둔다.

5. SpaceBetween : 요소들 사이에 공간을 밀어 넣는다.

6. SpaceEvenly : 요소들 사이에 공간 모두 동일하게 간격을 준다.

# Alignment의 정의와 사용법

- 해당 컨테이너에 들어있는 요소의 위치를 어떠한 위치에 둘 것인지를 설정한다.

- xml에서의 gravity와 동일하다고 생각하면 된다.

- Row는 가로로 나열하는 함수이므로 Alignment는 verticalAlignment를 사용할 수 있다.

- Column은 세로로 나열하는 함수이므로 Arrangement는 horizontalAlignment를 사용할 수 있다.

 

사용법은 Row나 Column안에 (horizontal/vertical) Alignment= Alignment. 정렬하고 싶은 위치를 적어 주면 된다.

# Alignment 정렬 위치

1. Center(Vertically/Horizontally) : 요소가 가운데로 정렬이 된다. 

2. Top : 요소가 위로 정렬이 된다. 

3. Bottom : 요소가 아래로 정렬이 된다. 

이외 6가지가 더 있는데 그것은 직접 해보면서 습득하는 것을 추천한다.

 

이런 식으로 Row/Column에서의 Arrangement, Alignment을 잘 사용하면 원하는 레이아웃을 만들 수 있다.

 

마지막은 안드로이드 공식 사이트에서 퍼온 이해하기 도움이되는 짤을 가져와봤다.

 

 

참조
https://taehyungk.github.io/posts/android-compose-row-column/
https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement