JetPack Compose 5편 : 텍스트 스타일링

컴포즈는 쓰레기인 xml과 다르게 텍스트 스타일링을 다채롭게 할 수 있다.

우선 코드를 첨부하겠다. 폰트를 다운받아 적용하는 과정은 생략하겠다.

class MainActivity : ComponentActivity() {
    @SuppressLint("InvalidColorHexValue")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        //xml은 setContentView

        val fontFamily = FontFamily(
            Font(R.font.lexend_thin, FontWeight.Thin),
            Font(R.font.lexend_light, FontWeight.Light),
            Font(R.font.lexend_black, FontWeight.Black),
            Font(R.font.lexend_bold, FontWeight.Bold),
            Font(R.font.lexend_extrabold, FontWeight.ExtraBold),
            Font(R.font.lexend_extralight, FontWeight.ExtraLight),
            Font(R.font.lexend_medium, FontWeight.Medium),
            Font(R.font.lexend_regular, FontWeight.Normal),
            Font(R.font.lexend_semibold, FontWeight.SemiBold)

        )
        setContent {
            Box(modifier = Modifier
                .fillMaxSize()
                .background(Color(0xFF101010))) {
                Text(
                    text = buildAnnotatedString {
                        withStyle(
                            style = SpanStyle(
                                color = Color.Green,
                                fontSize = 50.sp
                            )
                        ) {
                            append("J")
                        }
                        append("etpack ")
                        withStyle(
                            style = SpanStyle(
                                color = Color.Green,
                                fontSize = 50.sp
                            )
                        ) {
                            append("C")
                        }
                        append("ompose")
                    },
                    //디폴트 스타일 정의
                    color = Color.White,
                    fontSize = 30.sp,
                    fontFamily = fontFamily,
                    fontWeight = FontWeight.Bold,
                    fontStyle = FontStyle.Italic,
                    textAlign = TextAlign.Center,
                    textDecoration = TextDecoration.Underline
                )
            }
        }
    }
}

여기서 setContent부분을 집중해서 보자. 한 글자 한 글자마다 폰트의 스타일을 다르게 하기가 너무나 쉽다는 게 제트팩 컴포즈의 장점 중 하나이다.

• buildAnnotatedString
  • 여러 스타일을 한 Text 안에 적용할 수 있는 AnnotatedString을 만드는 빌더 함수
  • 즉, 한 Text 안에서 글자별로 색, 폰트, 굵기, 링크 등을 다르게 적용 가능하다

즉, 저 코드에서 J와 C만 스타일이 다르게 적용되고, 나머지 글자들은 맨 마지막에 적용해놓은 디폴트 스타일이 적용된다.

실행 결과