Compose의 텍스트

텍스트는 모든 UI의 중심 요소이며 Jetpack Compose를 사용하면 텍스트를 더 쉽게 표시하거나 쓸 수 있습니다. Compose는 기본 요소의 구성을 활용합니다. 즉, 특정 컴포저블 디자인과 로직이 원하는 방식으로 작동하도록 하기 위해 속성과 메서드를 덮어쓰거나 큰 클래스를 확장할 필요가 없습니다.

기본적으로 Compose는 텍스트를 표시하고 사용자 입력을 처리하는 기본 구조인 BasicText 및 BasicTextField를 제공합니다. 상위 수준에서 Compose는 Text 및 TextField를 제공하며 이 컴포저블은 Material Design 가이드라인을 따릅니다. 이 컴포저블은 디자인과 분위기가 Android 사용자에게 적합하고, 코드를 많이 작성하지 않고도 간단히 맞춤설정할 수 있는 다른 옵션이 포함되어 있으므로 이 컴포저블을 사용하는 것이 좋습니다.

텍스트 표시

텍스트를 표시하는 가장 기본적인 방법은 String을 인수로 Text 컴포저블을 사용하는 것입니다.

@Composable
fun SimpleText() {
    Text("Hello World")
}

리소스의 텍스트 표시

동일한 문자열을 Android 뷰와 공유하고 앱 국제화(i18n)를 준비할 수 있도록 Text 값을 하드코딩하는 대신 문자열 리소스를 사용하는 것이 좋습니다.

@Composable
fun StringResourceText() {
    Text(stringResource(R.string.hello_world))
}

텍스트 스타일 지정

Text 컴포저블에는 콘텐츠의 스타일을 지정할 수 있는 여러 매개변수가 선택사항으로 제공됩니다. 아래에는 가장 일반적인 텍스트 사용 사례가 포함된 매개변수가 표시되어 있습니다. Text의 모든 매개변수를 보려면 Compose 텍스트 소스 코드를 참고하시기 바랍니다.

이 매개변수 중 하나를 설정할 때마다 전체 텍스트 값에 스타일이 적용됩니다. 동일한 줄 또는 단락 내에서 여러 스타일을 적용해야 하는 경우 여러 인라인 스타일에 관한 섹션을 참고하세요.

텍스트 색상 변경

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}

텍스트 크기 변경

@Composable
fun BigText() {
  Text("Hello World", fontSize = 30.sp)
}

텍스트를 기울임꼴로 설정

fontStyle 매개변수를 사용하여 텍스트를 기울임꼴로 표시하거나 다른 FontStyle을 설정합니다.

@Composable
fun ItalicText() {
  Text("Hello World", fontStyle = FontStyle.Italic)
}

텍스트를 굵게 표시

fontWeight 매개변수를 사용하여 텍스트를 굵게 표시하거나 다른 FontWeight를 설정합니다.

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}

텍스트 정렬

textAlign 매개변수를 사용하면 Text 컴포저블 노출 영역 내에서 텍스트의 정렬을 설정할 수 있습니다.

기본적으로 Text는 콘텐츠 값에 따라 자연 텍스트 정렬을 선택합니다.

• 라틴어, 키릴어, 한글 등 왼쪽에서 오른쪽으로 쓰는 문자를 위한 Text 컨테이너의 왼쪽 가장자리
• 아랍어, 히브리어 등 오른쪽에서 왼쪽으로 쓰는 문자를 위한 Text 컨테이너의 오른쪽 가장자리

@Preview(showBackground = true)
@Composable
fun CenterText() {
    Text("Hello World", textAlign = TextAlign.Center,
                modifier = Modifier.width(150.dp))
}

Text 컴포저블의 텍스트 정렬을 수동으로 설정하려면 TextAlign.Left 및 TextAlign.Right 대신 각각 선호하는 언어 텍스트 방향에 따라 Text 컴포저블의 오른쪽 가장자리로 이동하는 TextAlign.Start와 TextAlign.End를 사용하는 것이 좋습니다. 예를 들어 TextAlign.End는 프랑스어 텍스트의 경우 오른쪽, 아랍어 텍스트의 경우 왼쪽으로 정렬되지만 TextAlign.Right는 사용되는 알파벳과 관계없이 오른쪽으로 정렬됩니다.

그림자

