BubbleShape Text Component

🥲 왜 개발하게 됐는가

개발하게 된 계기는 두 가지 이유가 있었습니다.
가장 큰 이유는 기획자&디자이너께서
기존의 주소가 노출되는 부분을
Marker 위에 Bubble 형태로 변경 요청이였습니다.

두 번째는 기존의 Bubble 형태의 텍스트가 개발은 되어있었는데
동적으로 변하는 텍스트에 대한 대응이 안 되어있었고
Bubble 형태를 그리는 방법이 올바르지 않았습니다.
(🥲Column 과 Text를 혼합하고 삼각형을 그려 붙이는 형태로)

🤔 개발 방법 고민

위 기획에 대한 UI를 개발하기 위해는 다음과 같이 단계별로 생각해 볼 수 있습니다.

첫 번째는 텍스트 동적 계산

텍스트의 정책에 맞게 넓이와 높이가 선행적으로 계산되어야 합니다.
계산된 넓이와 높이를 바탕으로
BubbleShape 의 넓이와 높이를 결정할 수 있습니다.

두 번째는 Canvas

계산된 넓이와 높이를 바탕으로
둥근 모서리(arc) 와 path를 이용한 BubbleShape 그리기

세 번째는 컴포넌트간 위치 조정

Marker 위에 그리기 위해서 Marker 위치를 파악하고
파악된 위치를 바탕으로 위로
BubbleShape 높이 + spacing 간격 벌리기

설계는 끝났으니 이제 개발을 해보겠습니다.

👨🏻‍💻 개발 내용

컴포넌트 속성 관리 클래스 생성

우선 컴포넌트의 속성별로 관리할 수 있는 클래스를 만들었습니다.

📌 텍스트 관리

• text: 보여질 텍스트
• textStyle: 텍스트 스타일
• textMaxRatio: 텍스트가 차지할 최대 비율

@Immutable
data class TextAppearance private constructor(
    val text: String,
    val textStyle: TextStyle,
    @FloatRange(from = 0.0, to = 1.0)
    val textMaxRatio: Float
) {
    companion object {
        @Composable
        fun setAppearance(
            text: String,
            textStyle: TextStyle = MaterialTheme.typography.labelSmall.copy(color = PetnowColor.Grey.Tertiary),
            textMaxRatio: Float = 0.7f
        ): TextAppearance {
            return TextAppearance(
                text = text,
                textStyle = textStyle,
                textMaxRatio = textMaxRatio
            )
        }
    }
}

📌 버블 모양 관리
값을 정수로 받고 이를 화면 밀도(density)를 이용하여 float(px)로 치환 합니다.

• padding: 버블 모양의 padding
• backgroundColor: 버블 모양의 전체 컬러
• triangleHeight: 버블 모양의 꼬리 삼각형 높이
• triangleWidth: 버블 모양의 꼬리 삼각형 넓이
• cornerRadius: 버블 모양의 라운드 값
• shadowRadius: 버블 모양의 그림자 값
• shadowColor: 버블 모양의 그림자 색상
• spacingBetweenAnchorUI: 버블 모양을 지정하는 위치 ui와의 간격

@Immutable
data class BubbleShape private constructor(
    val padding: Float,
    val backGroundColor: Color,
    val triangleHeight: Float,
    val triangleWidth: Float,
    val cornerRadius: Float,
    val shadowRadius: Float,
    val shadowColor: Color,
    val spacingBetweenAnchorUI: Float,
) {
    companion object {
        @Composable
        fun setShape(
            padding: Int = 12,
            backGroundColor: Color = Color.White,
            triangleHeight: Int = 10,
            triangleWidth: Int = 16,
            cornerRadius: Int = 8,
            shadowRadius: Int = 8,
            spacingBetweenAnchorUI: Int = 4
        ): BubbleShape {
            val density = LocalDensity.current
            val bubblePaddingPx = with(density) { padding.dp.toPx() }
            val triangleHeightPx = with(density) { triangleHeight.dp.toPx() }
            val triangleWidthPx = with(density) { triangleWidth.dp.toPx() }
            val cornerRadiusPx = with(density) { cornerRadius.dp.toPx() }
            val shadowRadiusPx = with(density) { shadowRadius.dp.toPx() }
            val shadowColor = Color.Black.copy(alpha = 0.15f)
            val spacingPx = with (density) { spacingBetweenAnchorUI.dp.toPx() }
            return BubbleShape(
                padding = bubblePaddingPx,
                backGroundColor = backGroundColor,
                triangleHeight = triangleHeightPx,
                triangleWidth = triangleWidthPx,
                cornerRadius = cornerRadiusPx,
                shadowRadius = shadowRadiusPx,
                shadowColor = shadowColor,
                spacingBetweenAnchorUI = spacingPx
            )
        }
    }
}

텍스트 동적 계산

