Jetpack Compose theming – 텍스트 작업

텍스트로 작업할 때, Text 컴포저블을 사용하여 텍스트를 표시하고, 텍스트 입력을 위해 TextField 및 OutlinedTextField를 사용한다 그리고 텍스트에 단일 스타일을 적용하기 위해 TextStyle을 사용한다. AnnotatedString을 사용하여 텍스트에 여러 스타일을 적용할 수 있다.

이전 섹션의 색상에서 보았던 것처럼, 텍스트를 표시하는 머티리얼 컴포넌트는 커스터마이징 한 타이포그래피 테마를 선택한다.

Button(...) {
  Text("This text will use MaterialTheme.typography.button style by default")
}

이를 구현하는 것은 색상작업에서 봤던 것처럼, 기본 매개변수를 사용하는 것보다는 약간 더 복잡하다. 이는 컴포넌트가 텍스트 자체를 표시하지 않는 경향이 있기 때문인데, 좀 더 정확히 말하자면 Text 컴포저블에 전달할 수 있는 ‘Slot API’를 제공하기 때문이다. 그렇다면 컴포넌트는 어떻게 타이포그래피 테마 스타일을 설정할까? 내부적으로는 ProvideTextStyle 컴포저블(자체적으로 CompositionLocal을 사용함)을 사용하여 “현재” TextStyle을 설정한다.

예를들면 컴포즈의 Button 및 Text 클래스들이 있다.

@Composable
fun Button(
    text: @Composable RowScope.() -> Unit
) {
  ...
  ProvideTextStyle(MaterialTheme.typography.button) { // 현재 텍스트 스타일 지정
    ...
    text()
  }
}


@Composable
fun Text(
    style: TextStyle = LocalTextStyle.current // ProvideTextStyle에서  get the value set by ProvideTextStyle
) { ...

텍스트 스타일 테마에 적용하기

색상과 마찬가지로 현재 테마에서 TextStyles를 가져오는 것이 가장 좋고, 작고 일관된 스타일 세트를 사용하고 유지 관리하기 쉽게 만드는 것이 좋다. MaterialTheme.typography는 MaterialTheme 컴포저블에 설정된 Typography 인스턴스를 검색하여 정의한 스타일을 사용할 수 있도록 한다.

Text(
  style = MaterialTheme.typography.subtitle2
)

TextStyle을 커스터마이징해야 하는 경우 copy를 사용하고 (data class의) 속성을 재정의한다. 또는 Text 컴포저블이 여러 스타일 매개변수를 수용할 수 있도록 하여 TextStyle상에 덮어써지도록 한다.

Text(
  text = "Hello World",
  style = MaterialTheme.typography.body1.copy(
    background = MaterialTheme.colors.secondary
  )
)

Text(
  text = "Hello World",
  style = MaterialTheme.typography.subtitle2,
  fontSize = 22.sp // explicit size overrides the size in the style
)

앱의 많은 위치에서 TextStyles 테마를 자동으로 적용한다. 예를 들어 TopAppBar는 제목(title)을 h6라는 이름으로 스타일을 지정하고, ListItem은 기본 및 보조(secondary) 텍스트를 subtitle1 및 body2로 각각 스타일링 한다.

타이포그래피 테마 스타일을 앱의 나머지 부분에 적용해 보자. 제목에 h6을 사용하고 작성자 및 메타데이터에 body2를 사용하기 위해 FeaturedPost에서 subtitle2 및 텍스트를 사용하도록 헤더를 설정한다.

@Composable
fun Header(...) {
  ...
  Text(
    text = text,
+   style = MaterialTheme.typography.subtitle2

다양한 스타일

일부 텍스트에 여러 스타일을 적용해야 하는 경우 AnnotatedString 클래스를 사용하여 텍스트 범위에 SpanStyles를 추가하여 마크업을 적용할 수 있다. 동적으로 추가하거나 DSL 구문을 사용하여 콘텐츠를 생성할 수 있다.

val text = buildAnnotatedString {
  append("This is some unstyled text\n")
  withStyle(SpanStyle(color = Color.Red)) {
    append("Red text\n")
  }
  withStyle(SpanStyle(fontSize = 24.sp)) {
    append("Large text")
  }
}

앱의 각 게시물을 설명하는 태그의 스타일을 지정한다. 현재 메타데이터의 나머지 부분과 동일한 텍스트 스타일을 사용한다. 그것들을 구별하기 위해 overline 텍스트 스타일과 배경색을 사용할 것이다. PostMetadata 컴포저블에 다음의 내용을 추가하자.

+ val tagStyle = MaterialTheme.typography.overline.toSpanStyle().copy(
+   background = MaterialTheme.colors.primary.copy(alpha = 0.1f)
+ )
post.tags.forEachIndexed { index, tag ->
  ...
+ withStyle(tagStyle) {
    append(" ${tag.toUpperCase()} ")
+ }
}

후원하기