[Compose] Surface, Modifier, Row, Column, 버튼 생성

Surface

Surface는 요소를 감싸는 컨테이너의 역할을 한다.

사용법은 다음과 같다.

@Composable
fun Greeting(name: String) {
    Surface(color = MaterialTheme.colorScheme.primary) {
        Text(text = "Hello $name!")
    }
}

위에서도 말했듯이 요소를 감싸는 컨테이너의 역할을 하므로 색상을 지정할 수 있다.

색상을 지정하지 않으면 기본 흰 화면으로 보이게 된다.

Modifier

Surface가 요소를 감싸는 컨테이너라면, Modifer는 레이아웃, 색상 등 스타일을 수정할 수 있도록 해준다.

modifer는 Surface와 Text 등 대부분의 Compose UI 요소에서 선택적으로 매개변수로서 허용된다.

사용법을 예로 보자.

@Composable
fun Greeting(name: String) {
    Surface(color = MaterialTheme.colorScheme.primary) {
        Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))
    }
}

---

@Composable
fun Greeting(name: String) {
    Surface(color=MaterialTheme.colorScheme.primary) {
        Text("$name 1")
        Text("$name 2")
    }
}

이런 식으로 작성했을 때 ui는 다음과 같이 만들어진다.

앞의 name은 똑같아 티가 안나지만 1과 2가 겹쳐있는 것을 확인할 수 있다.

즉, 오른쪽 혹은 아래에 이어서 작성되는 것이 아닌 겹쳐서 작성되게 되는 것을 알 수 있다.

이를 해결하기 위한 방법으로 Column과 Row가 있다. 우선 Column을 알아보자.

Column

Column을 사용하게 되면 위와 같이 겹치는 것이 아닌 Column 1아래에 Column 2가 작성되게 된다.

@Composable
fun Greeting(name: String) {
    Surface(color=MaterialTheme.colorScheme.primary) {
        Column(modifier = Modifier.padding(24.dp)) {
            repeat(3) {
                Text("$name ${it + 1}")
            }
        }
    }
}

위의 사진에서 알 수 있듯이, 각 열이 생기며 한 칸씩 Text가 작성되는 것을 확인할 수 있다.

또한 코드를 보면 repeat을 사용한 것을 볼 수 있다.

이처럼 반복문을 사용하여 Column에 요소를 추가할 수 있다.

Row

Row 또한 Column과 같다.

단지 Column이 아닌 Row를 사용한 것이다.

@Composable
fun Greeting(name: String) {
    Surface(color=MaterialTheme.colorScheme.primary) {
        Row(modifier = Modifier.padding(24.dp)) {
            repeat(2) {
                Text("$name ${it + 1} ")
            }
        }
    }
}

Button 생성하기

여태까지 Text 생성만을 봐왔으므로 Button 생성하는 방법을 알아보자.

Button은 Material3 패키지에서 제공하는 Composable이며 마지막 인수로 사용된다.

형태는 다음과 같다.

@Composable
fun Greeting() {
    Button(onClick = {}, modifier = Modifier.wrapContentSize()) {
        Text("Button")
    }
}

Button은 Surface 내부에 Row 블록을 가지며, row에 배치되는 composable인 content를 갖고 있어 내부에 composable을 배치할 수 있게 해준다.

 

Surface 영역에는 버튼의 배경색, 스타일, 유저와의 상호작용을 담당하고, Row 영역의 경우 Button 내부에 보여줄 composable 등의 설정을 담당한다.