안드로이드 Compose Text

Compose에서의 Text

-> 화면에 문자열을 출력하는 가장 기본적인 Composable

-> XML기반에서 TextView가 하던 역할이지만, 선언형 UI 패러다임에 맞게 단순하고 직관적으로 설계

-> 화면 갱시 시, 상태(state)가 바뀌면 Text도 리컴포지션에 의해 자동으로 다시 그려짐

 

특징

1. 선언형 UI : 특정 문자열을 선언하면 Compose가 알아서 처리

2. 레이아웃에 독립적 : TextView처럼 무거운 위젯이 아니라, 단순히 텍스트를 그리는 가벼운 Composable

3. 스타일 유연성 : 색상, 폰트, 크기, 정렬, 줄 수 제한 등을 쉽게 조정가능하고 스타일도 적용 가능

4. 상태와 밀접 : Text("Hello $name")의 경우 name값이 변경할때마다 리컴포지션에 의해 ui 자동 갱신

 

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    // 색상 지정 -> color 파라미터에 Rolor.Red 설정
    Text(color = Color.Red, text = "Hello $name")

    // Color 객체를 이용해서 해쉬값으로 색상 전달
    Text(color = Color(0xffff9944), text = "Hello $name")

    // fontSize 파라미터에 30.sp 전달
    Text(color = Color(0xffff9944), text = "Hello $name", fontSize = 30.sp)

    // fontWeight에 FontWeight.Bold 설정
    Text(color = Color(0xffff9944), text = "Hello $name", fontSize = 30.sp, fontWeight = FontWeight.Bold)

    // fontFamily에 FontFamily.Cursive 전달
    Text(
        color = Color(0xffff9944),
        text = "Hello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive
    )

    // letterSpacing에 2.sp 설정
    Text(
        color = Color(0xffff9944),
        text = "Hello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive,
        letterSpacing = 2.sp
    )

    // maxLines를 2로 지정하고 문자열 추가
    Text(
        color = Color(0xffff9944),
        text = "Hello $name\nHello $name\nHello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive,
        maxLines = 2,
        overflow = TextOverflow.Ellipsis // ...으로 말줄임 , Clip -> 남는줄 잘라냄
    )

    // textDecoration에 TextDecoration.Underline 추가
    Text(
        color = Color.Red,
        text = "Hello $name\nHello $name\nHello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive,
        maxLines = 2,
        textDecoration = TextDecoration.Underline
    )

    // textAlign을 Center로 지정
    Text(
        modifier = Modifier.width(200.dp).size(200.dp),
        color = Color.Red,
        text = "Hello $name\nHello $name\nHello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        maxLines = 2,
        textDecoration = TextDecoration.Underline,
        textAlign = TextAlign.Center,
    )
}