[kotlin] Jetpack Compose에서 텍스트 및 글꼴 처리하기

11 Dec 2023

kotlin

Jetpack Compose는 안드로이드 앱을 구축하기 위한 최신형 UI 툴킷으로, UI를 빌드하고 업데이트하기 위한 선언적 방식을 사용합니다. 이 툴킷은 기존의 뷰 시스템과는 다르게 작동하며, 텍스트 및 글꼴을 다루는 방식도 다를 수 있습니다.

이 블로그에서는 Jetpack Compose를 사용하여 텍스트를 표시하고 특정 글꼴을 사용하는 방법에 대해 설명하겠습니다.

텍스트 출력하기

Jetpack Compose에서 텍스트를 출력하기 위해서는 Text 컴포넌트를 사용합니다. 다음은 간단한 예제입니다.

import androidx.compose.foundation.text.Text
import androidx.compose.runtime.Composable

@Composable
fun DisplayText() {
    Text(text = "Hello, Jetpack Compose!")
}

위 예제에서 Text 컴포넌트는 Hello, Jetpack Compose!라는 텍스트를 화면에 출력합니다.

글꼴 변경하기

글꼴을 변경하려면 FontFamily 클래스를 사용하여 글꼴을 지정한 후, 이를 TextStyle에 적용하면 됩니다. 다음은 글꼴을 변경하는 예제입니다.

import androidx.compose.foundation.text.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.sp

@Composable
fun DisplayCustomFontText() {
    val customFontFamily = FontFamily(
        fonts = listOf(
            Font(R.font.custom_font_regular, FontWeight.Normal),
            Font(R.font.custom_font_bold, FontWeight.Bold)
        )
    )

    Text(
        text = "Hello, Jetpack Compose!",
        style = TextStyle(
            fontFamily = customFontFamily,
            fontSize = 20.sp
        )
    )
}

위 예제에서는 FontFamily 클래스를 사용하여 custom_font_regular과 custom_font_bold라는 두 가지 글꼴을 정의했습니다. 그런 다음 TextStyle을 사용하여 해당 글꼴을 Text 컴포넌트에 적용했습니다.

이렇게 하면 Jetpack Compose에서 원하는 텍스트를 출력하고 특정 글꼴을 사용할 수 있습니다.

Jetpack Compose에서 텍스트 및 글꼴을 처리하는 방법에 대한 개요였습니다. 좀 더 자세한 정보는 Jetpack Compose 공식 문서를 참조하시기 바랍니다.