Compose의 텍스트

텍스트는 모든 UI의 중심 요소이며 Jetpack Compose를 사용하면 텍스트를 더 쉽게 표시하거나 쓸 수 있습니다. Compose는 기본 요소의 컴포지션을 활용합니다. 즉 특정 컴포저블 디자인과 로직이 원하는 방식으로 작동하도록 속성과 메서드를 덮어쓰거나 큰 클래스를 확장할 필요가 없습니다.

기본적으로 Compose는 텍스트를 표시하고 사용자 입력을 처리하는 기본 구조인 BasicTextBasicTextField를 제공합니다. 상위 수준에서 Compose는 TextTextField를 제공하며 이 컴포저블은 머티리얼 디자인 가이드라인을 따릅니다. 이 컴포저블은 디자인과 분위기가 Android 사용자에게 적합하고, 코드를 많이 작성하지 않고도 간단히 맞춤설정할 수 있는 다른 옵션이 포함되어 있으므로 이 컴포저블을 사용하는 것이 좋습니다.

텍스트 표시

텍스트를 표시하는 가장 기본적인 방법은 String을 인수로 Text 컴포저블을 사용하는 것입니다.

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

검은색 일반 텍스트로 표시된 'Hello World' 문구

리소스의 텍스트 표시

동일한 문자열을 Android 뷰와 공유하고 앱 국제화를 준비할 수 있도록 Text 값을 하드코딩하는 대신 문자열 리소스를 사용하는 것이 좋습니다.

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

텍스트 스타일 지정

Text 컴포저블에는 콘텐츠의 스타일을 지정할 수 있는 여러 매개변수가 선택사항으로 제공됩니다. 아래에는 가장 일반적인 텍스트 사용 사례가 포함된 매개변수가 표시되어 있습니다. Text의 모든 매개변수를 보려면 Compose 텍스트 소스 코드를 참고하시기 바랍니다.

이 매개변수 중 하나를 설정할 때마다 전체 텍스트 값에 스타일이 적용됩니다. 동일한 줄 또는 단락 내에서 여러 스타일을 적용해야 하는 경우 여러 인라인 스타일에 관한 섹션을 참고하세요.

텍스트 색상 변경

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

파란색 텍스트로 표시된 'Hello World' 문구

텍스트 크기 변경

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

더 큰 글자로 표시된 'Hello World' 문구

텍스트를 기울임꼴로 설정

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

기울임꼴로 표시된 'Hello World' 문구

텍스트를 굵게 표시

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

굵게 표시된 'Hello World' 문구

텍스트 정렬

textAlign 매개변수를 사용하면 Text 컴포저블 노출 영역 내에서 텍스트의 정렬을 설정할 수 있습니다.

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

  • 라틴어, 키릴어, 한글 등 왼쪽에서 오른쪽으로 쓰는 문자를 위한 Text 컨테이너의 왼쪽 가장자리
  • 아랍어, 히브리어 등 오른쪽에서 왼쪽으로 쓰는 문자를 위한 Text 컨테이너의 오른쪽 가장자리
@Preview(showBackground = true)
@Composable
fun CenterText() {
    Text("Hello World", textAlign = TextAlign.Center,
                modifier = Modifier.width(150.dp))
}

포함된 요소의 중심에 있는 'Hello World' 문구

Text 컴포저블의 텍스트 정렬을 수동으로 설정하려면 TextAlign.LeftTextAlign.Right 대신 각각 선호하는 언어 텍스트 방향에 따라 Text 컴포저블의 오른쪽 가장자리로 이동하는 TextAlign.StartTextAlign.End를 사용하는 것이 좋습니다. 예를 들어 TextAlign.End는 프랑스어 텍스트의 경우 오른쪽, 아랍어 텍스트의 경우 왼쪽으로 정렬되지만 TextAlign.Right는 사용되는 문자와 관계없이 오른쪽으로 정렬됩니다.

글꼴 작업

TextfontFamily 매개변수를 사용하면 컴포저블에 사용되는 글꼴을 설정할 수 있습니다. 기본적으로 Serif, Sans-serif, 고정폭 및 필기체 글꼴 모음이 포함됩니다.

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

Serif와 Sans-serif, 두 글꼴로 표시된 'Hello World' 문구

fontFamily 속성을 사용하여 res/fonts 폴더에 정의된 맞춤 글꼴 및 서체로 작업할 수 있습니다.

개발 환경 내 res > font 폴더의 그래픽 표현

