이 페이지는 Cloud Translation API를 통해 번역되었습니다.

텍스트 스타일 지정

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

이 매개변수 중 하나를 설정할 때마다 전체 텍스트 값에 스타일이 적용됩니다. 같은 줄 내에서 여러 스타일을 적용해야 하는 경우 또는 여러 인라인에 대한 섹션 참조 스타일을 선택합니다.

일반 텍스트 스타일 지정

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

텍스트 색상 변경

@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로도 텍스트를 다듬을 수 있습니다.

통합

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

TextField 내에서 brush 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를 Text에 스타일로 사용하는 기본 브러시를 사용합니다. — **그림 4.** `linearGradient`와 함께 기본 브러시를 `Text`의 스타일로 사용

텍스트 범위의 불투명도

특정 텍스트 범위의 불투명도를 조정하려면 SpanStyle의 선택적 alpha 매개변수 다음에 같은 브러시를 사용하여 문자를 모두 채우고 해당 스팬에서 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`과 함께 사용하여 텍스트 범위에 불투명도를 추가합니다.

추가 리소스

추가 맞춤설정 예는 편지쓰기 텍스트 브러시업을 참고하세요. 색칠 블로그 게시물 Google Cloud의 Brush가 Animations API와 통합되는 방식은 브러시 텍스트 색상 애니메이션 처리 참조 작성

텍스트에 마키 효과 적용

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 수정자입니다.