📌 문제상황
Jetpack Compose를 사용하여 UI를 개발하는 중, 특정 텍스트 부분에만 Bold 스타일을 적용해야 하는 상황이 발생했습니다. 예를 들어, "최대 연속\n𝑚𝑎𝑥𝐷𝑎𝑦일 달성" 이라는텍스트에서
maxDay 부분만 Bold로 표시하고 싶었습니다. 이 요구사항을 충족하기 위해서는 텍스트의 일부에만 스타일을 적용할 수 있는 방법이 필요했습니다.
📌 해결과정
Jetpack Compose에서는 Text 컴포저블을 사용하여 텍스트를 표시할 수 있지만, 기본적으로는 전체 텍스트에 동일한 스타일이 적용됩니다. 특정 부분에만 다른 스타일을 적용하기 위해서는 AnnotatedString을 활용할 수 있습니다. AnnotatedString은 텍스트의 여러 부분에 대해 서로 다른 스타일을 적용할 수 있는 기능을 제공합니다.
📌 AnnotatedString
AnnotatedString은 Jetpack Compose에서 텍스트의 다양한 부분에 서로 다른 스타일을 적용할 수 있도록 도와주는 데이터 구조입니다. 이 구조를 사용하면 텍스트의 특정 부분에 대해 글꼴, 색상, 크기, 장식(예: 밑줄, 취소선) 등 다양한 스타일을 개별적으로 설정할 수 있습니다.
- 구성 가능성: AnnotatedString은 여러 개의 텍스트 조각을 조합하여 하나의 문자열로 만들 수 있습니다. 각 조각은 서로 다른 스타일을 가질 수 있습니다.
- 스타일 적용: 텍스트의 특정 부분에 대해 스타일을 적용할 수 있어, 복잡한 텍스트 레이아웃을 쉽게 구현할 수 있습니다.
- 유연성: 다양한 스타일을 조합하여 텍스트를 구성할 수 있어, UI 디자인의 요구사항에 맞게 텍스트를 자유롭게 표현할 수 있습니다.
📌 withStyle
withStyle은 AnnotatedString을 구성할 때 특정 텍스트 조각에 스타일을 적용하는 데 사용되는 함수입니다. 이 함수는 SpanStyle 객체를 인자로 받아, 해당 스타일을 적용할 텍스트 블록을 정의합니다.
- 스타일 정의: SpanStyle 객체를 생성하여 적용할 스타일을 정의합니다. 이 객체는 글꼴 두께, 색상, 크기, 장식 등을 포함할 수 있습니다.
- 스타일 적용: withStyle 블록 내에서 append 메서드를 사용하여 스타일을 적용할 텍스트를 추가합니다.
text = buildAnnotatedString {
append("최대 연속\n")
withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
append("${maxDay}일 ")
}
append("달성")
}📌 결과
