Nutri Capture 프론트엔드 - '피자' 아이콘 구현

#1 개요

#1-1 지금까지의 여정

Nutri Capture 프론트엔드 - 커스텀 BottomSheetScaffold 개발 유예

위 게시글에서 보듯, 원래는 영양 정보 입력을 위한 커스텀 키보드를 만들기로 했었다. 이 커스텀 키보드는 BottomSheetScaffold의 BottomSheet에 들어갈 예정이었다. 순정 BottomSheetScaffold로는 내가 원하는 동작을 구현할 수 없다. 그래서 커스텀 BottomSheetScaffold를 만들려 했다. 이 게시글에서 보듯, 커스텀은 유예하기로 했다. 커스텀 BottomSheetScaffold가 완성될 때까지는 일부 어색함이 존재하더라도, 순정 BottomSheetScaffold을 사용하겠다.

 

#1-2 완성된 커스텀 키보드 미리보기

[완성된 앱의 실제 작동 스크린샷 넣을 예정]

커스텀 키보드의 도식도다. 아이콘을 클릭할때마다 아이콘의 배경색이 변한다. 또 아이콘을 둘러싼 호의 길이가 늘어난다. 호의 길이는 아이콘의 의미하는 영양소의 섭취량이다. 숫자보다 직관적일 것이다.

 

#1-3 구현된 아이콘 미리보기

[완성된 앱의 실제 작동 스크린샷 넣을 예정]

길이가 가변인 호를 포함하며, 클릭할 때마다 그 호의 길이가 변하는 아이콘을 구현해본다. 먼저 레이어1에 원을 둔다. 레이어1 위에 레이어2를 둔다. 레이어2에 레이어1의 원보다 반지름이 살짝 작은 원 아이콘을 둔다. 레이어2의 아이콘을 클릭하면 레이어1의 원의 모양이 변한다. 레이어1의 원의 모양을 바꾸는 게 구현의 핵심이 되겠다. 마치 피자에서 피자 조각을 하나씩 빼듯 변하므로 이 아이콘을 이제부터 '피자' 아이콘으로 부르기로 한다.

 

#2 코드 스니펫 - 핵심

#2-1 drawArc()

마침 피자 아이콘을 구현하기에 안성맞춤인 공식 라이브러리의 API가 있었다.

DrawScope  |  API reference  |  Android Developers

API에 대한 공식 문서 링크다.

 

// https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawArc(androidx.compose.ui.graphics.Brush,kotlin.Float,kotlin.Float,kotlin.Boolean,androidx.compose.ui.geometry.Offset,androidx.compose.ui.geometry.Size,kotlin.Float,androidx.compose.ui.graphics.drawscope.DrawStyle,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.BlendMode)

fun drawArc(
    brush: Brush, // 그리기에 사용할 브러쉬(붓) 종류 설정 (맨 아래 주석 참조)
    startAngle: Float, // 호를 그리기 시작하는 각도 (0도는 시침의 3시 방향이고, 시계 방향으로 증가)
    sweepAngle: Float, // startAngle로부터 얼마나 호를 그릴지의 정도값
    useCenter: Boolean, // true로 하면 호가 아닌 부채꼴 모양이 됨
    topLeft: Offset = Offset.Zero, // 호를 담을 가상 사각형의 왼쪽 상단 좌표
    size: Size = this.size.offsetSize(topLeft), // 호를 담을 가상 사각형의 크기
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f, // 호의 투명도
    style: DrawStyle = Fill, // 그리기 스타일 (Stroke은 외곽선만, Fill은 호를 채움)
    colorFilter: ColorFilter? = null, // 색상 필터 적용
    blendMode: BlendMode = DefaultBlendMode // 그리기 작업의 혼합 모드 설정 (맨 아래 주석 참조)
): Unit

/*
brush: 그림판에서 설정하는 브러쉬와 같다고 생각하면 된다.
    참조: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Brush
blendMode: 색상을 혼합(Blend)하는 방식이라고 한다.
    솔직히 잘 모르겠다.
    색상 관련해서 더 깊이 구현할 때가 올까?
    그렇게 된다면, 공부해야할 지도 모른다.
    참조: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/BlendMode
*/

