[Android Compose Modifier] 3. Modifier.background로 배경색 설정하고 라운딩 처리하기

Modifier.background 내부 살펴보기

Modifier.background에서는 두가지 방법으로 background를 설정하는 방법을 지원한다.

 

• color과 shape을 이용해 배경색과 모양 만들기
• brush와 shape, alpha를 이용해 그라데이션 처리하기

 

이번 글에서는 color와 shape을 이용해 배경색과 모양을 만드는 방법을 살펴보고, 다음글에서 brush와 shape, alpha를 이용해 그라데이션 처리를 해볼 것이다.

 

Color와 Shape을 이용해 배경색과 모양 만들기

Color와 Shape을 이용해 배경색과 모양을 만들기 위해서는 background(color: Color, shape: Shape)을 사용하면 된다.

fun Modifier.background(
    color: Color,
    shape: Shape = RectangleShape
)

 

여기서 우리는 두가지 파라미터를 받는다.

• Color: 배경색을 설정하기 위한 파라미터
• Shape: 모양을 설정하기 위한 파라미터

 

Color 알아보기

Color는 내부에 16진수로 표현된 ulong(양수 long) 값을 가지고 있는 래퍼 클래스이다. 기존 안드로이드의 xml에서 표현했던 색상표와 같다.

fun Color(color: Long): Color {
    return Color(value = (color.toULong() and 0xffffffffUL) shl 32)
}

안드로이드 내부에서는 여러 기본 컬러를 동반객체(companion object)로 제공하고 있다. 이 글에서는 이 중 Blue와 Red를 이용해 실습한다.

    companion object {
        @Stable
        val Red = Color(0xFFFF0000)
        @Stable
        val Blue = Color(0xFF0000FF)
        ..
    }

Color를 주는 것은 간단하다

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldModifier() {
    Column(Modifier.background(Color.Blue)){}
}

단순히 다음과 같이 Color.Blue를 background의 파라미터로 넘기면 다음 그림1과 같이 파란색으로 채워진 네모(기본값)가 배경색이 된다.

그림1. Color.Blue가 설정된 background

 

Shape 다루기

shape는 Composable의 모양을 결정하는 값이다. shape의 파라미터로는 Shape인터페이스를 상속받는 클래스들이 넣어질 수 있는데 우리는 이 중 주요한 4가지 Shape을 다룬다.

• RectangleShape
• RoundedCornerShape
• CircleShape
•  

 

예시에서는 모양이 어떻게 생겼는지 더욱 잘 확인하기 위해 이 Shape이 나타나는 parent layout에 padding을 12dp만큼 주어 모양이 잘 보이도록 만든다. 

 

RectangleShape

RectangleShape은 사각형을 모두 채우는 Shape이다. 기본값으로 아무런 파라미터가 안넘어갈 때 설정된다.

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldModifierRectangle() {
    Box(modifier = Modifier.padding(12.dp)) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(
                    color = Color.Blue,
                    shape = RectangleShape
                )
        ) {}
    }
}

그림2. RectangleShape

 

RoudnedCornerShape

RoundedCornerShape은 둥근 모서리를 만들기 위한 Shape이다.

 

 

같은 크기의 Corner 만들기

RoundedCornerShape은 아래 세가지 파라미터(Dp, Float, Int)를 이용해 같은 크기의 Corner을 만들 수 있다.

 

1. Dp : dp값을 이용해 Rounding처리를 한다.

fun RoundedCornerShape(size: Dp) = RoundedCornerShape(CornerSize(size))

2. Float : pixel 값을 이용해 Rounding 처리를 한다.

fun RoundedCornerShape(size: Float) = RoundedCornerShape(CornerSize(size))

3. Int : 비율(percent)를 이용해 Rounding 처리를 한다. 예를 들어 50% 만큼의 Rounding 처리가 되면 원이 된다.

fun RoundedCornerShape(percent: Int) = RoundedCornerShape(CornerSize(percent))

 