다음 예에서는 이러한 글꼴 파일을 기반으로 fontFamily를 정의하는 방법을 보여줍니다.

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

마지막으로 이 fontFamilyText 컴포저블에 전달할 수 있습니다. fontFamily에 여러 가중치가 포함될 수 있으므로 수동으로 fontWeight를 설정하여 텍스트에 적합한 가중치를 선택할 수 있습니다.

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

여러 글꼴 가중치 및 스타일로 표시된 'Hello World' 문구

전체 앱에서 서체를 설정하는 방법을 알아보려면 테마 문서를 참고하세요.

텍스트 내 여러 스타일

동일한 Text 컴포저블 내에서 여러 스타일을 설정하려면 임의의 주석 스타일로 주석을 추가할 수 있는 문자열인 AnnotatedString을 사용해야 합니다.

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

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

TextStyleText 컴포저블에서 사용되며 SpanStyleParagraphStyleAnnotatedString에서 사용됩니다.

SpanStyleParagraphStyle의 차이점은 ParagraphStyle은 전체 단락에 적용할 수 있고 SpanStyle은 문자 수준에서 적용할 수 있다는 것입니다. 텍스트의 한 부분이 ParagraphStyle로 표시되면 이 부분은 시작과 끝에 줄 바꿈이 있는 것처럼 나머지 부분과 분리됩니다.

AnnotatedString에는 텍스트를 더 간편하게 만들 수 있는 유형 안전 빌더가 있습니다.

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

여러 인라인 스타일 변경사항이 있는 'Hello World' 문구. H는 파란색이고 W는 빨간색으로 굵게 표시됨

동일한 방법으로 단락 스타일을 설정할 수 있습니다.

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

파란색, 빨간색으로 굵게, 일반 검은색, 세 가지 스타일로 표시된 세 단락

최대 줄 수

Text 컴포저블에 표시되는 줄 수를 제한하려면 maxLines 매개변수를 설정하세요.

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

두 줄 뒤에 잘린 긴 텍스트 문구

텍스트 오버플로

긴 텍스트를 제한할 때 표시된 텍스트가 잘린 경우에만 표시되는 텍스트 오버플로를 표시할 수도 있습니다. 이렇게 하려면 textOverflow 매개변수를 설정하세요.

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

세 줄 뒤에 잘린 긴 텍스트 문구, 끝에 생략 부호가 표시됨

테마 설정

텍스트 스타일 지정에 앱 테마를 사용하려면 테마 문서를 참고하세요.

사용자 상호작용

Jetpack Compose는 Text에서 세분화된 상호작용을 사용 설정합니다. 이제 여러 컴포저블 레이아웃에서 더 유연하게 텍스트를 선택할 수 있습니다. Text 컴포저블의 부분에 수정자를 추가할 수 없으므로 텍스트의 사용자 상호작용은 다른 컴포저블 레이아웃과 다릅니다. 이 섹션에서는 사용자 상호작용을 사용 설정할 수 있는 다양한 API를 설명합니다.

텍스트 선택하기

기본적으로 컴포저블은 선택할 수 없습니다. 즉 기본적으로 사용자가 앱에서 텍스트를 선택하고 복사할 수 없습니다. 텍스트 선택 기능을 사용 설정하려면 텍스트 요소를 SelectionContainer 컴포저블로 래핑해야 합니다.

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}

사용자가 선택한 짧은 텍스트 문구

선택 가능한 영역의 특정 부분에서 선택 기능을 사용 중지해야 하는 경우도 있습니다. 이렇게 하려면 선택 불가능한 부분을 DisableSelection 컴포저블로 래핑해야 합니다.

@Composable
fun PartiallySelectableText() {
    SelectionContainer {
        Column {
            Text("This text is selectable")
            Text("This one too")
            Text("This one as well")
            DisableSelection {
                Text("But not this one")
                Text("Neither this one")
            }
            Text("But again, you can select this one")
            Text("And this one too")
        }
    }
}

긴 텍스트 문구 사용자가 문구 전체를 선택하려고 했지만 두 줄에 DisableSelection이 적용되어 선택되지 않았습니다.

텍스트에서 클릭 위치 가져오기

Text의 클릭을 수신 대기하려면 clickable 수정자를 추가하면 됩니다. 하지만 Text 컴포저블 내에서 클릭 위치를 가져오려면 텍스트의 부분에 따라 여러 작업이 있는 경우 ClickableText를 대신 사용해야 합니다.

