[Android] Radius 올바르게 적용하기

안녕하세요 점냥입니다 :)

 

오늘 소개할 Radius는 Android UI를 구현해 보신 경험이 어느 정도 있다면 익숙한 개념이라고 생각합니다. View를 원형 혹은 둥근 모서리를 가진 사각형으로 표현하고 싶을 때 사용하는 속성입니다. 그런데 이 Radius의 원리에 대해 알고 있으신가요?

 

 

Radius는 뷰 각 모서리에서 굴절률을 표현하는 원의 반지름으로 사용됩니다. 위 사진은 100dp의 크기인 사각형에 radius를 25dp로 적용했을 때 모습인데요. 각 모서리에 주어진 반지름의 원을 그려 외곽 모서리를 각 원에 맞춰져 잘리면서 그려지게 됩니다.

 

 

 

SDK 따라서 다르게 표현되는 Radius

[그림 1] 왼쪽이 Sdk 24, 오른쪽이 sdk 30에서 그린 shape

Android 개발을 하다가 낮은 버전에서 원형의 Shape가 고구마처럼 깨진 경험이 있으신가요?
Radius의 원리를 알게 된 여러분들이라면 이제 원인을 유추할 수 있을 거예요 :)

 

 

val shapeRadius = with(LocalDensity.current) { 75.dp.toPx() } // Radius는 75dp
AndroidView( 
modifier = Modifier.(...).size(100.dp), // 크기는 100dp
factory = {
    CardView(it).apply {
        setCardBackgroundColor(...)
        radius = shapeRadius
    }
})

 

Raduis를 75dp, 크기를 100dp로 설정했을 때 상황이네요.

Radius가 75dp이라는 뜻은 지름이 150dp인 원을 각 모서리에 그린다는 뜻이며, Radius가 그려지는 원리에 의해 약간 고구마 모양의 Shape를 만들게 됩니다.

 

그래서 [그림 1]을 보면 왼쪽의 Shape가 설정한 값에 맞게 올바르게 Shape를 만든 상황입니다.

 

그렇다면 SDK 30에서 원형으로 Shape가 그려지는 이유는 무엇일까요? 그 이유는 Android View의 Corner Rendering 방식이 SDK이 올라가면서 달라졌기 때문입니다.

 

Android SDK 24 버전의 렌더링 시스템의 경우 Radius의 값을 픽셀 그대로 바라보며 계산을 진행했기 때문에 고구마 같은 형태를 표현했지만

 

Android SDK 30 버전의 렌더링 시스템의 경우 View의 크기가 변경이 되어도 동일한 비율을 유지하기 위해서 Radius의 값이 가로와 세로 비율로 계산이 되기 때문에 최대 크기의 절반으로 계산됩니다.

 

정리하면.

만약 원형의 Shape를 표현하고 싶다면 Radius는 View 크기의 절반을 적용하기로 우리 모두 약속해요!

그런데.. 고구마 같은 Shape를 표현하고 싶다면 그럼 최신 버전에서는 어떻게 해야 할까요? 댓글 부탁드립니다 :)

 

 

참고

- https://didu-story.tistory.com/332#comment14607276