[Compose Canvas] Canvas drawRoundRect 사용해 라운딩 처리된 사각형 만드는 방법 한 번에 정리하기

이번 글에서 다룰 내용

drawRect를 사용하면 직사각형만을 만들 수 있다. 라운드 처리는 안드로이드 UI에서 매우 중요한 요소이므로, Canvas에서는 라운딩 처리된 사각형을 만드는 drawRoundRect 함수를 제공한다. 이번 글에서는 이에 대해 알아보도록 한다.

 

drawRoundRect 함수 살펴보기

fun drawRoundRect(
    color: Color,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    cornerRadius: CornerRadius = CornerRadius.Zero,
    style: DrawStyle = Fill,
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

drawRoundRect는 drawRect의 모든 파라미터를 가지고 있고, 여기에 추가로 cornerRadius를 가져 라운딩 처리 정도를 설정할 수 있도록 한다.

 

따라서 300dp 크기의 Canvas의 중앙에 100dp의 크기를 가진 파란색 라운딩 처리(12dp)된 사각형은 다음과 같이 만들 수 있다. color, topLeft, size에 대해서는 이전 글에서 자세히 설명하였으므로, 이 글에서는 별도로 설명하지 않는다.

@Preview(showBackground = true)
@Composable
fun DrawRoundRect() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawRoundRect(
                color = Color.Blue,
                topLeft = Offset(100.dp.toPx(), 100.dp.toPx()),
                size = Size(100.dp.toPx(), 100.dp.toPx()),
                cornerRadius = CornerRadius(12.dp.toPx(), 12.dp.toPx())
            )
        }
    )
}

위 코드에서 중요한 부분은 바로 CornerRadius(12.dp.toPx(), 12.dp.toPx())이다. 이는 모든 꼭지점에 12dp의 라운딩 처리를 한다는 뜻이다.

 

따라서 이 Composable을 Preview로 보면 아래와 같은 결과가 나온다. 모든 곳에 12dp의 라운딩 처리가 된 것을 확인할 수 있다.

 

 

만약 라운딩 처리를 길이의 절반만큼 한다면 원을 만들 수도 있다.

@Preview(showBackground = true)
@Composable
fun DrawRoundRect() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawRoundRect(
                color = Color.Blue,
                topLeft = Offset(100.dp.toPx(), 100.dp.toPx()),
                size = Size(100.dp.toPx(), 100.dp.toPx()),
                cornerRadius = CornerRadius(50.dp.toPx(), 50.dp.toPx())
            )
        }
    )
}

 

크기가 100dp이므로 50dp만큼씩 라운딩 처리를 하면 아래와 같은 원이 나온다.

 

drawRoundRect 정리하기

라운딩 처리가 된 UI는 최근 안드로이드에서 매우 중요한 요소이다. 특히 안드로이드의 최신 버전에서는 모든 위젯에 라운딩 처리를 강제하기도 한다. Canvas에서도 drawRoundRect라는 함수를 통해 라운딩 처리된 사각형을 만들 수 있음을 기억하자.