[Jetpack Compose] 텍스트의 일부분 스타일 변경하기

컴포즈에서 텍스트의 일부분만 스타일을 변경해야할 일이 생겼다

html에서는 span 태그를 사용해 변경할 일부분의 텍스트만 따로 스타일을 적용했었는데 compose에서는 어떻게 해야할지 몰랐다

구글링을 해보니 AnnotatedString을 사용해서 구현하는 것을 알게 되었다

 

https://developer.android.com/develop/ui/compose/text/style-text?hl=ko

텍스트 스타일 지정  |  Jetpack Compose  |  Android Developers

buildAnnotatedString

@Params  builder : AnnotatedString.Builder.() -> Unit

@Return AnnotatedString

 

함수 buildAnnotatedString를 살펴보니 다음과 같았다

buildAnnotatedString를 실행하면 새로운 AnnotatedString.Builder()가 생성되고, 람다 실행을 통해서 이 Builder에 스타일과 텍스트 를 적용 후 마지막에 toAnnotatedString()으로 스타일이 적용된 AnnotatedString를 리턴한다

 

나의 경우에는 아래와 같이 적용했다

 

 

다른 스타일을 적용할 텍스트는 withStyle의 속성 spanStyle로 적용할 스타일을 적용한 후, 적용할 텍스트를 append로 붙여준다

적용 결과 다음과 같이 잘 적용이 되었음을 볼 수 있다

 

확대해서 캡쳐했더니 화질이 낮아짐...

 

google developers를 보니까 그라데이션, 그림자, 마키 등 여러가지 많은 스타일들을 쉽게 적용할 수 있었다

compose 짱...