각 매개변수에 대한 설명이다.

 

#2-2 animatedFloatAsState()

가치 기반 애니메이션  |  Jetpack Compose  |  Android Developers

animatedFloatAsState()에 대한 공식 문서다.

 

// https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#animateFloatAsState(kotlin.Float,androidx.compose.animation.core.AnimationSpec,kotlin.Float,kotlin.String,kotlin.Function1)

@Composable
fun animateFloatAsState(
    targetValue: Float,
    animationSpec: AnimationSpec<Float> = defaultAnimation,
    visibilityThreshold: Float = 0.01f,
    label: String = "FloatAnimation",
    finishedListener: ((Float) -> Unit)? = null
): State<Float>

animtedFloatAsState()는 targetValue 프로퍼티가 변경될 때 반응한다. 가령, 원래의 targetValue가 8이었다가 갑자기 9로 변경된 경우를 가정해본다. animatedFloatAsState는 8에서 9로 서서히 증가한다. 그 증가의 양상은 animationSpec 프로퍼티에 기술된다. 또, animtedFloatAsState() 또한 State이므로 그 값이 변할 때 Recomposition이 유발된다.

 

#3 레이어 1 구현

#1-3에서 말한 레이어1이다.

 

#3-1 원의 모양 바꾸기 - 기본

구현을 위한 샘플 프로젝트를 만들었다. 프로젝트 이름은 ResponsivePizzaShape다. drawArc()을 이용한 코드는 아래와 같다.

 

