[안드로이드] Compose 밑줄 텍스트와 클릭 가능하게 만들기

Compose 밑줄 텍스트와 클릭 가능하게 만들기

사이드 프로젝트를 진행하면서 아래 사진과 같은 UI 기능을 개발해야 하는 상황에 봉착했습니다.

텍스트는 유지하면서 이용약관 과 개인보호 정책에 underline이 들어가야 하고, 두 가지 글자는 다른 onclick을 부여해야 했습니다.

---

AnnotatedString

• The basic data structure of text with multiple styles
• 하나의 텍스트 안에 다양한 스타일을 적용할 수 있는 객체
• getStringAnnotations 을 이용하여 클릭 범위 필터링 가능

---

코드

@Composable
internal fun TermsText(
    onClickTermsOfUse: () -> Unit,
    onClickPrivacyPolicy: () -> Unit
) {
    val text = buildAnnotatedString {
        withStyle(
            style = NonScaleSpanStyle(
                fontSize = 11.sp,
                color = Color.White
            )
        ) {
            append(stringResource(id = R.string.terms_text_first))
        }
        pushStringAnnotation(tag = "termsOfUse", annotation = "termsOfUse")
        withStyle(
            style = NonScaleSpanStyle(
                fontSize = 11.sp,
                color = Color.White,
                textDecoration = TextDecoration.Underline
            )
        ) {
            append(stringResource(id = R.string.terms_of_use))
        }
        pop()
        withStyle(
            style = NonScaleSpanStyle(
                fontSize = 11.sp,
                color = Color.White
            )
        ) {
            append(stringResource(id = R.string.terms_text_second))
        }
        pushStringAnnotation(tag = "privacyPolicy", annotation = "privacyPolicy")
        withStyle(
            style = NonScaleSpanStyle(
                fontSize = 11.sp,
                color = Color.White,
                textDecoration = TextDecoration.Underline
            )
        ) {
            append(stringResource(id = R.string.privacy_policy))
        }
        pop()
        withStyle(
            style = NonScaleSpanStyle(
                fontSize = 11.sp,
                color = Color.White
            )
        ) {
            append(stringResource(id = R.string.terms_text_third))
        }
    }

    Box(contentAlignment = Alignment.Center) {
        ClickableText(
            text = text,
            onClick = { offset ->
                text.getStringAnnotations(
                    tag = "termsOfUse",
                    start = offset,
                    end = offset
                ).firstOrNull()?.let {
                    onClickTermsOfUse()
                }
                text.getStringAnnotations(
                    tag = "privacyPolicy",
                    start = offset,
                    end = offset
                ).firstOrNull()?.let {
                    onClickPrivacyPolicy()
                }
            }
        )
    }
}