Compose - Text

매개변수

• text: text 내용, res/values/string 값을 사용하려면 stringResource 사용
• style: 텍스트 스타일 지정
  • textAlign: 정렬
  • textDecoration: text에 실선 등 추가. 여러 decoration을 동시에 추가할 때 TextDecoration.combine(listOf(...)) 사용
  • fontFamily: 폰트 설정. 기본 제공 font 사용 시에는 FontFamily, res/values/font의 폰트 사용 시에는 FontFamily(Font(R.font....))사용.
• maxLines: 최대 텍스트 라인 수. 라인 수를 넘어가는 텍스트는 잘림
• overflow: 영역을 넘어가는 텍스트에 대한 처리를 어떻게 할지 설정(e.g. maxLines)
  • TextOverflow.Clip: default. 넘는 부분을 자름
  • TextOverflow.Visible: 넘는 부분도 보여줌. maxLines를 무시하지는 않음
  • TextOverflow.Ellipsis: 문장 마지막 부분을 ...으로 처리
• fontWeight: 폰트 굵기 설정(FontWeight.W200)
• fontSize: 폰트 크기 설정

Text(
    text = "안녕하세요 ${name}",
    style = TextStyle(
        textAlign = TextAlign.End
    ),
)
Text(
    text = stringResource(R.string.dummy_short_text),
    style = TextStyle(
        textAlign = TextAlign.End
    ),
)
Text(
    text = stringResource(id = R.string.dummy_long_text),
    maxLines = 3, 
    overflow = TextOverflow.Visible, 
    style = TextStyle(
        textAlign = TextAlign.Justify,
        textDecoration = TextDecoration.combine( 
            listOf(
                TextDecoration.Underline,
                TextDecoration.LineThrough
            )
        ),
        fontFamily = FontFamily(Font(R.font.pretendard_variable, weight = FontWeight.ExtraBold)),
        lineHeight = 40.sp
    ),
    fontWeight = FontWeight.W200,
    fontSize = 20.sp, 
)

annotatedString

• 한 text에 조건별로 style을 지정하고 싶다면 annotatedString 사용
• Text(text = buildAnnotatedString {})
• 사용할 텍스트는 {} 내에 append("...")로 추가

Text(text = buildAnnotatedString {
    append("안녕하세요")

    // 해당 스타일의 블럭 생성
    withStyle(style = SpanStyle(
        color = Color.Blue,
        fontSize = 40.sp,
        fontWeight = FontWeight.ExtraBold,
    )
    ) {
        append("잠와 뒤지겄어요")
    }
    append("으어")
})

var words = stringResource(id = R.string.dummy_short_text)
var wordsArray = words.split(" ")
Text(text = buildAnnotatedString {
    wordsArray.forEach {
        if (it.contains("사막")) {
            withStyle(style = SpanStyle(
                color = Color.Red,
                fontSize = 40.sp,
                fontWeight = FontWeight.ExtraBold,
            )
            ) {
                append("$it ")
            }
        }
        else {
            append("$it ")
        }
    }
})

ClickableText

• 클릭이 가능한 text
• onClick에 동작 설정

ClickableText(
    text = AnnotatedString("클릭미!"),
    onClick = {
        Log.d(TAG, "TextContainer: 클릭미")
    }
)

전체 코드 실행 결과