...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ResponsivePizzaShapeTheme {
                Scaffold(
                    modifier = Modifier.fillMaxSize()
                ) { innerPadding ->
                    Box(
                        modifier = Modifier.padding(innerPadding)
                    ) {
                        ResponsivePizzaShape(
                            modifier = Modifier.padding(innerPadding),
                            totalSlices = 12,
                            color = Color.Yellow
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun ResponsivePizzaShape(
    modifier: Modifier = Modifier,
    totalSlices: Int = 8,
    color: Color = Color.Green
) {
    var remainingSlices by remember { mutableIntStateOf(0) }

    Box(
        modifier = modifier
            .fillMaxSize()
            .clickable {
                remainingSlices = (remainingSlices + 1) % (totalSlices + 1)
            }
    ) {
        // State Hoisting
        val animatedRemainingSlices by animateFloatAsState(
            targetValue = remainingSlices.toFloat(),
            animationSpec = tween(durationMillis = 500, easing = LinearOutSlowInEasing)
        )

        Canvas(modifier = Modifier.fillMaxSize()) {
            animatedDrawPizza(
                animatedRemainingSlices = animatedRemainingSlices,
                totalSlices = totalSlices,
                color = color
            )
        }
    }
}

fun DrawScope.drawPizza(
    remainingSlices: Int,
    totalSlices: Int,
    color: Color
) {
    val radius = size.minDimension / 2 // minDimension은 size의 너비와 높이 중 더 작은 값을 반환
    val center = Offset(size.width / 2, size.height / 2) // 맨 ↖에서 →쪽으로 (너비/2)만큼 ↓쪽으로 (높이/2)만큼 움직인 곳
    val sliceAngle = 360f / totalSlices

    drawArc(
        color = color,
        startAngle = 180f, // 시침의 3시 방향부터 시작
        sweepAngle = sliceAngle * remainingSlices,
        useCenter = true,
        topLeft = Offset(center.x - radius, center.y - radius),
        size = Size(radius * 2, radius * 2)
    )
}

참고로 Jetpack Compose에서 각 컴포넌트들의 Offset(0, 0)은 고유하다. 각 컴포넌트 별로 맨 ↖쪽이 Offset(0, 0)다.

 

#3-2 실행 확인

실행시켰을 때의 모습이다. 클릭할 때마다 피자의 모양이 잘 변한다. 하지만, 내가 원하는 모습은 아니다. 왜냐하면 애니메이션이 없기 때문이다. 애니메이션의 부재로, 변화가 뚝뚝 끊겨 보인다. 아래에서 피자에 애니메이션을 구현해본다.

 

#3-3 원의 모양 바꾸기 - 애니메이션

자연스러운 사용자 경험을 위해선 '피자' 클릭 시 서서히 피자가 '차오르는' 애니메이션이 나와야 한다. 그럴려면 drawArc()가 연속적으로 trigger(유발)되어야할 것이다. 우선 #2-2에 있는 animtedFloatAsState()에 대해 이해하기 바란다.

 

"drawArc()가 연속적으로 trigger되어야한다."는 명제에서 Recomposition 이용할 수 있겠다는 생각을 했다. Recomposition 또한 연속적으로 trigger되니까. animtedFloatAsState()을 외부에 두고 drawArc()에 주입하면 (= State Hoisting) 어떨까? 사용자가 피자를 클릭할 때마다 targetValue가 변할 것이고, animationSpec 프로퍼티에 명시한 애니메이션 시간 동안 animtedFloatAsState()가 연속적으로 변할 것이고, 그 동안 drawArc() 또한 연속적으로 (Recompostion에 의해) trigger될 것이다. 말이 어렵다. 단도직입적으로 아래의 코드를 보자. 그 편이 이해가 더 빠를 수 있다.

 

...

class MainActivity : ComponentActivity() {
    ... // #3-1과 같음
}

@Composable
fun ResponsivePizzaShape(
    ... // #3-1과 같음
) {
    ... // #3-1과 같음

    Box(
        ... // #3-1과 같음
    ) {
        // State Hoisting
        val animatedRemainingSlices by animateFloatAsState(
            targetValue = remainingSlices.toFloat(),
            animationSpec = tween(durationMillis = 500, easing = LinearOutSlowInEasing)
        )

        Canvas(modifier = Modifier.fillMaxSize()) {
            animatedDrawPizza(
                animatedRemainingSlices = animatedRemainingSlices,
                totalSlices = totalSlices,
                color = color
            )
        }
    }
}

fun DrawScope.drawPizza(
    ... // #3-1과 같음
) {
    ... // #3-1과 같음
}

fun DrawScope.animatedDrawPizza(
    animatedRemainingSlices: Float,
    totalSlices: Int,
    color: Color
) {
    val radius = size.minDimension / 2 // minDimension은 size의 너비와 높이 중 더 작은 값을 반환
    val center = Offset(size.width / 2, size.height / 2) // 맨 ↖에서 →쪽으로 (너비/2)만큼 ↓쪽으로 (높이/2)만큼 움직인 곳
    val sliceAngle = 360f / totalSlices

    drawArc(
        color = color,
        startAngle = 180f, // 시침의 3시 방향부터 시작
        sweepAngle = sliceAngle * animatedRemainingSlices,
        useCenter = true,
        topLeft = Offset(center.x - radius, center.y - radius),
        size = Size(radius * 2, radius * 2)
    )
}

사용자가 '피자'를 클릭할 때마다, animatedRemainingSlices의 값이 0.5초동안 서서히 증가하며 그때마다 animatedDrawPizza() 또한 연속적으로 trigger된다.

 

#3-4 실행 확인

스크린샷으로는 #3-2와 똑같아서 그냥 #3-2의 이미지를 재사용했다. 스크린샷으로 애니메이션을 담을 수가 없는 게 아쉽다. 애니메이션 동작 확인이 필요한 사람은 #3-5에서 전체 프로젝트를 다운로드해서 안드로이드 스튜디오에서 실행하기를 바란다.

 

#3-5 완성된 앱

android-practice/playground/ResponsivePizzaShape at master · Kanmanemone/android-practice

#3의 전체 소스코드다.

 

#4 레이어2 구현

#4-1 중간 점검

지금까지 구현한 건 '피자'에 불과하다. #1-3에서 말한 레이어1의 구현에 불과한 것이다. 아이콘을 클릭할 때 '피자'의 모양이 바뀌게 만들어야 한다. 즉, #1-3에서 말한 레이어2의 구현이다. 이 구현을 위해 샘플 프로젝트를 또 하나 만들었다. 이번 샘플 프로젝트의 이름은 ResponsiveArcSurroundedIconButton이다.

 

TMI

그냥 처음에 만든 샘플 프로젝트에 몽땅 다 합쳐 넣을까도 싶었다. 하지만, 이렇게 2개로 분리하는 편이 좋을 거란 예감이 들었다. 내가 만든 '피자'가 언젠간 다른 곳에서 쓰일 거라는 예감이.

 

#4-2 구조 스케치

레이어1 위에 레이어2가 올라가 있는 구조를 만들어야 한다. 레이어1에는 #3에서 만든 '피자'를 둘 것이다. 레이어2에는 동그란 아이콘을 둘 것이다. Box() 안에 레이어1 및 레이어2를 순차적으로 선언하면 될 것이다. 먼저 할 것은 레이어1과 2를 합쳐넣을 컴포저블의 선언이다. 이 컴포저블의 이름은... 프로젝트와 똑같이 "ResponsiveArcSurroundedIconButton"으로 정했다.

 

#4-2 코드 - 정적인 모양

...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ResponsiveArcSurroundedIconButtonTheme {
                Scaffold(
                    modifier = Modifier.fillMaxSize()
                ) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding),
                        verticalArrangement = Arrangement.SpaceEvenly,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        ResponsiveArcSurroundedIconButton(
                            imageVector = Icons.AutoMirrored.Filled.Send,
                            contentDescription = "전송",
                            currentLevel = 3,
                            maxLevel = 8,
                            arcColor = Color.Red,
                            arcWidth = 10
                        )

                        ResponsiveArcSurroundedIconButton(
                            imageVector = Icons.Default.Call,
                            contentDescription = "전화",
                            currentLevel = 13,
                            maxLevel = 30,
                            arcColor = Color.Green,
                            arcWidth = 20
                        )

                        ResponsiveArcSurroundedIconButton(
                            imageVector = Icons.Sharp.Done,
                            contentDescription = "완료",
                            currentLevel = 1,
                            maxLevel = 3,
                            arcColor = Color.Yellow,
                            arcWidth = 30
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun ResponsiveArcSurroundedIconButton(
    imageVector: ImageVector,
    contentDescription: String,
    currentLevel: Int,
    maxLevel: Int,
    arcColor: Color,
    arcWidth: Int
) {
    Box(
        modifier = Modifier.size((40 + arcWidth).dp),
        contentAlignment = Alignment.Center
    ) {
        // 레이어 1
        val animatedCurrentLevel by animateFloatAsState(
            targetValue = currentLevel.toFloat(),
            animationSpec = tween(durationMillis = 500, easing = LinearOutSlowInEasing)
        )

        Canvas(modifier = Modifier.fillMaxSize()) {
            animatedDrawArc(
                currentLevel = animatedCurrentLevel,
                maxLevel = maxLevel,
                color = arcColor
            )
        }

        // 레이어 2
        FilledTonalIconButton(
            onClick = {
                // TODO: currentLevel 증가시키는 코드
            }
        ) {
            Icon(
                imageVector = imageVector,
                contentDescription = contentDescription
            )
        }
    }
}

private fun DrawScope.animatedDrawArc(
    currentLevel: Float, maxLevel: Int, color: Color
) {
    val radius = (size.minDimension / 2) // minDimension은 size의 너비와 높이 중 더 작은 값을 반환
    val center = Offset(size.width / 2, size.height / 2) // 맨 ↖에서 →쪽으로 (너비/2)만큼 ↓쪽으로 (높이/2)만큼 움직인 곳
    val anglePerLevel = 360f / maxLevel

    drawArc(
        color = color,
        startAngle = 180f, // 시침의 3시 방향부터 시작
        sweepAngle = anglePerLevel * currentLevel,
        useCenter = true,
        topLeft = Offset(center.x - radius, center.y - radius),
        size = Size(radius * 2, radius * 2)
    )
}

사용자의 동작이 가미되지 않은, 정적인 모양의 구현이다. 살짝 신경쓰이는 부분이 있다. Box() Size를 결정하는 부분을 보라. Box()의 Size는 매개변수 arcWidth값에 종속되어있다. 이 때, 해당 코드에서는 FilledTonalButton의 Size를 '참조'하고 있지 않다. "40.dp 이겠거니"하고 넘겨짚어 하드코딩하고 있다. FilledTonalButton의 사이즈는 internal 접근제어자로 인해 참조가 불가능하기 때문이다. internal 접근제어자가 붙은 코드에서는 사이즈가 40.dp이었다. 그리고 머터리얼 가이드3에서도 40.dp로 안내하고 있다. 따라서 40.dp이라고 넘겨짚듯 프로그래밍한 것에 대한 찝찝함은 넘어가기로 한다.

 

#4-3 실행 확인

내가 원해왔던, 반가운 모양의 아이콘이다.

 

#4-4 코드 - 사용자의 입력까지

이제 사용자의 동작까지 고려한 코드를 구현한다.

 

...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        setContent {
            ResponsiveArcSurroundedIconButtonTheme {
                Scaffold(
                    ...
                ) { ...
                    Column(
                        ...
                    ) {
                        var level1 by remember { mutableIntStateOf(0) }
                        val maxLevel1 = 8
                        var level2 by remember { mutableIntStateOf(0) }
                        val maxLevel2 = 30
                        var level3 by remember { mutableIntStateOf(0) }
                        val maxLevel3 = 3

                        ResponsiveArcSurroundedIconButton(
                            ...
                            currentLevel = level1,
                            maxLevel = maxLevel1,
                            ...
                        ) {
                            level1 = if(level1 < maxLevel1) {
                                level1 + 1
                            } else {
                                0
                            }
                        }

                        ResponsiveArcSurroundedIconButton(
                            ...
                            currentLevel = level2,
                            maxLevel = maxLevel2,
                            ...
                        ) {
                            level2 = if(level2 < maxLevel2) {
                                level2 + 1
                            } else {
                                0
                            }
                        }

                        ResponsiveArcSurroundedIconButton(
                            ...
                            currentLevel = level3,
                            maxLevel = maxLevel3,
                            ...
                        ) {
                            level3 = if(level3 < maxLevel3) {
                                level3 + 1
                            } else {
                                0
                            }
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun ResponsiveArcSurroundedIconButton(
    ...
    onIconClick: () -> Unit
) {
    Box(
        ...
    ) {
        // 레이어 1
        ...

        // 레이어 2
        FilledTonalIconButton(
            onClick = {
                onIconClick()
            }
        ) {
            Icon(
                ...
            )
        }
    }
}

private fun DrawScope.animatedDrawArc(
    ...
) {
    ...
}

버튼 클릭 시의 동작은 열린 결말로 둔다. 열린 결말 즉, 커스텀 가능하게 둔다는 말이다. 이 방식은 State Hoisting 패턴과도 들어맞기에 더 좋다. 여기에서 바로 쓸 수 있는 State Hoisting 패턴은 구체적으로 뭘까. 첫째로, State를 상위 요소에서 하위 요소로 내려주어야 한다. 그래서 currentLevel은 State로서 ResponsiveArcSurroundedIconButton()의 상위 함수에 둘 것이다. 둘째로, Event는 하위 요소에서 상위요소로 올려주어야 한다. 그래서 ResponsiveArcSurroundedIconButton()의 마지막 매개변수로 람다 함수를 추가했다.

 

#4-5 작동 확인

잘 동작한다. 스크린샷이라 호가 그려지는 애니메이션을 표현할 수 없다. #4-6에 전체 프로젝트 소스코드가 있다. 동작 확인이 필요한 사람은 참조하자.

 

#4-6 완성된 앱

android-practice/playground/ResponsiveArcSurroundedIconButton at master · Kanmanemone/android-practice

#4의 전체 소스코드다.