자 이제 코드 예시를 확인하자. 아래 코드에서는 12dp만큼의 Rounding을 주었다.

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldModifierRoundedCorner() {
    Box(modifier = Modifier.padding(12.dp)) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(
                    color = Color.Blue,
                    shape = RoundedCornerShape(12.dp)
                )
        ) {}
    }
}

그림3. RoundedCornerShape

 

 

다른 크기의 Corner만들기

CornerSize를 일일히 설정함으로써 위치별로 다른 크기의 Corner을 만들 수 도 있다. 

class RoundedCornerShape(
    topStart: CornerSize,
    topEnd: CornerSize,
    bottomEnd: CornerSize,
    bottomStart: CornerSize
) : CornerBasedShape(
    topStart = topStart,
    topEnd = topEnd,
    bottomEnd = bottomEnd,
    bottomStart = bottomStart
)

CornerSize는 위와 마찬가지로 dp, pixel, percent를 모두 인자로 받을 수 있다.

fun CornerSize(size: Dp): CornerSize = DpCornerSize(size)

fun CornerSize(size: Float): CornerSize = PxCornerSize(size)

fun CornerSize(/*@IntRange(from = 0, to = 100)*/ percent: Int): CornerSize = PercentCornerSize(percent.toFloat())

 

왼쪽 위에서부터 시계방향으로 12dp, 24dp, 36dp, 48dp로 CornerSize가 증가하는 Shape을 만들어보자.

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldModifierRoundedCornerDiff() {
    Box(modifier = Modifier.padding(12.dp)) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(
                    color = Color.Blue,
                    shape = RoundedCornerShape(
                        topStart = CornerSize(12.dp),
                        topEnd = CornerSize(24.dp),
                        bottomEnd = CornerSize(36.dp),
                        bottomStart = CornerSize(48.dp)
                    )
                )
        ) {}
    }
}

결과는 아래 그림4와 같다. 왼쪽 위부터 시계 방향으로 CornerSize가 증가하는 것을 확인할 수 있다.

그림4. RoundedCornerShape with different

 

 

CircleShape

CircleShape은 동그라미를 만들기 위한 Shape이다. 이 Shape은 내부에서 RoundedCornerShape의 percent 프로퍼티를 이용한다.

val CircleShape = RoundedCornerShape(50) // 50percent의 RoundedCornerShape을 준다.

즉, RoundedCornerShape이 50% 적용된 것을 위 코드에서 확인할 수 있다.

 

실제로 아래와 같이 써보면

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldModifierCircle() {
    Box(modifier = Modifier.padding(12.dp)) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(
                    color = Color.Blue,
                    shape = CircleShape
                )
        ) {}
    }
}

그림5. RoundedCornerShape

 

 

CutCornerShape

CurCornerShape은 모서리를 자르기 위한 Shape이다. 이 Shape은 RoundedCornerShape과 비슷하게 동작하지만 모서리가 둥글어지는게 아니라 잘리는게 다르다. RoundedCornerShape과 마찬가지로 dp, pixel, percent를 파라미터로 모두 사용할 수 있다.

 

직접 보는게 빠르니 빠르게 보도록 하자. 복잡한 내용은 RoundedCornerShape과 동작이 같으니 모든 모서리를 12.dp만큼 잘라보자.

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldModifierCut() {
    Box(modifier = Modifier.padding(12.dp)) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(
                    color = Color.Blue,
                    shape = CutCornerShape(12.dp)
                )
        ) {}
    }
}

그림6. CutCornerShape

 

모서리가 모두 똑같이 12.dp만큼 잘린 것을 확인할 수 있다. 위의 CircleShape에서 percent를 사용했던 것을 응용해서 50percent를 자름으로써 다이아몬드 모양을 만들어보도록 하자. 

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldModifierDiamond() {
    Box(modifier = Modifier.padding(12.dp)) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(
                    color = Color.Blue,
                    shape = CutCornerShape(50)
                )
        ) {}
    }
}

그림7. CutCornerShape으로 다이아몬드 만들기

 

정리

Jetpack Compose에서는 다양한 Shape을 지원하여 UI를 아름답게 만들어줄 수 있다. 위의 사용법을 잘 숙지해서 아름다운 UI를 만들도록 하자.