style 매개변수를 사용하면 TextStyle 유형의 객체를 설정하고 여러 매개변수(예: 그림자)를 구성할 수 있습니다. Shadow는 그림자의 색상, 오프셋 또는 Text와 관련하여 배치되는 위치, 흐리게 처리되는 정도를 나타내는 블러 반경을 수신합니다.

@Preview(showBackground = true)
@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue,
                offset = offset,
                blurRadius = 3f
            )
        )
    )
}

글꼴 작업

Text의 fontFamily 매개변수를 사용하면 컴포저블에 사용되는 글꼴을 설정할 수 있습니다. 기본적으로 Serif, Sans Serif, 고정폭 및 필기체 글꼴 모음이 포함됩니다.

@Composable
fun DifferentFonts() {
    Column {
        Text("Hello World", fontFamily = FontFamily.Serif)
        Text("Hello World", fontFamily = FontFamily.SansSerif)
    }
}

fontFamily 속성을 사용하여 res/font 폴더에 정의된 맞춤 글꼴 및 서체로 작업할 수 있습니다.

font 폴더의 그래픽 표현 " class="l10n-absolute-url-src screenshot" l10n-attrs-original-order="src,alt,width,class" src="https://developer.android.com/static/images/jetpack/compose/text-font-folder.png" width="400" />

이 예에서는 이러한 글꼴 파일에 기반하고 Font 함수를 사용하는 fontFamily를 정의하는 방법을 보여줍니다.

val firaSansFamily = FontFamily(
        Font(R.font.firasans_light, FontWeight.Light),
        Font(R.font.firasans_regular, FontWeight.Normal),
        Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
        Font(R.font.firasans_medium, FontWeight.Medium),
        Font(R.font.firasans_bold, FontWeight.Bold)
)

마지막으로 이 fontFamily를 Text 컴포저블에 전달할 수 있습니다. fontFamily에 여러 가중치가 포함될 수 있으므로 수동으로 fontWeight를 설정하여 텍스트에 적합한 가중치를 선택할 수 있습니다.

Column {
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal)
    Text(
        ..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Italic
    )
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Medium)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Bold)
}

전체 앱에서 서체를 설정하는 방법을 알아보려면 테마 문서를 참고하세요.

텍스트 내 여러 스타일

동일한 Text 컴포저블 내에서 여러 스타일을 설정하려면 임의의 주석 스타일로 주석을 추가할 수 있는 문자열인 AnnotatedString을 사용해야 합니다.

AnnotatedString은 다음 항목이 포함된 데이터 클래스입니다.

• Text 값
• SpanStyleRange의 List: 텍스트 값 내의 위치 범위가 포함되는 인라인 스타일 지정과 동일함
• ParagraphStyleRange의 List: 텍스트 정렬, 텍스트 방향, 줄 간격, 텍스트 들여쓰기 스타일 지정

TextStyle은 Text 컴포저블에서 사용되며 SpanStyle 및 ParagraphStyle은 AnnotatedString에서 사용됩니다.

SpanStyle과 ParagraphStyle의 차이점은 ParagraphStyle은 전체 단락에 적용할 수 있고 SpanStyle은 문자 수준에서 적용할 수 있다는 것입니다. 텍스트의 한 부분이 ParagraphStyle로 표시되면 이 부분은 시작과 끝에 줄 바꿈이 있는 것처럼 나머지 부분과 분리됩니다.

AnnotatedString에는 더 간편하게 만들 수 있는 유형 안전 빌더 buildAnnotatedString이 있습니다.

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

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

같은 방식으로 ParagraphStyle을 설정할 수 있습니다.

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold,
                        color = Color.Red
                    )
                ) {
                    append("World\n")
                }
                append("Compose")
            }
        }
    )
}

최대 줄 수

Text 컴포저블에 표시되는 줄 수를 제한하려면 maxLines 매개변수를 설정하세요.

@Composable
fun LongText() {
    Text("hello ".repeat(50), maxLines = 2)
}

텍스트 오버플로

긴 텍스트를 제한할 때 표시된 텍스트가 잘린 경우에만 표시되는 TextOverflow를 표시할 수도 있습니다. 이렇게 하려면 textOverflow 매개변수를 설정하세요.

@Composable
fun OverflowedText() {
    Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
}

includeFontPadding 및 lineHeight API

includeFontPadding은 텍스트의 상단 첫 번째 행과 하단 마지막 행에 있는 글꼴 측정항목을 기반으로 패딩을 추가하는 기존 속성입니다. Compose 1.2.0에서 includeFontPadding은 기본적으로 true로 설정됩니다.

