[Android] Compose Text

 

개요

Android에서 UI를 개발할 때 Text는 꼭 필요한 중요 요소 중의 하나이며, Jetpack Compose를 사용하면 Text를 더 쉽게 표현할 수 있다. 

 

Text

Text의 text 속성 값은 String 형식이다. 따라서 문자열 변수를 사용하거나 직접 입력이 가능하며, strings.xml에 정의한 속성 역시 사용 가능하다.

Column {
   Text(text = "Hello World")
   Text(text = stringResource(id = R.string.hello_world))
}

String 값과 strings.xml 속성을 사용하는 방법과 결과물이다. 둘 사이의 차이점은 없다.

 

 

Text Style

색상 변경

Text(
    text = stringResource(id = R.string.hello_world),
    color = Color.Blue
)

color 속성을 사용하면 텍스트의 색상을 쉽게 변경할 수 있다.

 

 

크기 변경

Text(
    text = stringResource(id = R.string.hello_world),
    fontSize = 30.sp
)

fontSize 속성을 사용하면 텍스트의 크기를 쉽게 변경할 수 있다.

 

 

FontStyle 변경

Text(
    text = stringResource(id = R.string.hello_world),
    fontStyle = FontStyle.Normal
)
Text(
    text = stringResource(id = R.string.hello_world),
    fontStyle = FontStyle.Italic
)

• FontStyle.Normal : 일반적인 텍스트 스타일
• FontStyle.Italic : 살짝 기울어진 텍스트 스타일

 

 

FontWeight 변경

Text(
    text = stringResource(id = R.string.hello_world),
    fontWeight = FontWeight.Thin
)
Text(
    text = stringResource(id = R.string.hello_world),
    fontWeight = FontWeight.ExtraLight
)
Text(
    text = stringResource(id = R.string.hello_world),
    fontWeight = FontWeight.Light
)
Text(
    text = stringResource(id = R.string.hello_world),
    fontWeight = FontWeight.Normal
)
Text(
    text = stringResource(id = R.string.hello_world),
    fontWeight = FontWeight.Medium
)
Text(
    text = stringResource(id = R.string.hello_world),
    fontWeight = FontWeight.SemiBold
)
Text(
    text = stringResource(id = R.string.hello_world),
    fontWeight = FontWeight.Bold
)
Text(
    text = stringResource(id = R.string.hello_world),
    fontWeight = FontWeight.ExtraBold
)
Text(
    text = stringResource(id = R.string.hello_world),
    fontWeight = FontWeight.Black
)

• FontWeight.Thin : w100. 정의되어 있는 FontWeight 중 가장 얇은 스타일.
• FontWeight.ExtraLight : w200.
• FontWeight.Light : w300.
• FontWeight.Normal : w400. FontStyle을 정의하지 않았을 때 Default 값.
• FontWeight.Medium : w500.
• FontWeight.SemiBold : w600.
• FontWeight.Bold : w700.
• FontWeight.ExtraBold : w800.
• FontWeight.Black : w900. 정의되어 있는 FontStyle 중 가장 두꺼운 스타일.

 

 

 

텍스트에 여러 스타일 추가

Composable Text는 하나의 텍스트 내에서 다른 스타일을 설정할 수 있다. 

Text(
    buildAnnotatedString {
       withStyle(style = SpanStyle(color = Color.Blue)) {
           append("H")
       }
       append("ello ")

       withStyle(style = SpanStyle(color = Color.Red)) {
           append("W")
       }
       append("orld")
    }
)

SpanStyle에서 다양한 속성을 정의할 수 있기 때문에 색상뿐만 아니라, 위에서 제시한 크기, FontWeight 등을 정의할 수 있다.

 

 

 

Brush를 통한 고급 스타일 사용자 설정

Brush API를 TextStyle, SpanStyle 등과 함께 사용하면 더욱 멋진 텍스트를 간단하게 만들 수 있다. 

val gradientColors = listOf(Color.Cyan, Color.Blue, Color.DarkGray )

Text(
    text = stringResource(id = R.string.hello_world),
    style = TextStyle(
         brush = Brush.linearGradient(
             colors = gradientColors
         )
   )
)

 

 

Text Align

Text(
    modifier = Modifier.width(100.dp),
    text = stringResource(id = R.string.hello_world),
    textAlign = TextAlign.Start
)
Text(
    modifier = Modifier.width(100.dp),
    text = stringResource(id = R.string.hello_world),
    textAlign = TextAlign.Center
)
Text(
    modifier = Modifier.width(100.dp),
    text = stringResource(id = R.string.hello_world),
    textAlign = TextAlign.End
)

가장 많이 사용하는 정렬 방식으로 세 가지가 있다. Text 라인 수와 Width 값에 따라 정렬되는 모습을 볼 수 있다.

• TextAlign.Start : Default 정렬 값. 왼쪽 정렬.
• TextAlign.Center : 중앙 정렬.
• TextAlign.End : 오른쪽 정렬.

 

 

 

결론

최근 회사에서 진행하는 프로젝트를 Compose로 Migration 작업하고 있다. 개인적인 생각으로 xml에서 정의할 때 사용했던 모든 속성은 당연하게도 Compose로 쉽게 정의할 수 있다고 생각되며, 아울러 xml을 사용할 때 불편했던 점을 Compose로 쉽게 구현할 수 있게 개선했다는 느낌을 많이 받았다. 기존에 정의한 View를 Compose로 Migration 하는 작업이 초반에는 생산성이 떨어질 수 있지만 조금 익숙해지면 xml보다 더 높은 생산성을 가질 수 있을 것이라고 기대된다.

 

---

참고 자료 :

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

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