[Android][Compose] Compose의 레이아웃

개요

---

 

레이아웃

하나의 컴포저블 요소에 다른 요소들이 들어갈 수 있는 것이고, 그렇게 들어간 요소들은 아무런 규칙없이 들어가는 것이 아니라 레이아웃이라는 규칙을 따라 들어가게 된다.

 

아래의 화면도 아무런 규칙이 없이 배치가 된 것 처럼 보이지만, 레이아웃 규칙에 따라 배치가 된 것이다. ▼

아무렇게나 배치된거 같지만 아니다

 

 

Compose에서 제공하는 레이아웃

Compose의 레이아웃으로는 크게 Column, Row, Box의 3가지가 있다. ▼

출처 - Google Jetpack Compose 기초

 

각각 모두 이름 그대로의 기능을 하기에 알아보기가 쉽다.

셋 다 컴포저블이기에 내부에 컴포저블 요소들을 배치할 수 있다.

그러나 다른 컴포저블들과는 다른 점은 여러 개의 컴포저블들을 배치할 수 있다는 것이다.

또한 이들 모두 컴포저블이기에 서로가 서로에 중첩되어 들어갈 수 있다.

 

이번 포스트에서는 이 3가지 레이아웃에 대해서 간단하게 확인해보는 시간을 가질 것이다.

더 자세하게는 다음에 올릴 예정이다.

 

 

Box

---

기본적인 코드 작성

`Box` 레이아웃은 여러 컴포저블들을 겹쳐서 배치할 수 있는 레이아웃이다.

Flutter에서는 Stack이라는 위젯으로 제공된다.

 

아래와 같은 형태로 작성할 수 있다. ▼

Box {
    Text(text = "Gorani")
    Text(text = "NOGUEN")
    Text(text = "GOOD~")
}

 

정렬

하지만 아래와 같이 코드를 작성하면 요소들이 겹쳐서 나오는 것을 알 수 있다. ▼

Box {
    Text(text = "Gorani")
    Text(text = "NOGUEN")
    Text(text = "GOOD~")
}

 

겹쳤다...

 

`Text`의 `Modifier`에 있는 `.align`을 통해 화면에 어느 부분에 배치를 할 지 결정할 수 있다. ▼

Box {
    Text(modifier = Modifier.align(Alignment.TopStart), text = "Gorani")
    Text(modifier = Modifier.align(Alignment.Center), text = "NOGUEN")
    Text(modifier = Modifier.align(Alignment.BottomEnd), text = "GOOD~")
}

 

주의점

`Box` 레이아웃은 최대한 넓게 공간을 활용하기에 별도로 크기를 지정해주지 않으면 화면 전체를 사용한다.

 

다음에 더 자세히
화면에 고정적으로 배치하는 방식이나, 기본 정렬 설정과 같은 더 자세한 내용은 별도의 포스트에서 다룰 예정이다.

 

 

Column과 Row

---

기본적인 코드 작성

Column과 Row는 행과 열로, 이름 그대로 행과 열을 만들어주는 컴포저블이다.

아래와 같은 형태로 작성할 수 있다. ▼

Column {
    Text("First row")
    Text("Second row")
}

Row {
    Text("First row")
    Text("Second row")
}

 

위의 코드에서는 `Text`를 넣었는데, `Text`말고도 다른 컴포저블을 넣을 수 있다.

 

for 루프로 요소 넣기

Column과 Row는 일반 Kotlin 함수와 같이 동작하기에 그 안에 for 루프를 넣을 수 있다.

아래와 같이 for 루프를 넣어 여러 개의 컴포저블들을 일일히 넣지 않고 간단하게 넣을 수 있다. ▼

@Composable
fun MyApp(
    modifier: Modifier = Modifier,
    names: List<String> = listOf("World", "Compose")
) {
    Column(modifier) {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

 

 

스크롤 가능한 Column과 Row

그렇다면 요소가 너무 많아지면 어떨까?

일반적으로 이런 상황에서 우리는 스크롤이라는 액션을 할 수 있게 해준다.

하지만 아래의 코드는 실행시키면 스크롤되지 않는다. ▼

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

@Composable
fun MyApp(
    modifier: Modifier = Modifier,
    names: List<String> = listOf("World", "Compose")
) {
    Column(modifier) {
        for (i in 0.. 999) {
            Greeting(name = "gorani")
        }
    }
}

전체가 다 보이지 않는다.

 

일반 `Column`, `Row`로는 스크롤이 되지 않는다.

스크롤을 하기 위해서라면 `LazyColumn`, `LazyRow`를 사용해야한다.

다음에 더 자세히
LazyColumn과 LazyRow의 더 자세한 내용은 별도의 포스트에서 다룰 예정이다.

 

간단하게 아래와 같이 작성하면 스크롤이 가능한 Column, Row를 만들 수 있다. ▼

@Composable
fun ScrollColumn() {
    LazyColumn (
        modifier = Modifier.padding(horizontal = 10.dp)
    ) {
        items(count = 200) {
            Greeting(name = "gorani")
        }
    }
}

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

 

주의점

Column과 Row 레이아웃은 공간을 최소한으로 사용한다.

그렇기에 크기가 동일한 요소들을 배치했을 때 정렬이 제대로 적용됐는지 확인하기가 어려울 수도 있다.

좌측 정렬이나 우측 정렬이나 가운데 정렬이나 모두 최소 너비로 적용이 되어있기 때문이다.

 

마치며

---

여기까지 간단하게 Compose에서 제공하는 기본 레이아웃들에 대해서 확인해보았다.

좀 더 자세한 내용을 여기서 모두 다루기에는 그 양이 많아 다음에 더 자세하게 보는 것으로 하고 이번 포스트에서는 대략적인 내용만 다뤘다.

대략적으로 어떤 방식으로 앱을 구성하는지 정도만 알아두고 더 자세한 내용은 다음에 볼 것이다.

모두 화이팅이다!