텍스트 스타일 지정

Text 컴포저블에는 콘텐츠의 스타일을 지정할 수 있는 여러 매개변수가 선택사항으로 제공됩니다. 아래에는 가장 일반적인 텍스트 사용 사례를 다루는 매개변수가 나와 있습니다. Text의 모든 매개변수는 Compose 텍스트 소스 코드를 참고하세요.

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

일반적인 텍스트 스타일 지정

다음 섹션에서는 텍스트 스타일을 지정하는 일반적인 방법을 설명합니다.

텍스트 색상 변경

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

단어

텍스트 크기 변경하기

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

단어

텍스트를 기울임꼴로 표시

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

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

단어

텍스트를 굵게 표시

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

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

단어

그림자 추가

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

@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
            )
        )
    )
}
TextSnippets.kt

단어

텍스트에 여러 스타일 추가

동일한 Text 컴포저블 내에서 다른 스타일을 설정하려면 임의의 주석 스타일로 주석을 달 수 있는 문자열인 AnnotatedString를 사용합니다.

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

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

TextStyle는 Text 컴포저블에서 사용되는 반면 SpanStyle 및 ParagraphStyle는 AnnotatedString에서 사용됩니다. 단락의 여러 스타일에 관한 자세한 내용은 단락에서 여러 스타일 추가하기를 참고하세요.

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")
        }
    )
}
TextSnippets.kt

단어

Brush로 고급 스타일 지정 사용 설정

고급 텍스트 스타일 지정을 사용 설정하려면 Brush API를 TextStyle 및 SpanStyle와 함께 사용하면 됩니다. 일반적으로 TextStyle 또는 SpanStyle를 사용하는 모든 위치에서 이제 Brush도 사용할 수 있습니다.

텍스트 스타일 지정에 브러시 사용

TextStyle 내에서 내장된 브러시를 사용하여 텍스트를 구성합니다. 예를 들어 다음과 같이 텍스트에 linearGradient 브러시를 구성할 수 있습니다.

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

정의된 색상 목록과 함께 Brush API의 `linearGradient` 함수 사용
그림 2. 정의된 색상 목록과 함께 Brush API의 linearGradient 함수 사용

이 특정 색 구성표나 색상 스타일로 제한되지는 않습니다. 강조 표시할 간단한 예는 제공되지만 내장된 브러시 또는 SolidColor를 사용하여 텍스트를 보정할 수도 있습니다.

통합

Brush를 TextStyle 및 SpanStyle와 함께 사용할 수 있으므로 TextField 및 buildAnnotatedString와 원활하게 통합됩니다.

TextField 내에서 브러시 API를 사용하는 방법에 관한 자세한 내용은 Brush API로 입력 스타일 지정을 참고하세요.

SpanStyle를 사용한 추가 스타일 지정

텍스트 범위에 브러시 적용

텍스트의 일부에만 브러시를 적용하려면 원하는 브러시 및 그래디언트와 함께 buildAnnotatedString 및 SpanStyle API를 사용합니다.

Text(
    text = buildAnnotatedString {
        append("Do not allow people to dim your shine\n")
        withStyle(
            SpanStyle(
                brush = Brush.linearGradient(
                    colors = rainbowColors
                )
            )
        ) {
            append("because they are blinded.")
        }
        append("\nTell them to put some sunglasses on.")
    }
)
TextSnippets.kt

텍스트 스타일로 linearGradient와 함께 기본 브러시를 사용합니다.
그림 4. linearGradient와 함께 기본 브러시를 Text 스타일로 사용
텍스트 범위의 불투명도

특정 텍스트 범위의 불투명도를 조정하려면 SpanStyle의 선택적 alpha 매개변수를 사용하세요. 텍스트의 두 부분에 동일한 브러시를 사용하고 상응하는 스팬의 알파 매개변수를 변경합니다. 코드 샘플에서 텍스트의 첫 번째 범위는 절반 불투명도(alpha =.5f)로 표시되고 두 번째 텍스트 범위는 최대 불투명도 (alpha = 1f)로 표시됩니다.

val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
TextSnippets.kt

buildAnnotatedString 및 SpanStyle의 알파 매개변수를 linearGradient와 함께 사용하여 텍스트 범위에 불투명도를 추가합니다.
그림 5. buildAnnotatedString 및 SpanStyle의 알파 매개변수와 함께 linearGradient를 사용하여 텍스트 범위에 불투명도를 추가합니다.

추가 리소스

추가 맞춤설정 예는 Compose 텍스트 색상 지정 브러시 업 블로그 게시물을 참고하세요. Brush가 Animations API와 통합되는 방식에 관해 자세히 알아보려면 Compose에서 브러시 텍스트 색상 지정 애니메이션을 참고하세요.

텍스트에 마키 효과 적용

컴포저블에 basicMarquee 수정자를 적용하여 애니메이션 스크롤 효과를 생성할 수 있습니다. 마키 효과는 콘텐츠가 너무 넓어서 사용 가능한 제약 조건에 맞지 않을 때 발생합니다. 기본적으로 basicMarquee에는 특정 구성 (예: 속도 및 초기 지연)이 설정되어 있지만 이러한 매개변수를 수정하여 효과를 맞춤설정할 수 있습니다.

다음 스니펫은 Text 컴포저블에 기본 마키 효과를 구현합니다.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun BasicMarqueeSample() {
    // Marquee only animates when the content doesn't fit in the max width.
    Column(Modifier.width(400.dp)) {
        Text(
            "Learn about why it's great to use Jetpack Compose",
            modifier = Modifier.basicMarquee(),
            fontSize = 50.sp
        )
    }
}
TextSnippets.kt

그림 6. 텍스트에 적용된 basicMarquee 수정자입니다.