이 페이지에서는 단락의 텍스트에 스타일을 지정하는 방법을 설명합니다. 단락 수준 스타일 지정을 설정하려면 textAlign 및 lineHeight와 같은 매개변수를 구성하거나 자체 ParagraphStyle를 정의하면 됩니다.
텍스트 정렬 설정
textAlign 매개변수를 사용하면 Text 컴포저블 노출 영역 내에서 텍스트의 가로 정렬을 설정할 수 있습니다.
기본적으로 Text는 콘텐츠 값에 따라 자연 텍스트 정렬을 선택합니다.
- 라틴어, 키릴어, 한글 등 왼쪽에서 오른쪽으로 쓰는 문자를 위한
Text컨테이너의 왼쪽 가장자리 - 아랍어, 히브리어 등 오른쪽에서 왼쪽으로 쓰는 문자를 위한
Text컨테이너의 오른쪽 가장자리
@Composable
fun CenterText() {
Text(
"Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
)
}
Text 컴포저블의 텍스트 정렬을 수동으로 설정하려면 TextAlign.Left 및 TextAlign.Right 대신 TextAlign.Start 및 TextAlign.End를 각각 사용하는 것이 좋습니다. 기본 언어 텍스트 방향에 따라 Text 컴포저블의 오른쪽 가장자리로 확인되기 때문입니다. 예를 들어 TextAlign.End는 프랑스어 텍스트의 경우 오른쪽, 아랍어 텍스트의 경우 왼쪽으로 정렬되지만 TextAlign.Right는 사용되는 알파벳과 관계없이 오른쪽으로 정렬됩니다.
단락에 여러 스타일 추가
단락에 여러 스타일을 추가하려면 AnnotatedString에서 ParagraphStyle를 사용하면 됩니다. 임의의 주석 스타일로 주석을 달 수 있습니다.
텍스트의 일부가 ParagraphStyle로 표시되면, 이 부분은 시작과 끝에 줄 피드가 있는 것처럼 나머지 텍스트와 구분됩니다.
텍스트에 여러 스타일을 추가하는 방법에 관한 자세한 내용은 텍스트에 여러 스타일 추가를 참고하세요.
AnnotatedString에는 더 쉽게 만들 수 있는 유형 안전 빌더 buildAnnotatedString이 있습니다. 다음 스니펫은 buildAnnotatedString를 사용하여 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")
}
}
)
}
행 간격 및 패딩 조정
includeFontPadding은 텍스트의 상단 첫 번째 행과 하단 마지막 행에 있는 글꼴 측정항목을 기반으로 패딩을 추가하는 기존 속성입니다.
Compose BOM 버전 2024.01.01부터 includeFontPadding가 기본적으로 false로 설정되므로 기본 텍스트 레이아웃이 일반적인 디자인 도구와 더욱 일치합니다.
이제 lineHeight 구성 기능은 새로운 기능이 아니며 이미 Android Q부터 사용할 수 있습니다. 각 텍스트 줄에 행 간격을 배포하는 lineHeight 매개변수를 사용하여 Text의 lineHeight를 구성할 수 있습니다. 그런 다음 새 LineHeightStyle API를 사용하여 이 텍스트가 스페이스 내에서 정렬되는 방식을 세부적으로 구성하고 공백을 삭제할 수 있습니다.
정밀도를 높이려면 'sp'(조정된 픽셀) 대신 텍스트 단위 'em'(상대 글꼴 크기)을 사용하여 lineHeight를 조정할 수 있습니다. 적절한 텍스트 단위 선택에 관한 자세한 내용은 TextUnit를 참고하세요.
lineHeight 내 텍스트를 조정하고 필요한 경우 추가 공백을 자릅니다.
Text(
text = text,
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 (includeFontPadding를 false로 설정해야 자르기가 작동합니다.) 정렬 및 자르기는 텍스트 행 사이의 측정된 공간을 사용하여 모든 줄(한 행의 텍스트와 텍스트 블록의 상단 행 포함)에 공간을 보다 적절하게 배포합니다.
LineHeightStyle.Alignment는 행 간격에 의해 제공된 공간의 행을 정렬하는 방법을 정의합니다. 각 행 내에서 텍스트는 상단, 하단, 중앙 또는 비례적으로 정렬할 수 있습니다. 그런 다음 LineHeightStyle.Trim을 사용하면 텍스트의 첫 번째 행 상단과 마지막 행 하단에 추가 공간(lineHeight 및 정렬 조정에서 생성됨)을 남겨두거나 삭제할 수 있습니다. 다음 샘플에서는 정렬이 중앙(LineHeightStyle.Alignment.Center)으로 되어 있을 때 여러 행의 텍스트가 다양한 LineHeightStyle.Trim 구성에서 어떻게 표시되는지를 보여줍니다.
 |
 |
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
 |
 |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
이 변경사항의 컨텍스트, includeFontPadding가 뷰 시스템에서 작동하는 방식, Compose 및 새로운 LineHeightStyle API의 변경사항에 관한 자세한 내용은 Compose 텍스트에서 글꼴 패딩 수정 블로그 게시물을 참고하세요.
줄바꿈 삽입
LineBreak API는 텍스트를 여러 줄로 분할하는 기준을 정의합니다. Text 컴포저블의 TextStyle 블록에 원하는 줄바꿈 유형을 지정할 수 있습니다. 미리 설정된 줄바꿈 유형에는 다음이 포함됩니다.
Simple: 빠르고 기본적인 줄바꿈 텍스트 입력란에 권장됩니다.Heading- 더 느슨한 줄바꿈 규칙으로 줄바꿈 제목과 같은 짧은 텍스트에 사용하는 것이 좋습니다.Paragraph- 더 느린 고품질 줄바꿈을 사용하여 가독성을 개선합니다. 단락과 같이 대량의 텍스트에 사용하는 것이 좋습니다.
다음 스니펫은 Simple와 Paragraph를 모두 사용하여 긴 텍스트 블록에 줄바꿈 동작을 지정합니다.
TextSample(
samples = mapOf(
"Simple" to {
Text(
text = SAMPLE_LONG_TEXT,
modifier = Modifier
.width(130.dp)
.border(BorderStroke(1.dp, Color.Gray)),
fontSize = 14.sp,
style = TextStyle.Default.copy(
lineBreak = LineBreak.Simple
)
)
},
"Paragraph" to {
Text(
text = SAMPLE_LONG_TEXT,
modifier = Modifier
.width(130.dp)
.border(BorderStroke(1.dp, Color.Gray)),
fontSize = 14.sp,
style = TextStyle.Default.copy(
lineBreak = LineBreak.Paragraph
)
)
}
)
)
위 출력에서 Paragraph 줄바꿈 동작은 Simple 줄바꿈보다 시각적으로 더 균형 잡힌 결과를 생성합니다.
줄바꿈 맞춤설정
Strategy 매개변수를 사용하여 자체 LineBreak 구성을 구성할 수도 있습니다. Strategy는 다음 중 하나일 수 있습니다.
Balanced- 텍스트의 행 길이의 균형을 조정하려고 시도하며 사용 설정된 경우 자동 하이픈도 적용합니다. 시계와 같은 작은 화면에 표시되는 텍스트의 양을 최대화하는 것이 좋습니다.HighQuality- 사용 설정된 경우 하이픈 연결을 포함하여 더 읽기 쉬운 텍스트를 위해 단락을 최적화합니다.Balanced또는Simple가 아닌 모든 항목의 기본값이어야 합니다.Simple: 기본적이고 빠른 전략입니다. 하이픈 연결이 사용 설정되면 그 자체로는 한 줄에 들어가지 않는 단어에만 하이픈이 연결됩니다. 입력하는 동안 위치가 변경되지 않도록 텍스트를 수정할 때 유용합니다.
다음 스니펫은 기본 설정이 적용된 단락과 Balanced 줄바꿈 전략이 작은 화면에 최적화된 단락의 차이를 보여줍니다.
TextSample(
samples = mapOf(
"Balanced" to {
val smallScreenAdaptedParagraph =
LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
Text(
text = SAMPLE_LONG_TEXT,
modifier = Modifier
.width(200.dp)
.border(BorderStroke(1.dp, Color.Gray)),
fontSize = 14.sp,
style = TextStyle.Default.copy(
lineBreak = smallScreenAdaptedParagraph
)
)
},
"Default" to {
Text(
text = SAMPLE_LONG_TEXT,
modifier = Modifier
.width(200.dp)
.border(BorderStroke(1.dp, Color.Gray)),
fontSize = 14.sp,
style = TextStyle.Default
)
}
)
)
Balanced 줄바꿈 전략(위)과 줄바꿈 전략이 없는 단락(위쪽)으로 형식이 지정된 단락.CJK 고려사항
CJK 언어용으로 특별히 설계된 Strictness 및 WordBreak API로 LineBreak를 맞춤설정할 수도 있습니다.
CJK가 아닌 언어에서 이러한 API의 효과가 항상 표시되는 것은 아닙니다. 전반적으로 줄바꿈 규칙은 언어에 따라 정의됩니다.
Strictness는 다음 속성을 사용하여 줄바꿈의 강도를 설명합니다.
Default- 언어의 기본 브레이킹 체인지입니다.Normal또는Strict에 해당할 수 있습니다.Loose- 가장 제한이 적은 규칙입니다. 짧은 줄에 적합합니다.Normal- 줄바꿈의 가장 일반적인 규칙입니다.Strict- 가장 엄격한 줄바꿈 규칙입니다.
WordBreak은 다음과 같은 속성을 사용하여 단어 내에 줄바꿈을 삽입하는 방법을 정의합니다.
Default- 언어의 기본 브레이킹 체인지입니다.Phrase- 줄바꿈은 구문을 기반으로 합니다.
다음 스니펫은 일본어 텍스트에 Strict 엄격도와 Phrase 단어 구분 설정을 사용합니다.
val customTitleLineBreak = LineBreak(
strategy = LineBreak.Strategy.HighQuality,
strictness = LineBreak.Strictness.Strict,
wordBreak = LineBreak.WordBreak.Phrase
)
Text(
text = "あなたに寄り添う最先端のテクノロジー。",
modifier = Modifier.width(250.dp),
fontSize = 14.sp,
style = TextStyle.Default.copy(
lineBreak = customTitleLineBreak
)
)
Strictness 및 WordBreak 설정으로 형식이 지정된 텍스트 (상단)와 LineBreak.Heading로만 형식이 지정된 텍스트 (하단)입니다.여러 줄로 분할된 하이픈 텍스트
Hyphens API를 사용하면 앱에 하이픈 연결을 추가할 수 있습니다. 하이프레이션은 단어가 텍스트 줄 간에 나뉘어 있음을 나타내기 위해 대시와 유사한 구두점을 삽입하는 것을 의미합니다. 하이픈을 사용 설정하면 적절한 하이픈 연결 지점에서 단어의 음절 사이에 하이픈이 추가됩니다.
기본적으로 하이픈 연결은 사용 설정되어 있지 않습니다. 하이픈 연결을 사용 설정하려면 Hyphens.Auto를 TextStyle 블록에 매개변수로 추가합니다.
TextSample(
samples = mapOf(
"Hyphens - None" to {
Text(
text = SAMPLE_LONG_TEXT,
modifier = Modifier
.width(130.dp)
.border(BorderStroke(1.dp, Color.Gray)),
fontSize = 14.sp,
style = TextStyle.Default.copy(
lineBreak = LineBreak.Paragraph,
hyphens = Hyphens.None
)
)
},
"Hyphens - Auto" to {
Text(
text = SAMPLE_LONG_TEXT,
modifier = Modifier
.width(130.dp)
.border(BorderStroke(1.dp, Color.Gray)),
fontSize = 14.sp,
style = TextStyle.Default.copy(
lineBreak = LineBreak.Paragraph,
hyphens = Hyphens.Auto
)
)
}
)
)
사용 설정하면 다음 조건에서만 하이픈이 연결됩니다.
- 단어가 한 줄에 들어가지 않습니다.
Simple줄바꿈 전략을 사용하면 한 줄이 한 단어보다 짧은 경우에만 단어에 하이픈이 연결됩니다. - 기기에 있는 사전을 통해 적절한 하이픈 연결이 결정되므로 기기에 적절한 언어가 설정됩니다.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- 텍스트 스타일 지정
- Compose 레이아웃 기본사항
- Compose 레이아웃의 내장 기능 측정