Text
컴포저블에는 콘텐츠의 스타일을 지정할 수 있는 여러 매개변수가 선택사항으로 제공됩니다.
아래에는 가장 일반적인 텍스트 사용 사례를 다루는 매개변수가 나와 있습니다.
Text
의 모든 매개변수는 텍스트 작성을 참고하세요.
소스 코드를 참조하세요.
이 매개변수 중 하나를 설정할 때마다 전체 텍스트 값에 스타일이 적용됩니다. 같은 줄 내에서 여러 스타일을 적용해야 하는 경우 또는 여러 인라인에 대한 섹션 참조 스타일을 선택합니다.
일반 텍스트 스타일 지정
다음 섹션에서는 텍스트 스타일을 지정하는 일반적인 방법을 설명합니다.
텍스트 색상 변경
@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) }
그림자 추가
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 ) ) ) }
텍스트에 여러 스타일 추가
동일한 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") } ) }
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 ) ) )
![정의된 색상 목록과 함께 Brush API의 `linearGRadient` 함수를 사용합니다.](https://developer.android.google.cn/static/develop/ui/compose/images/text-designmain.png?authuser=9&hl=ko)
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.") } )
![linearGRadient를 Text에 스타일로 사용하는 기본 브러시를 사용합니다.](https://developer.android.google.cn/static/develop/ui/compose/images/text-style.png?authuser=9&hl=ko)
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 ❤️") } }
![buildAnnotatedString 및 SpanStyle의 알파 매개변수를 linearGRadient와 함께 사용하여 텍스트 범위에 불투명도를 추가합니다.](https://developer.android.google.cn/static/develop/ui/compose/images/text-opacity.png?authuser=9&hl=ko)
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 ) } }
그림 6. 텍스트에 적용되는 basicMarquee
수정자입니다.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- 단락 스타일 지정
- Compose의 Material Design 2
- 그래픽 수정자