안드로이드 개발 (17) Compose Text 1편

안녕하세요 안드로이드 개발자 Loner입니다. Compose 연구에 푹 빠져사는 요즘 새로운 세계를 맛보고 있어서 즐거운것 같습니다. 이번에는 Compose의 텍스트에 관해 정리를 해봤습니다.

Compose 의 텍스트

- Compose는 텍스트를 표시하고 사용자 입력을 처리하는 기본 구조인 BasicText 및 BasicTextField를 제공함.

- 상위 수준에서 Compose는 Text 및 TextField를 제공하며 머티리얼 디자인를 따름

(위 Composable은 디자인과 분위기가 Android 사용자에게 적합하며 쉽게 커스텀 할 수 있는 옵션이 포함되어 있으므로사용을 권장함)

1. 기본 텍스트 표시

 

텍스트를 표시하는 가장 기본적인 방법은 Text Composable을 사용하는 것입니다.

 

예제 1.

@Composable
fun SimpleText() {
Text("Hello World")
}

 

예제 2. 문자열 리소스를 사용하는 예제

@Composable
fun StringResourceText() {
Text(stringResource(R.string.hello_world))
}

 

예제1,2 결과

 

2. 텍스트 스타일 지정

Text Composable에는 콘텐츠의 스타일을 지정할 수 있는 여러 매개변수가 있습니다.

이 매개변수 중 하나를 설정할 때마다 전체 텍스트 값에 스타일이 적용됩니다. 

 

Text의 모든 매개변수를 보려면 아래링크를 참고하시기 바랍니다.

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Text.kt;l=88?hl=ko 

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Text.kt;l=88?hl=ko

 

 

에제1. 텍스트 색상 변경

@Composable
fun BlueText() {
Text("Hello World", color = Color.Blue)
}

예제1. 결과

 

 

 

 

 

예제2. 텍스트 크기 변경

@Composable
fun BigText() {
Text("Hello World", fontSize = 30.sp)
}

예제2. 결과

 

 

 

 

 

예제3. 텍스트를 기울임꼴로 설정

@Composable
fun ItalicText() {
Text("Hello World", fontStyle = FontStyle.Italic)
}

 

예제3. 결과

 

 

 

 

 

 

예제4. 스트를 굵게 표시

@Composable
fun BoldText() {
Text("Hello World", fontWeight = FontWeight.Bold)
}

예제4. 결과

 

 

 

 

 

 

에제5. 텍스트 정렬

@Preview(showBackground = true)
@Composable
fun CenterText() {
Text("Hello World", textAlign = TextAlign.Center,
modifier = Modifier.width(150.dp))
}

- textAlign 매개변수를 사용하면 텍스트의 정렬을 설정할 수 있음

- 기본적으로 Text는 콘텐츠 값에 따라 자연 텍스트 정렬을 선택함

(ex: 라틴어, 키릴어, 한글 등 왼쪽에서 오른쪽으로 쓰는 알파벳을 위한 Text 컨테이너의 왼쪽 가장자리)

(ex2: 아랍어, 히브리어 등 오른쪽에서 왼쪽으로 쓰는 알파벳을 위한 Text 컨테이너의 오른쪽 가장자리)

-TextAlign.Right, TextAlign.Lift 보다 언어 텍스트 방향에 따라 Text 이동하는 TextAlign.Start와 TextAlign.End를 사용하는 것을 권장함

 

 

예제5. 결과

 

 

 

 

 

3. font

- Text의 fontFamily 매개변수를 사용하면 Composable에 사용되는 글꼴을 관리할 수 있음

- 기본적으로 Serif, Sans-serif, 고정폭 및 필기체 글꼴 모음이 포함

 

예제

@Composable
fun DifferentFonts() {
Column {
Text("Hello World", fontFamily = FontFamily.Serif)
Text("Hello World", fontFamily = FontFamily.SansSerif)
}
}

결과

 

 

fontFamily 속성을 사용하여 res/fonts 폴더에 정의된 맞춤 font로 작업할 수 있음

 