@Composable
fun SimpleClickableText() {
    ClickableText(
        text = AnnotatedString("Click Me"),
        onClick = { offset ->
            Log.d("ClickableText", "$offset -th character is clicked.")
        }
    )
}

주석이 추가된 클릭

사용자가 Text 컴포저블을 클릭할 때 예를 들어 브라우저에서 열리는 특정 단어에 연결된 URL과 같이 Text 값의 부분에 정보를 추가해야 하는 경우도 있습니다. 이렇게 하려면 태그(String), 항목(String), 텍스트 범위를 매개변수로 사용하는 주석을 추가해야 합니다. AnnotatedString에서 이러한 주석을 태그 또는 텍스트 범위로 필터링할 수 있습니다. 예를 들면 다음과 같습니다.

@Composable
fun AnnotatedClickableText() {
    val annotatedText = buildAnnotatedString {
        append("Click ")

        // We attach this *URL* annotation to the following content
        // until `pop()` is called
        pushStringAnnotation(tag = "URL",
                             annotation = "https://developer.android.com")
        withStyle(style = SpanStyle(color = Color.Blue,
                                    fontWeight = FontWeight.Bold)) {
            append("here")
        }

        pop()
    }

    ClickableText(
        text = annotatedText,
        onClick = { offset ->
            // We check if there is an *URL* annotation attached to the text
            // at the clicked position
            annotatedText.getStringAnnotations(tag = "URL", start = offset,
                                                    end = offset)
                .firstOrNull()?.let { annotation ->
                    // If yes, we log its value
                    Log.d("Clicked URL", annotation.item)
                }
        }
    )
}

텍스트 입력 및 수정

TextField를 사용하면 사용자가 텍스트를 입력하고 수정할 수 있습니다. TextField 구현에는 두 가지 수준이 있습니다.

  1. TextField는 머티리얼 디자인 구현입니다. 이 구현은 머티리얼 디자인 가이드라인을 따르므로 이 구현을 선택하는 것이 좋습니다.
  2. BasicTextField를 사용하여 사용자가 하드웨어 또는 소프트웨어 키보드를 통해 텍스트를 수정할 수 있지만 힌트나 자리표시자와 같은 장식은 제공되지 않습니다.
@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

'Hello'라는 단어가 포함된 수정 가능한 텍스트 입력란. 이 입력란에는 수정할 수 없는 'label' 라벨이 있습니다.

@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

수정 가능한 텍스트 입력란, 보라색 테두리와 라벨이 있음

TextField 스타일 지정

TextFieldBasicTextField는 맞춤설정할 수 있는 많은 공통 매개변수를 공유합니다. TextField의 전체 목록은 TextField 소스 코드에서 확인할 수 있습니다. 다음은 유용한 매개변수의 일부 목록입니다.

  • singleLine
  • maxLines
  • textStyle
@Composable
fun StyledTextField() {
    var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = value,
        onValueChange = { value = it },
        label = { Text("Enter text") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}

여러 줄의 TextField, 수정 가능한 두 줄과 라벨이 있음

디자인이 Material TextField 또는 OutlineTextField를 호출하는 경우 BasicTextField보다 TextField를 사용하는 것이 좋습니다. 하지만 머티리얼 사양의 장식이 필요하지 않은 디자인을 빌드하는 경우 BasicTextField를 사용해야 합니다.

키보드 옵션

TextField를 사용하면 키보드 레이아웃과 같은 키보드 구성 옵션을 설정하거나 키보드에서 지원하는 경우 자동 수정을 사용 설정할 수 있습니다. 소프트웨어 키보드가 여기에 제공된 옵션을 준수하지 않을 경우 일부 옵션이 보장되지 않을 수도 있습니다. 다음은 지원되는 키보드 옵션의 목록입니다.

  • capitalization
  • autoCorrect
  • keyboardType
  • imeAction

형식 지정

TextField를 사용하면 입력 값에 시각적 형식을 설정할 수 있습니다. 예를 들어 비밀번호를 나타내는 문자를 *로 바꾸거나 신용카드 번호의 4자리마다 하이픈을 삽입할 수 있습니다.

@Composable
fun PasswordTextField() {
    var password by rememberSaveable { mutableStateOf("") }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Enter password") },
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}

비밀번호 텍스트 입력란, 텍스트 마스크가 표시됨

VisualTransformSamples 소스 코드에서 더 많은 예를 확인할 수 있습니다.