이 페이지에서는
단락을 따릅니다. 단락 수준의 스타일을 설정하려면
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.Start 및 TextAlign.End 사용
Text의 오른쪽 가장자리로 확인되므로 각각 TextAlign.Right입니다.
기본 언어 텍스트 방향에 따라 컴포저블을 활용할 수 있습니다. 예를 들어 TextAlign.End는 프랑스어 텍스트의 경우 오른쪽, 아랍어 텍스트의 경우 왼쪽으로 정렬되지만 TextAlign.Right는 사용되는 알파벳과 관계없이 오른쪽으로 정렬됩니다.
단락에 여러 스타일 추가
단락에 여러 스타일을 추가하려면 ParagraphStyle를
AnnotatedString - 임의의 주석 스타일로 주석을 달 수 있습니다.
텍스트의 일부가 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 |
자세한 내용은 Compose 텍스트에서 글꼴 패딩 수정 블로그 게시물을 참고하세요.
이 변경사항의 컨텍스트, 뷰에서 includeFontPadding가 작동하는 방식에 대해 자세히 알아보기
시스템, Compose 및 새 LineHeightStyle의 변경사항
API에 액세스할 수 있습니다
줄바꿈 삽입
LineBreak API는 텍스트를 분할하는 기준을 정의합니다.
여러 줄을 사용합니다. 원하는 줄바꿈 유형을 지정할 수 있습니다.
Text 컴포저블의 TextStyle 블록 미리 설정된 줄바꿈 유형
다음이 포함됩니다.
Simple- 빠르고 기본적인 줄바꿈입니다. 텍스트 입력란에 권장됩니다.Heading- 줄바꿈이 더 느슨한 규칙을 사용합니다. Shorts 동영상에 추천됨 생성할 수 있습니다.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 고려사항
Strictness 및LineBreak
CJK 언어용으로 특별히 설계된 WordBreak API를 사용합니다.
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를 사용하면 앱에 하이픈 연결 지원을 추가할 수 있습니다.
하이픈 기호는 대시와 같은 구두점을 삽입하여
여러 줄로 나눠집니다 사용 설정하면
단어의 음절을 하이픈으로 연결할 수 있어야 합니다.
기본적으로 하이픈은 사용 설정되어 있지 않습니다. 하이픈 연결을 사용하려면
TextStyle 블록의 매개변수로 Hyphens.Auto 사용:
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 레이아웃의 내장 기능 측정