[Kotlin / Compose] Surface / Row / Column

Compose의 Surface는 머티리얼 디자인의 기본적인 패턴으로 UI를 구성하는 데 도움을 주는 요소이다.
✨ 주요 특징
Clipping : UI 요소들을 원하는 모양으로 잘라내거나 불필요한 부분을 가리는 데 사용될 수 있다.
Elevation : 높이가 있어서 그림자를 만들 수 있다.
Borders : 테두리를 가질 수 있어 UI 요소의 경계를 강조하거나 시각적 구분을 위해 사용될 수 있다.
Background : Color 설정을 Surface로 하면 Content Color가 자동으로 세팅 된다.
영역 외부로 터치 이벤트가 전달 되지 않는다는 특징이 있는데 Surface 아래에 그림이 있다고 한다면 거기까지는 터치가 전달 되지 않는다.
다시 말해 Surface는 가장 기본적으로 UI를 구축하는 기반이 된다.

Surface에 elevation 설정

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface (
        modifier = Modifier.padding(5.dp),
        shadowElevation = 10.dp
    ) {
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
    }
}

elevation을 설정하여 높이를 설정할 수 있는데, 높이를 설정하면 그림자가 생긴다.
shadowElevation : UI 요소의 그림자 효과를 설정하는 데 사용된다.
tonalElevation : UI 요소의 톤을 조정하는 데 사용되며 색조와 명암을 조정하여 시각적으로 부각시킨다.

Surface에 border의 값을 설정

    Surface (
        border = BorderStroke(
            width = 2.dp,
            color = Color.Magenta
        ),
        modifier = Modifier.padding(5.dp),
        shadowElevation = 10.dp
    ) {
        Text(
            text = "Hello $name!",
            modifier = Modifier.padding(8.dp)
        )
    }

Surface에 Shape을 설정

    Surface (
        border = BorderStroke(
            width = 2.dp,
            color = Color.Magenta
        ),
        modifier = Modifier.padding(5.dp),
        shadowElevation = 10.dp,
        shape = CircleShape
    ) {
        Text(
            text = "Hello $name!",
            modifier = Modifier.padding(8.dp)
        )
    }

Surface에 Color를 지정

    Surface (
        border = BorderStroke(
            width = 2.dp,
            color = Color.Magenta
        ),
        modifier = Modifier.padding(5.dp),
        shadowElevation = 10.dp,
        shape = CircleShape,
        color = MaterialTheme.colorScheme.error
    ) {
        Text(
            text = "Hello $name!",
            modifier = Modifier.padding(8.dp)
        )
    }

Color만 설정하고 Content Color를 설정하지 않으면 Color에 맞춰서 적당한 Content Color가 세팅된다.
color = MaterialTheme.colorScheme.surface : surface에 맞는 Content Color가 설정 된다.
color = MaterialTheme.colorScheme.error : 기본적으로 onError 색상이 사용된다.
color = MaterialTheme.colorScheme.primary : primary 색상을 기반으로 한 onPrimary 색상이 자동으로 설정된다.

Compose의 Row는 가로로 정렬된 요소의 그룹으로 가로로 여러 개의 요소를 나란히 배치할 수 있다.
Row는 주로 Column과 함께 사용되어 화면을 가로와 세로로 나누어 배치할 때 화면의 구조를 만드는 데 사용된다.

Text의 modifier에 align 설정하기

@Composable
fun RowEx() {
    Row(
        modifier = Modifier.height(40.dp)
    ) {
        Text(text = "첫 번째", modifier = Modifier.align(Alignment.Top))
        Text(text = "두 번째", modifier = Modifier.align(Alignment.CenterVertically))
        Text(text = "세 번째", modifier = Modifier.align(Alignment.Bottom))
    }
}

Alignment.Top : 화면의 상단에 배치된다.
Alignment.CenterVertically : 화면의 세로 중앙에 배치된다.
Alignment.Bottom : 화면의 하단에 배치된다.
✨ Row는 자식 요소들을 수평으로 배치하기 때문에 Modifier.align에서 사용되는 Alignment는 수직 방향으로 동작한다.

모든 항목이 같은 방향으로 배치하고 있을 경우도 각 텍스트에 modifier로 세팅해야 할까?
➡️ 개별 텍스트에 modifier로 세팅할 필요가 없다 ! verticalAlignment를 Row에 세팅해주면 된다.

    Row(
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier.height(40.dp)
    ) {
        Text(text = "첫 번째")
        Text(text = "두 번째")
        Text(text = "세 번째")
    }
        

Modifier.Weigh를 사용하여 가중치 지정하기

    Row(
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier
            .height(40.dp)
            .width(200.dp)
    ) {
        Text(
            text = "첫 번째", modifier = Modifier
                .align(Alignment.Top)
                .weight(3f)
        )
        Text(
            text = "두 번째",
            modifier = Modifier.weight(2f)
        )
        Text(
            text = "세 번째",
            modifier = Modifier.weight(3f)
        )
    }

3 : 2 : 3으로 가중치가 부여된다.

Compose의 Column은 세로 방향으로 자식 요소들을 배치하는 컴포저블이다. 세로로 스크롤되는 컨텐츠를 만들 때 유용하게 사용될 수 있다.

Alignment는 레이아웃의 방향과 반대로 이루어진다. Column은 세로로 배치되고 있기에 Alignment는 가로로 배치가 이루어진다.

@Composable
fun ColumnEx() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.size(100.dp)
    ) {
        Text(text = "첫 번째")
        Text(text = "두 번째")
        Text(text = "세 번째")
    }
}

Arrangement는 진행 방향으로 이루어져서 Column의 Alignment는 수직 방향으로 배치가 이루어진다.

    Column(
        horizontalAlignment = Alignment.End,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.size(100.dp)
    ) {
        Text(text = "첫 번째")
        Text(text = "두 번째")
        Text(text = "세 번째")
    }

개별 Text에 Modifier.align 사용하기

    Column(
        horizontalAlignment = Alignment.End,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.size(100.dp)
    ) {
        Text(
            text = "첫 번째",
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        Text(text = "두 번째")
        Text(
            text = "세 번째",
            modifier = Modifier.align(Alignment.Start)
        )
    }

Row와 Column
✨ Column은 Horizontally하게만 Alignment를 할 수 있고 Row는 Vertically하게만 Alignment를 할 수 있다.