이제 Compose 1.2.0에서 지원 중단된 API PlatformTextStyle을 사용하여 includeFontPadding을 false로 설정(추가 패딩을 제거함)하고 텍스트를 더 조정하는 것이 좋습니다.

이제 lineHeight 구성 기능은 새로운 기능이 아니며 이미 Android Q부터 사용할 수 있습니다. 각 텍스트 줄에 행 간격을 배포하는 lineHeight 매개변수를 사용하여 Text의 lineHeight를 구성할 수 있습니다. 그런 다음 새 LineHeightStyle API를 사용하여 이 텍스트가 스페이스 내에서 정렬되는 방식을 세부적으로 구성하고 공백을 삭제할 수 있습니다.

정밀도를 높이려면 'sp'(조정된 픽셀) 대신 텍스트 단위 'em'(상대 글꼴 크기)을 사용하여 lineHeight를 조정할 수 있습니다. 적절한 텍스트 단위 선택에 관한 자세한 내용은 여기에 설명되어 있습니다.

@Composable
fun AlignedText() {
    Text(
        text = myText,
        style = LocalTextStyle.current.merge(
            TextStyle(
                lineHeight = 2.5.em,
                platformStyle = PlatformTextStyle(
                    includeFontPadding = false
                ),
                lineHeightStyle = LineHeightStyle(
                    alignment = LineHeightStyle.Alignment.Center,
                    trim = LineHeightStyle.Trim.None
                )
            )
        )
    )
}

lineHeight 조정 외에도 이제 LineHeightStyle 실험용 API(LineHeightStyle.Alignment 및 LineHeightStyle.Trim)에 구성을 사용하여 텍스트의 중심과 스타일을 지정할 수 있습니다(Trim이 작동하려면 includeFontPadding을 false로 설정해야 함). 정렬 및 자르기는 텍스트 행 사이의 측정된 공간을 사용하여 모든 줄(한 행의 텍스트와 텍스트 블록의 상단 행 포함)에 공간을 보다 적절하게 배포합니다.

LineHeightStyle.Alignment는 행 간격에 의해 제공된 공간의 행을 정렬하는 방법을 정의합니다. 각 행 내에서 텍스트는 상단, 하단, 중앙 또는 비례적으로 정렬할 수 있습니다. 그런 다음 LineHeightStyle.Trim을 사용하면 텍스트의 첫 번째 행 상단과 마지막 행 하단에 추가 공간(lineHeight 및 정렬 조정에서 생성됨)을 남겨두거나 삭제할 수 있습니다. 다음 샘플에서는 정렬이 중앙(LineHeightStyle.Alignment.Center)으로 되어 있을 때 여러 행의 텍스트가 다양한 LineHeightStyle.Trim 구성에서 어떻게 표시되는지를 보여줍니다.

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

이 변경사항의 컨텍스트, View 시스템에서 includeFontPadding이 작동하는 방식, Compose에 적용된 변경사항, 새로운 LineHeightStyle API에 관한 자세한 내용은 Compose 텍스트에서 글꼴 패딩 수정 블로그 게시물을 참고하세요.

테마 설정

텍스트 스타일 지정에 앱 테마를 사용하려면 테마 문서를 참고하세요.

사용자 상호작용

Jetpack Compose는 Text에서 세분화된 상호작용을 사용 설정합니다. 이제 여러 컴포저블 레이아웃에서 더 유연하게 텍스트를 선택할 수 있습니다. Text 컴포저블의 부분에 수정자를 추가할 수 없으므로 텍스트의 사용자 상호작용은 다른 컴포저블 레이아웃과 다릅니다. 이 섹션에서는 사용자 상호작용을 사용 설정할 수 있는 다양한 API를 설명합니다.

텍스트 선택

기본적으로 컴포저블은 선택할 수 없습니다. 즉, 기본적으로 사용자가 앱에서 텍스트를 선택하고 복사할 수 없습니다. 텍스트 선택 기능을 사용 설정하려면 텍스트 요소를 SelectionContainer 컴포저블로 래핑해야 합니다.

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}

선택 가능한 영역의 특정 부분에서 선택 기능을 사용 중지해야 하는 경우도 있습니다. 이렇게 하려면 선택 불가능한 부분을 DisableSelection 컴포저블로 래핑해야 합니다.