어떻게 텍스트의 글자에 따라 동적으로 넓이와 높이를 계산할 수 있을까요
TextMeasure를 이용하면 이를 해결할 수 있습니다.

private val DefaultCacheSize: Int = 8

/**
 * Creates and remembers a [TextMeasurer]. All parameters that are required for [TextMeasurer]
 * except [cacheSize] are read from CompositionLocals. Created [TextMeasurer] carries an internal
 * [TextLayoutCache] with [cacheSize] capacity. Provide 0 for [cacheSize] to opt-out from internal
 * caching behavior.
 *
 * @param cacheSize Capacity of internal cache inside [TextMeasurer]. Size unit is the number of
 * unique text layout inputs that are measured. Value of this parameter highly depends on the
 * consumer use case. Provide a cache size that is in line with how many distinct text layouts are
 * going to be calculated by this measurer repeatedly. If you are animating font attributes, or any
 * other layout affecting input, cache can be skipped because most repeated measure calls would miss
 * the cache.
 */
@Composable
fun rememberTextMeasurer(
    cacheSize: Int = DefaultCacheSize
): TextMeasurer {
    val fontFamilyResolver = LocalFontFamilyResolver.current
    val density = LocalDensity.current
    val layoutDirection = LocalLayoutDirection.current

    return remember(fontFamilyResolver, density, layoutDirection, cacheSize) {
        TextMeasurer(fontFamilyResolver, density, layoutDirection, cacheSize)
    }
}

📌 textMeasurer를 이용해서 BubbleShape width, height 계산하기

• textMeasurer를 통해 measure된 결과를 통해
  width, height와 padding값을 합쳐 BubbleShape width, height 결과 도출
  

BubbleShape 만들기 (Canvas)

Canvas의 넓이와 높이 지정

넓이는 위에서 계산한 bubbleWidth로 지정하고
높이는 위에서 계산한 bubbleHeight와 삼각형의 높이를 더하여 지정합니다.

Canvas(
    modifier = modifier
        .width(with(density) { bubbleWidth.toDp() })
        .height(with(density) { (bubbleHeight + bubbleShape.triangleHeight).toDp() })
        .padding(end = with(density) { bubbleShape.padding.toDp() })
)

Paint 설정

compose에서 Paint를 사용하여 색상을 적용할 때
✌🏻그림자✌🏻는 아직 미지원이므로 기존 안드로이드 시스템에서 설정해야 합니다.

val paint = Paint().apply {
	this.color = bubbleShape.backGroundColor
	asFrameworkPaint().setShadowLayer(
		bubbleShape.shadowRadius,
		0f,
        2f,
        bubbleShape.shadowColor.toArgb()
    )
}

Path 그리기

1번 첫 시작은 radius로 부터 시작하게 설정 (moveTo)
2번 lineTo로 모서리 처리 직전까지 이동 (width-radius)
3번 arcTo 는 사각형을 그리고 거기에 원을 그리는 로직

• 사각형을 그리기 위해 왼쪽 시작점(width-radius*2) 으로 지정하고
• 사각형의 사이즈를 명시함 (radius2, radius2)
• 중심으로부터 시작점은 -90도
• 그리는 방향은 시계방향 90도 (원의 1/4)

...

6번 삼각형은 기준점은 bubbleWidth의 중간지점 (bubbleWidth/2)

• 기준점을 삼아 오른쪽 점은 삼각형의 넓이의 반을 더한 지점
  -> (중간지점+triangleWidth/2)
• 왼쪽 점은 삼각형의 넓이의 반을 뺀 지점
  -> (중간지점-traingleWidth/2)

