[Android][compose] 특정 텍스트에 Bold 및 ClickEvent 적용하기

Jetpack compose

 

 

안녕하세요~ 챠니입니다! :)

오늘은 Jetpack compose에서 특정부분에만 Bold 텍스트를 적용하는 방법에 대해서 알아보도록 하겠습니다.

 

 

AnnotatedString이란?

 AnnotatedString은 Android Jetpack Compose에서 텍스트를 보다 세밀하게 스타일링하거나, 텍스트의 일부에 추가적인 메타데이터를 부여하기 위해 사용되는 데이터 구조입니다.

 AnnotatedString은 주로 텍스트의 특정 부분에 대해 스타일을 적용하거나, 텍스트 내에서 여러 텍스트 부분을 구분할 수 있게 해줍니다.

AnnotatedString의 주요 특징

1. 텍스트와 스타일 분리
   AnnotatedString은 텍스트와 스타일을 별도로 관리할 수 있게 해줍니다. 이를 통해 다양한 텍스트 스타일을 손쉽게 적용할 수 있습니다.
2. 스타일링을 위한 withStyle과 addStringAnnotation
   AnnotatedString을 생성할 때 withStyle이나 addStringAnnotation을 사용하여 텍스트의 특정 부분에 스타일을 적용하거나 추가적인 애노테이션을 달 수 있습니다.
3. 다양한 스타일과 애노테이션 적용
   AnnotatedString은 텍스트의 여러 부분에 대해 서로 다른 스타일을 적용하거나, 특정 부분에 메타데이터(애노테이션)를 추가할 수 있어 유연한 텍스트 표현이 가능합니다.

---

AnnotatedString의 주요 구성 요소

1. append: 텍스트를 추가하는 함수입니다. 스타일이나 애노테이션을 적용하지 않은 텍스트를 추가할 때 사용됩니다.
2. withStyle: 텍스트의 특정 부분에 스타일을 적용하는 데 사용됩니다. 예를 들어, 굵은 글씨, 이탤릭체, 글꼴 색상 등을 적용할 수 있습니다.
3. addStringAnnotation: 텍스트에 애노테이션을 추가하는 데 사용됩니다. 이 애노테이션은 주로 텍스트의 일부에 메타데이터를 추가하여, 예를 들어 클릭 이벤트나 링크 등을 처리할 때 유용합니다.

---

AnnotatedString을 사용해야 하는 이유

1. 세밀한 스타일 적용
   AnnotatedString을 사용하면 텍스트의 일부에만 특정 스타일을 적용할 수 있어, 텍스트 내에서 서로 다른 스타일을 세밀하게 조정할 수 있습니다.
2. 텍스트와 메타데이터 관리
   addStringAnnotation을 통해 텍스트의 일부에 애노테이션을 추가할 수 있어, 링크, 이벤트 핸들링 등과 같은 동적 상호작용을 구현할 수 있습니다.
3. 유연한 텍스트 표현
   AnnotatedString은 다양한 스타일과 애노테이션을 한 텍스트 내에서 자유롭게 결합할 수 있기 때문에, 복잡한 텍스트 레이아웃이나 디자인을 구현할 때 매우 유용합니다.

---

이렇게 AnnotatedString을 사용하면 Compose에서 매우 유연하고, 스타일을 세밀하게 조정할 수 있는 텍스트 UI를 만들 수 있습니다.

 

 

[기본] Compose 특정부분에 Bold style적용

긴 설명 필요없이 예시 코드를 보면서 이해하겠습니다!

 

Text(
    modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp),
    text = buildAnnotatedString {
        append("123")
        withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)){
            append("456")
        }
        append("789")
    }
)

 

 

[심화] Compose 특정부분에 ClickEvent 추가

긴 설명 필요없이 예시 코드를 보면서 이해하겠습니다!

 

HyperLink

@Preview(showBackground = true)
@Composable
fun HyperlinkExample() {
    val annotatedString = buildAnnotatedString {
        append("For more information, visit ")

        // addStringAnnotation을 사용하여 "Click Here" 텍스트에 URL 애노테이션 추가
        pushStringAnnotation(
            tag = "URL",
            annotation = "https://www.example1.com" // 클릭 시 URL을 사용할 수 있도록 저장
        )
        withStyle(
            style = SpanStyle(
                color = colorResource(R.color.teal_200),
                fontWeight = FontWeight.Bold
            )
        ) {
            append("Click Here1") // 스타일 적용: 파란색, 굵은 글씨
        }
        pop() // 이전 상태로 복원

        append(" for more details. ")

        // addStringAnnotation을 사용하여 "Click Here" 텍스트에 URL 애노테이션 추가
        pushStringAnnotation(
            tag = "URL",
            annotation = "https://www.example2.com" // 클릭 시 URL을 사용할 수 있도록 저장
        )
        withStyle(
            style = SpanStyle(
                color = colorResource(R.color.teal_200),
                fontWeight = FontWeight.Bold
            )
        ) {
            append("Click Here2") // 스타일 적용: 파란색, 굵은 글씨
        }
        pop() // 이전 상태로 복원
    }

    Column(modifier = Modifier.fillMaxWidth()) {
        val context = LocalContext.current

        // ClickableText를 사용하여 링크 클릭 처리
        ClickableText(
            text = annotatedString,
            onClick = { offset ->
                // 클릭된 위치가 애노테이션이 포함된 영역인지 확인
                annotatedString.getStringAnnotations(tag = "URL", start = offset, end = offset)
                    .firstOrNull()?.let { annotation ->
                        // URL이 클릭되었을 때의 처리
                        Toast.makeText(context, "Clicked URL: ${annotation.item}", Toast.LENGTH_LONG).show()
                    }
            }
        )
    }
}

 

 

이번에는 클릭 이벤트가 필요한 부분만 pushStringAnnotation을 통해서 클릭할떄마다 해당 Annotation을 확인하여 Toast를 출력하는 예제 입니다!

 

 

 

 

 

 

 

 

질문 또는 궁굼한 부분은 댓글을 남겨주세요! 친절하게 답변드리겠습니다!

응원의 댓글은 저에게 큰 힘이 된답니다! :)

즐거운 하루되세요!

 

깃허브 보러 놀러오세요 👇 (맞팔환영)

https://github.com/younminchan

younminchan - Overview