예제

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)
}

- fontFamily를 Text 컴포저블에 전달할 수 있습니다.

- fontFamily에 수동으로 fontWeight를 설정하여 텍스트에 적합한 가중치를 선택할 수 있습니다.

 

결과

 

4. Text Composable 내의 여러 스타일 설정 

동일한 Text 컴포저블 내에서 여러 스타일을 설정하려면 AnnotatedString을 사용해야 합니다.

AnnotatedString은 다음 항목이 포함된 데이터 클래스입니다.

• Text 값
• SpanStyleRange의 List: 텍스트 값 내 위치 범위가 포함되는 인라인 스타일 지정과 동일함
• ParagraphStyleRange의 List: 텍스트 정렬, 텍스트 방향, 행 간격, 텍스트 들여쓰기 스타일 지정

TextStyle은 Text 컴포저블에서 사용되며

SpanStyle 및 ParagraphStyle은 AnnotatedString에서 사용됩니다.

 

SpanStyle과 ParagraphStyle의 차이점은

ParagraphStyle은 전체 단락에 적용할 수 있고

SpanStyle은 문자 수준에서 적용할 수 있다는 것입니다.

 

 

예제1. 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")
})
}

예제1.결과

 

 

 

예제2.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")
}
})
}

 

-텍스트의 한 부분이 ParagraphStyle로 표시되면 이 부분은 시작과 끝에 줄 바꿈이 있는 것처럼 나머지 부분과 분리됨

 

예제2. 결과

 

5. 최대 줄 수

 

- Text Composable에 표시되는 줄 수를 제한하려면 maxLines 매개변수를 설정

 

@Composable
fun LongText() {
Text("hello ".repeat(50), maxLines = 2)
}

 

 

6. 텍스트 오버플로

- 긴 텍스트를 제한할 때 표시된 텍스트가 잘린 경우에만 표시되는 텍스트 오버플로를 표시할 수 있음

- textOverflow 매개변수를 설정하면됨

 

@Composable
fun OverflowedText() {
Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
}

 

 

7. 정리 

- Compose 의 Text Composable은 기본적으로 머티리얼 디자인 가이드에 따라 구현이 됨

- Text Composable의 매개변수로 스타일을 지정할 수 있음 크기, 색깔, 기울기, 정렬, 굵기,최대 줄수, 오버플로우 등등

- RTL, LTR 설정 컨텍스트에 따라 정렬이 자연적으로 달라지게 되어있음 (Left,Right 보다 Start,End 사용을 권장)

- font도 fontFamily 패러미터로 쉽게 설정가능, fontWeight 패러미터로 가중치 수동으로 설정가능

- Text Composable 내의 글자마다 설정을 다르게 하고 싶으면 AnnotatedString를 사용

    ->ParagraphStyle은 전체단락 , SpanStyle은 문자 수준 적용

 

이상 Text 1편 정리입니다. 다음은 2편으로 이어서 작성 예정입니다.

기존 방식에 비해서 매개변수로 너무 쉽게 설정이 가능해서 작은일에 괜히 시간 소모 되는일이 많이 줄어들거라 예상합니다.

 

 

이전 Compose 정리 내용 

https://gift123.tistory.com/33?category=967702 

안드로이드 개발 (8) Compose 이해 정리

https://gift123.tistory.com/34?category=967702 

안드로이드 개발 (9) Compose 상태 관리

 

https://gift123.tistory.com/38?category=967702 

안드로이드 개발 (10) Compose Composable Lifecycle

https://gift123.tistory.com/39?category=967702 

안드로이드 개발 (11) Compose Side-effects

https://gift123.tistory.com/41?category=967702 

안드로이드 개발 (13) Layout in Compose 1편

https://gift123.tistory.com/42?category=967702 

안드로이드 개발 (14) Layout in Compose 2편

https://gift123.tistory.com/43?category=967702

안드로이드 개발 (15) Theming in Compose

https://gift123.tistory.com/44

안드로이드 개발 (16) Compose Lists