...
10번까지 가면 bubleShape 의 Path를 그릴 수 있게 됩니다.

 val bubblePath = Path().apply {
        moveTo(bubbleShape.cornerRadius, 0f) // 1.
        lineTo(
            bubbleWidth - bubbleShape.cornerRadius,
            0f
        ) // 2.

        arcTo(
            rect = Rect(
                offset = Offset(bubbleWidth - bubbleShape.cornerRadius * 2, 0f),
                size = Size(bubbleShape.cornerRadius * 2, bubbleShape.cornerRadius * 2)
            ),
            startAngleDegrees = -90f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        ) // 3.

        lineTo(
            bubbleWidth,
            bubbleHeight - bubbleShape.cornerRadius
        ) // 4.

        arcTo(
            rect = Rect(
                offset = Offset(bubbleWidth - bubbleShape.cornerRadius * 2, bubbleHeight - bubbleShape.cornerRadius * 2),
                size = Size(bubbleShape.cornerRadius * 2, bubbleShape.cornerRadius * 2)
            ),
            startAngleDegrees = 0f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        ) // 5

        drawTriangle(
            bubbleShape = bubbleShape,
            bubbleWidth = bubbleWidth,
            bubbleHeight = bubbleHeight
        ) // 6

        lineTo(
            bubbleShape.cornerRadius,
            bubbleHeight
        ) // 7

        arcTo(
            rect = Rect(
                offset = Offset(0f, bubbleHeight - bubbleShape.cornerRadius * 2),
                size = Size(bubbleShape.cornerRadius * 2, bubbleShape.cornerRadius * 2)
            ),
            startAngleDegrees = 90f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        ) // 8

        lineTo(
            0f,
            bubbleShape.cornerRadius
        ) // 9

        arcTo(
            rect = Rect(
                offset = Offset(0f, 0f),
                size = Size(bubbleShape.cornerRadius * 2, bubbleShape.cornerRadius * 2)
            ),
            startAngleDegrees = 180f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        ) // 10
        close()
 }
 
 private fun Path.drawTriangle(
    bubbleShape: BubbleShape,
    bubbleWidth: Float,
    bubbleHeight: Float
) = apply {
    lineTo(
        (bubbleWidth + bubbleShape.triangleWidth) / 2,
        bubbleHeight
    )
    lineTo(
        bubbleWidth / 2,
        bubbleHeight + bubbleShape.triangleHeight
    )
    lineTo(
        (bubbleWidth - bubbleShape.triangleWidth) / 2,
        bubbleHeight
    )
}

Canvas 그리기

준비한 paint, path를 바탕으로 drawIntoCanvas 함수로 canvas에 path를 그립니다.
추가로 텍스트 역시 위의 textMeasurer와 textAppearance로 같이 그려줍니다.

Canvas(
    modifier = modifier
        .width(with(density) { bubbleWidth.toDp() })
        .height(with(density) { (bubbleHeight + bubbleShape.triangleHeight).toDp() })
        .padding(end = with(density) { bubbleShape.padding.toDp() })
) {

    val paint = Paint().apply {
        this.color = bubbleShape.backGroundColor
        asFrameworkPaint().setShadowLayer(
            bubbleShape.shadowRadius,
            0f,
            2f,
            bubbleShape.shadowColor.toArgb()
        )
    }

    val bubblePath = Path().apply {
        // 위 코드 참조
        ...
    }

    drawIntoCanvas { canvas ->
        canvas.drawPath(bubblePath, paint)
    }

    drawText(
        textMeasurer = textMeasurer,
        text = textAppearance.text,
        style = textStyle.copy(color = PetnowColor.Grey.Tertiary),
        topLeft = Offset(bubbleShape.padding, bubbleShape.padding)
    )
}

컴포넌트 위치 조정

markerUI위에 BubbleShape가 위치해야 하므로
markUI ✌🏻위치를 가져와야✌🏻 합니다.
저는 .onGloballyPositioned { } 를 활용하여 anchorPosition에 위치를 할당 했습니다.

이후 가져온 anchorPosition으로 y 좌표 위에
bubbleShape 높이와 기획된 빈 공간만큼을
verticalSpacing에 할당하고

.graphicsLayer { this.translationY = verticalSpacing } 로 위치를 설정 했습니다.

@Composable
fun AddressBubbleBox(
    modifier: Modifier = Modifier,
    bubbleShape: BubbleShape = BubbleShape.setShape(),
    textAppearance: TextAppearance,
    markerUI: @Composable () -> Unit
) {
    var anchorPosition by remember { mutableStateOf(Offset.Zero) }

    var bubbleHeight by remember {
        mutableFloatStateOf(0f)
    }

    val verticalSpacing = anchorPosition.y - bubbleHeight - bubbleShape.triangleHeight - bubbleShape.spacingBetweenAnchorUI

    Box(modifier) {
        AnimatedVisibility(textAppearance.text.isNotEmpty()) {
            BubbleBox(
                modifier = Modifier.graphicsLayer {
                    this.translationY = verticalSpacing
                },
                textAppearance = textAppearance,
                bubbleShape = bubbleShape,
                onChangeBubbleHeight = {
                    bubbleHeight = it
                }
            )
        }

        Box(
            modifier = Modifier
                .align(Alignment.Center)
                .onGloballyPositioned { coordinate ->
                    anchorPosition = coordinate.positionInParent()
                }
        ) {
            markerUI()
        }
    }
}

여기까지 모든 설정을 했고 완료한 화면을 아래와 같이 확인할 수 있습니다.

👏🏻 포스팅을 마치며

해당 기획에 대해 개발 하면서
canvas에 좌표계에 대해서 알게 되고
shadow 설정은 기존 컴포즈에서 안 되서 레거시 시스템을
이용해야 한다는 것을 배웠습니다.

위와 같은 UI는 꽤 많이 이용될 것 같아서
정리 및 공유하는 시간을 가졌습니다.
(이전에 개발했던 부분인데 정리를 이제서야 하는 부분입니다.🥲)

이만 포스팅을 마치겠습니다🙇🏻‍♂️