Jetpack Compose Text 1편

 이번에는 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은 문자 수준 적용