이번에는 Compose의 텍스트에 관해 정리를 해봤습니다.
- Compose는 텍스트를 표시하고 사용자 입력을 처리하는 기본 구조인 BasicText 및 BasicTextField를 제공함
- 상위 수준에서 Compose는 Text 및 TextField를 제공하며 머티리얼 디자인를 따름
(위 Composable은 디자인과 분위기가 Android 사용자에게 적합하며 쉽게 커스텀 할 수 있는 옵션이 포함되어 있으므로 사용을 권장함)
1. 기본 Text 표시
텍스트를 표시하는 가장 기본적인 방법은 Text Composable을 사용하는 것입니다.
@Composable
fun SimpleText() {
Text("Hello World")
//문자열 리소스를 사용하는 예제
Text(stringResource(R.string.hello_world))
}2. Text Style 지정
Text Composable에는 콘텐츠의 스타일을 지정할 수 있는 여러 매개변수가 있습니다.
이 매개변수 중 하나를 설정할 때마다 전체 텍스트 값에 스타일이 적용됩니다.
- color, fontSize, fontStyle, fontWeight, textAlign
언어 텍스트 방향에 따라 Text 이동하는 TextAlign.Start와 TextAlign.End를 사용하는 것을 권장함
(TextAlign.Left, TextAlign.Right 은 가급적 제한적 사용)
@Composable
fun SimpleText() {
//텍스트 색상 변경
Text("Hello World", color = Color.Blue)
//텍스트 크기 변경
Text("Hello World", fontSize = 30.sp)
//텍스트를 기울임꼴로 설정
Text("Hello World", fontStyle = FontStyle.Italic)
//텍스트를 굵게 표시
Text("Hello World", fontWeight = FontWeight.Bold)
//텍스트 정렬
Text("Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp))
}3. Text font
- Text의 fontFamily 매개변수를 사용하면 Composable에 사용되는 글꼴을 관리할 수 있음
- 기본적으로 Serif, Sans-serif, 고정폭 및 필기체 글꼴 모음이 포함
- fontFamily 속성을 사용하여 res/fonts 폴더에 정의된 맞춤 font로 작업할 수 있음
@Composable
fun SimpleText() {
Text("Hello World", fontFamily = FontFamily.Serif)
Text("Hello World", fontFamily = FontFamily.SansSerif)
}- fontFamily를 Text 컴포저블에 전달할 수 있습니다.
- fontFamily에 수동으로 fontWeight를 설정하여 텍스트에 적합한 가중치를 선택할 수 있습니다.
val firaSansFamily = FontFamily(
Font(R.font.firasans_light, FontWeight.Light),
Font(R.font.firasans_regular, FontWeight.Normal),
Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
Font(R.font.firasans_medium, FontWeight.Medium),
Font(R.font.firasans_bold, FontWeight.Bold)
)
Column {
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal)
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal, fontStyle = FontStyle.Italic)
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Medium)
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Bold)
}
4. Text Composable 내의 여러 스타일 설정
동일한 Text 컴포저블 내에서 여러 스타일을 설정하려면 AnnotatedString을 사용해야 합니다.
AnnotatedString은 다음 항목이 포함된 데이터 클래스입니다.
- Text 값
- SpanStyleRange의 List: 텍스트 값 내 위치 범위가 포함되는 인라인 스타일 지정과 동일함
- ParagraphStyleRange의 List: 텍스트 정렬, 텍스트 방향, 행 간격, 텍스트 들여쓰기 스타일 지정
TextStyle은 Text 컴포저블에서 사용되며
SpanStyle 및 ParagraphStyle은 AnnotatedString에서 사용됩니다.
SpanStyle과 ParagraphStyle의 차이점은
ParagraphStyle은 전체 단락에 적용할 수 있고, SpanStyle은 문자 수준에서 적용할 수 있다는 것입니다.
@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") }) }
@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") } }) }
5. Text 최대 줄 수
- Text Composable에 표시되는 줄 수를 제한하려면 maxLines 매개변수를 설정
@Composable
fun LongText() {
Text("hello ".repeat(50), maxLines = 2)
}6. Text 오버플로
- 긴 텍스트를 제한할 때 표시된 텍스트가 잘린 경우에만 표시되는 텍스트 오버플로를 표시할 수 있음
- textOverflow 매개변수를 설정하면됨
@Composable
fun OverflowedText() {
Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
}**정리
- Compose 의 Text Composable은 기본적으로 머티리얼 디자인 가이드에 따라 구현이 됨
- Text Composable의 매개변수로 스타일을 지정할 수 있음 크기, 색깔, 기울기, 정렬, 굵기,최대 줄수, 오버플로우 등등
- RTL, LTR 설정 컨텍스트에 따라 정렬이 자연적으로 달라지게 되어있음 (Left,Right 보다 Start,End 사용을 권장)
- font도 fontFamily parameter로 쉽게 설정가능, fontWeight parameter로 가중치 수동으로 설정가능
- Text Composable 내의 글자마다 설정을 다르게 하고 싶으면 AnnotatedString를 사용
=> ParagraphStyle은 전체단락 , SpanStyle은 문자 수준 적용
.png)
.png)
.png)
