[Compose] 컴포즈 공부하기2 - Surface, Box 어떤 차이가 있을까?

Surface

- Material Design 스타일이다. (elevation, shape, color..)

- light/dark 테마에 따라 적용 가능

- XML의 MaterialCardView와 유사

Box

- 단순히 container로써 역할

- 정렬, 간격 등을 적용하기 유용

 

예시를 통해 비교해 보자!

 

1. 동일하게 만들기

    Column {
        Surface(
            modifier = Modifier.padding(5.dp),
            color = Color.Green
        ) {
            Text(
                text = "Hello $name!",
                modifier = Modifier.padding(8.dp)
            )
        }

        Box(
            modifier = Modifier.padding(5.dp).background(Color.Green)
        ) {
            Text(
                text = "Hello Android!",
                modifier = Modifier.padding(8.dp)
            )
        }
    }

동일하게 만들어보면 코드가 이렇다.

color와 background를 쓰는 것 외에는 차이가 없다.

 

2. Surface의 elevation, shape, border 

Column {
    Surface(
        modifier = Modifier.padding(5.dp),
        color = Color.Green,
        elevation = 5.dp,
        shape = CircleShape,
        border = BorderStroke(width = 1.dp, color = Color.Black)
    ) {
        Text(
            text = "Hello $name!",
            modifier = Modifier.padding(8.dp)
        )
    }

    Box(
        modifier = Modifier.padding(5.dp).background(Color.Green),
    ) {
        Text(
            text = "Hello Android!",
            modifier = Modifier.padding(8.dp)
        )
    }
}

Suface에서 쓰는 elevation, shape, border 다 Box에서는 사용할 수가 없다.

Box는 단순히 layout의 container 역할을 하기 떄문이다.

 

2. Box의 사용(정렬 등) 

Box(
            modifier = Modifier
            .padding(5.dp)
        ) {
            Icon(imageVector = Icons.Filled.Add, contentDescription = "add",
                    modifier = Modifier.align(Alignment.CenterStart))
            Text(text = "Hello Android!",
                modifier = Modifier.align(Alignment.BottomEnd).padding(60.dp,0.dp,0.dp,0.dp))

        }

Icon에는 CenterStart, Text에는 BottonEnd를 주었다.

위와 같이 잘 동작하는 것을 볼 수 있다.

 

+ 참고

동작하는 것을 보기 위해 padding을 주었으나 사실 좋은 코드는 아니다.

Row를 사용하면 더 간단히 사용할 수 있는데,

이렇게 에러가 난다.

BottomEnd가 아닌 CenterVertically 등 Alignment.Verticals의 값을 사용하면 오류가 나지 않는데, Alignment는 부모 layout의 방향과 반대의 것으로 사용해야한다.

이 부분은 차후 또 올리겠다!

 

 

Box(
    modifier = Modifier
        .padding(5.dp)
) {
    Box(modifier = Modifier.background(Color.Yellow).size(20.dp).align(Alignment.TopEnd))
    Text(text = "Hello Android!")
}

 

Box안에 Box를 또 사용할 수가 있고 Box 안에 여러가지 뷰를 사용하여 

다양하게 나타낼 수 있다.

 

 

 

 

 

[참고]

https://velog.io/@victorywoo/Compose-Surface-vs-Box

[Compose] Surface vs Box

https://codingwithrashid.com/difference-between-surface-and-box-in-android-jetpack-compose/

Difference Between Surface and Box in Android Jetpack Compose - Coding with Rashid