@Composable
fun PartiallySelectableText() {
    SelectionContainer {
        Column {
            Text("This text is selectable")
            Text("This one too")
            Text("This one as well")
            DisableSelection {
                Text("But not this one")
                Text("Neither this one")
            }
            Text("But again, you can select this one")
            Text("And this one too")
        }
    }
}

텍스트에서 클릭 위치 가져오기

Text의 클릭을 수신하려면 clickable 수정자를 추가하면 됩니다. 하지만 Text 컴포저블 내에서 클릭 위치를 가져오려면 텍스트의 부분에 따라 여러 작업이 있는 경우 ClickableText를 대신 사용해야 합니다.

@Composable
fun SimpleClickableText() {
    ClickableText(
        text = AnnotatedString("Click Me"),
        onClick = { offset ->
            Log.d("ClickableText", "$offset -th character is clicked.")
        }
    )
}

주석이 추가된 클릭

사용자가 Text 컴포저블을 클릭할 때 예를 들어 브라우저에서 열리는 특정 단어에 연결된 URL과 같이 Text 값의 부분에 정보를 추가해야 하는 경우도 있습니다. 이렇게 하려면 태그(String), 항목(String), 텍스트 범위를 매개변수로 사용하는 주석을 추가해야 합니다. AnnotatedString에서 이러한 주석을 태그 또는 텍스트 범위로 필터링할 수 있습니다. 예를 들면 다음과 같습니다.

@Composable
fun AnnotatedClickableText() {
    val annotatedText = buildAnnotatedString {
        append("Click ")

        // We attach this *URL* annotation to the following content
        // until `pop()` is called
        pushStringAnnotation(tag = "URL",
                             annotation = "https://developer.android.com")
        withStyle(style = SpanStyle(color = Color.Blue,
                                    fontWeight = FontWeight.Bold)) {
            append("here")
        }

        pop()
    }

    ClickableText(
        text = annotatedText,
        onClick = { offset ->
            // We check if there is an *URL* annotation attached to the text
            // at the clicked position
            annotatedText.getStringAnnotations(tag = "URL", start = offset,
                                                    end = offset)
                .firstOrNull()?.let { annotation ->
                    // If yes, we log its value
                    Log.d("Clicked URL", annotation.item)
                }
        }
    )
}

텍스트 입력 및 수정

TextField를 사용하면 사용자가 텍스트를 입력하고 수정할 수 있습니다. TextField 구현에는 두 가지 수준이 있습니다.

1. TextField는 머티리얼 디자인 구현입니다. 이 구현은 머티리얼 디자인 가이드라인을 따르므로 이 구현을 선택하는 것이 좋습니다.
   • 기본 스타일이 채워집니다.
   • OutlinedTextField는 개요 스타일 버전입니다.
2. BasicTextField를 사용하여 사용자가 하드웨어 또는 소프트웨어 키보드를 통해 텍스트를 수정할 수 있지만 힌트나 자리표시자와 같은 장식은 제공되지 않습니다.

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

TextField 스타일 지정

TextField 및 BasicTextField는 맞춤설정할 수 있는 많은 공통 매개변수를 공유합니다. TextField의 전체 목록은 TextField 소스 코드에서 확인할 수 있습니다. 다음은 유용한 매개변수의 일부 목록입니다.

• singleLine
• maxLines
• textStyle

@Composable
fun StyledTextField() {
    var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = value,
        onValueChange = { value = it },
        label = { Text("Enter text") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}

디자인이 Material TextField 또는 OutlineTextField를 필요로 하는 경우 BasicTextField보다 TextField를 사용하는 것이 좋습니다. 하지만 Material 사양의 장식이 필요하지 않은 디자인을 빌드하는 경우 BasicTextField를 사용해야 합니다.

키보드 옵션

TextField를 사용하면 키보드 레이아웃과 같은 키보드 구성 옵션을 설정하거나 키보드에서 지원하는 경우 자동 수정을 사용 설정할 수 있습니다. 소프트웨어 키보드가 여기에 제공된 옵션을 준수하지 않을 경우 일부 옵션이 보장되지 않을 수도 있습니다. 다음은 지원되는 키보드 옵션의 목록입니다.

• capitalization
• autoCorrect
• keyboardType
• imeAction

형식 지정

TextField를 사용하면 입력 값에 VisualTransformation을 설정할 수 있습니다. 예를 들어 비밀번호를 나타내는 문자를 * 기호로 바꾸거나 신용카드 번호의 4자리마다 하이픈을 삽입할 수 있습니다.

@Composable
fun PasswordTextField() {
    var password by rememberSaveable { mutableStateOf("") }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Enter password") },
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}

VisualTransformSamples 소스 코드에서 더 많은 예를 확인할 수 있습니다.

입력 정리

텍스트를 수정할 때 일반적인 작업은 변경 시 선행 문자를 제거하거나 입력 문자열을 변환하는 것입니다.

모델에서는 키보드가 임의 및 대규모로 onValueChange를 각각 수정할 수 있다고 가정합니다. 예를 들어 사용자가 자동 수정을 사용하거나, 단어를 그림 이모티콘으로 대체하거나, 그 밖의 스마트 편집 기능이 있는 경우 이러한 상황이 발생할 수 있습니다. 이를 올바르게 처리하려면 onValueChange에 전달된 현재 텍스트가 onValueChange에 전달될 이전 또는 다음 값과 관련이 없다는 가정 하에 모든 변환 로직을 작성합니다.

앞의 0을 허용하지 않는 텍스트 입력란을 구현하려면 모든 값을 변경할 때 선행 0을 전부 제거하면 됩니다.

@Composable
fun NoLeadingZeroes() {
  var input by rememberSaveable { mutableStateOf("") }
  TextField(
      value = input,
      onValueChange = { newText ->
          input = newText.trimStart { it == '0' }
      }
  )
}

텍스트를 정리하는 동안 커서 위치를 제어하려면 상태의 일부로 TextField의 TextFieldValue 오버로드를 사용하세요.

다운로드 가능한 글꼴

Compose 1.2-alpha07부터 Compose 앱의 다운로드 가능한 글꼴 API를 사용하여 Google 글꼴을 비동기식으로 다운로드하고 실행할 수 있습니다.

맞춤 제공업체에서 제공하는 다운로드 가능한 글꼴은 현재 지원되지 않습니다.

프로그래매틱 방식으로 다운로드 가능한 글꼴 사용

앱 내에서 프로그래매틱 방식으로 글꼴을 다운로드하려면 다음 단계를 따르세요.

1. 종속 항목을 추가합니다.

   Groovy

   dependencies {
       ...
       implementation "androidx.compose.ui:ui-text-google-fonts:1.3.0"
   }
   

   Kotlin

   dependencies {
       ...
       implementation("androidx.compose.ui:ui-text-google-fonts:1.3.0")
   }

2. Google Fonts의 사용자 인증 정보를 사용하여 GoogleFont.Provider를 초기화합니다.

   @OptIn(ExperimentalTextApi::class)
   val provider = GoogleFont.Provider(
      providerAuthority = "com.google.android.gms.fonts",
      providerPackage = "com.google.android.gms",
      certificates = R.array.com_google_android_gms_fonts_certs
   )
   

   제공업체에서 수신하는 매개변수는 다음과 같습니다.
   • Google Fonts 글꼴 제공업체 권한
   • 제공업체의 ID를 확인하기 위한 글꼴 제공업체 패키지
   • 제공업체의 ID를 확인하는 인증서의 해시 세트 목록 JetChat 샘플 앱의 font_certs.xml 파일에서 Google Fonts 제공업체에 필요한 해시를 확인할 수 있습니다.
   앱에서 다운로드 가능한 글꼴 API를 사용하려면 ExperimentalTextApi 주석을 추가해야 합니다.
3. 다음과 같이 FontFamily를 정의합니다.

   import androidx.compose.ui.text.googlefonts.GoogleFont
   import androidx.compose.ui.text.font.FontFamily
   import androidx.compose.ui.text.googlefonts.Font
   
   val fontName = GoogleFont("Lobster Two")
   
   val fontFamily = FontFamily(
      Font(googleFont = fontName, fontProvider = provider)
   )
   

   FontWeight, FontStyle을 사용하면 글꼴 및 두께 등 글꼴의 다른 매개변수를 쿼리할 수 있습니다.

   import androidx.compose.ui.text.googlefonts.GoogleFont
   import androidx.compose.ui.text.font.FontFamily
   import androidx.compose.ui.text.googlefonts.Font
   
   val fontName = GoogleFont("Lobster Two")
   
   val fontFamily = FontFamily(
      Font(googleFont = fontName, fontProvider = provider,
           weight = FontWeight.Bold, style = FontStyle.Italic)
   )
   

4. Text 구성 가능한 함수에서 FontFamily가 사용되도록 구성합니다.

   Text(
       fontFamily = fontFamily,
       text = "Hello World!"
   )
   

   

   서체에서 FontFamily를 사용하도록 정의할 수도 있습니다.

   val MyTypography = Typography(
      body1 = TextStyle(
      fontFamily = fontFamily,
      fontWeight = FontWeight.Normal,
      fontSize = ...
   ),
      body2 = TextStyle(
      fontFamily = fontFamily,
      fontWeight = FontWeight.Bold,
      letterSpacing = ...
   ),
      h4 = TextStyle(
      fontFamily = fontFamily,
      fontWeight = FontWeight.SemiBold
      ...
   ),
   ...
   

   다음과 같이 서체를 앱의 테마로 설정합니다.

   MyAppTheme(
      typography = MyTypography
   ) {
   ...
   

JetChat 샘플 앱에서 Material3을 사용하여 Compose에서 다운로드 가능한 글꼴을 구현하는 앱의 예시를 확인하세요.

대체 글꼴

글꼴이 제대로 다운로드되지 않는 경우를 대비해 글꼴의 대체 체인을 결정할 수 있습니다. 예를 들어 다운로드 가능한 글꼴이 다음과 같이 정의되어 있는 경우

import androidx.compose.ui.text.googlefonts.Font

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
   Font(googleFont = fontName, fontProvider = provider),
   Font(googleFont = fontName, fontProvider = provider, weight = FontWeight.Bold)
)

두 가중치의 글꼴 기본값을 다음과 같이 정의할 수 있습니다.

import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.googlefonts.Font

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
   Font(googleFont = fontName, fontProvider = provider),
   Font(resId = R.font.my_font_regular),
   Font(googleFont = fontName, fontProvider = provider, weight = FontWeight.Bold),
   Font(resId = R.font.my_font_regular_bold, weight = FontWeight.Bold)
)

올바른 가져오기를 추가했는지 확인하세요.

FontFamily를 이렇게 정의하면 가중치당 하나씩 두 개의 체인이 포함된 FontFamily가 생성됩니다. 로드 메커니즘은 먼저 온라인 글꼴을 결정하려고 시도한 다음, 로컬 R.font 리소스 폴더에 있는 글꼴을 결정하려고 합니다.

구현 디버깅

글꼴이 올바르게 다운로드되고 있는지 확인하려면 디버그 코루틴 핸들러를 정의하세요. 핸들은 글꼴이 비동기적으로 로드되지 않는 경우 실행할 작업을 제공합니다.

먼저 CoroutineExceptionHandler를 만듭니다.

val handler = CoroutineExceptionHandler { _, throwable ->
   // process the Throwable
   Log.e(TAG, "There has been an issue: ", throwable)
}

그런 다음 리졸버가 새 핸들러를 사용하도록 createFontFamilyResolver 메서드에 전달합니다.

CompositionLocalProvider(
        LocalFontFamilyResolver provides createFontFamilyResolver(LocalContext.current, handler)
    ) {
        Column {
            Text(
                text = "Hello World!",
                style = MaterialTheme.typography.body1
            )
        }
    }

제공업체의 isAvailableOnDevice API를 사용하여 제공업체를 사용할 수 있는지, 인증서가 올바르게 구성되었는지 테스트할 수도 있습니다. 이렇게 하려면 제공업체가 잘못 구성되었을 때 false를 반환하는 isAvailableOnDevice 메서드를 호출하면 됩니다.

val context = LocalContext.current
LaunchedEffect(Unit) {
   if (provider.isAvailableOnDevice(context)) {
       Log.d(TAG, "Success!")
   }
}

주의사항

Google Fonts가 Android에서 새 글꼴을 제공하려면 몇 개월 정도 걸립니다. 글꼴이 fonts.google.com에 추가되는 시점과 다운로드 가능한 글꼴 API를 통해 뷰 시스템 또는 Compose에 제공되는 시점 사이에 차이가 있습니다. IllegalStateException을 사용해도 새로 추가한 글꼴이 앱에서 로드되지 않을 수 있습니다. 개발자가 다른 유형의 글꼴 로드 오류보다 이 오류를 식별할 수 있도록 Compose에 예외에 관한 설명 메시지를 추가했습니다(변경사항은 여기 참고).