소셜 및 메시지 앱의 텍스트

텍스트는 사용자가 생각을 공유하고, 감정을 표현하고, 이야기를 전하는 소셜 애플리케이션의 핵심입니다. 이 문서에서는 이모티콘, 스타일 지정, 리치 콘텐츠 통합에 중점을 두고 텍스트를 효과적으로 사용하는 방법을 살펴봅니다.

그림 이모티콘 사용하기

이모티콘은 특히 소셜 및 메시지 앱에서 현대 커뮤니케이션의 필수 요소가 되었습니다. 언어 장벽을 뛰어넘어 사용자가 감정과 아이디어를 빠르고 효과적으로 표현하는 데 도움이 됩니다

Compose에서 그림 이모티콘 지원

Android의 최신 선언형 UI 도구 키트인 Jetpack Compose는 그림 이모티콘 처리를 간소화합니다.

입력: TextField 구성요소는 이모티콘 입력을 기본적으로 지원합니다.
표시: Compose의 Text 구성요소는 그림 이모티콘을 올바르게 렌더링하여 Google Play 서비스에서 제공하는 기기와 같이 그림 이모티콘 2 호환 다운로드 가능한 글꼴 제공자를 제공하는 기기와 플랫폼에서 일관된 모양을 보장합니다.

그림 이모티콘 표시는 앱에 최신 그림 이모티콘 글꼴이 표시되는지 확인하고, 올바르게 작동하는 경우 뷰와 Compose가 모두 동일하다면 그림 이모티콘이 예상대로 표시되지 않는 문제를 해결하는 방법을 설명합니다.

뷰의 그림 이모티콘 지원

Android 뷰를 사용하는 경우 AppCompat 라이브러리 1.4 이상에서는 TextView의 플랫폼 서브클래스를 위한 그림 이모티콘 지원:

입력: EditText의 AppCompat 버전은 그림 이모티콘 입력을 기본적으로 지원합니다.
디스플레이: TextView, ToggleButton, Switch, Button, CheckedTextView, RadioButton, CheckBox, AutoCompleteTextView, MultiAutoCompleteTextView의 AppCompat 버전은 모두 그림 이모티콘 표시를 지원하므로 Google Play 서비스를 사용하는 기기와 같이 그림 이모티콘 2 호환 다운로드 가능한 글꼴 제공자를 제공하는 기기와 플랫폼에서 일관된 모양을 보장합니다.

TextView의 직접 또는 간접 서브클래스인 맞춤 뷰를 만드는 경우 플랫폼 구현이 아닌 AppCompat 구현을 확장하여 기본 이모티콘 지원을 가져옵니다. 최신 그림 이모티콘 프로그램 지원 그림 이모티콘 통합을 테스트하고 문제를 해결하고 AppCompat, 맞춤 뷰에서 그림 이모티콘 지원, 대체 글꼴 또는 글꼴 지원 확인할 수 있습니다.

그림 이모티콘 선택 도구 사용하기

Jetpack 그림 이모티콘 선택 도구는 Android 뷰로, 분류된 그림 이모티콘 목록, 고정된 변형, 최근에 사용한 그림 이모티콘 지원을 제공하며 여러 Android 버전과 기기에서 호환됩니다. 앱의 그림 이모티콘 통합을 쉽게 업그레이드할 수 있는 방법입니다.

먼저 build.gradle에서 라이브러리를 가져옵니다.

dependencies {
   implementation("androidx.emoji2:emojipicker:$version")
}

Compose에서 그림 이모티콘 선택 도구 사용

AndroidView 컴포저블을 사용하여 Compose에서 그림 이모티콘 선택 도구를 구성합니다. 이 스니펫에는 그림 이모티콘이 표시될 때를 알려주는 리스너가 포함되어 있습니다. 가 선택되었는지 확인합니다.

AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { context ->
        val emojiPickerView = EmojiPickerView(context)
        emojiPickerView.setOnEmojiPickedListener(this::updateTextField)
        emojiPickerView
    },
)

Compose 1.7에서는 ViewModel에 있을 수 있는 TextFieldState 지원을 비롯하여 BasicTextField에 많은 새로운 기능을 추가합니다.

private val emojiTextFieldState = TextFieldState()

@Composable fun EmojiTextField() {
    BasicTextField(
        state = emojiTextFieldState,
    )
}

TextFieldState를 사용하여 커서 위치에 텍스트를 삽입하거나 IME를 입력하는 것처럼 선택한 텍스트를 교체합니다.

private fun insertStringAsIfTyping(textFieldState: TextFieldState, string: String) {
    textFieldState.edit {
        replace(selection.start, selection.end, string)
        // clear selection on replace if necessary
        if (hasSelection) selection = TextRange(selection.end)
    }
}

콜백은 도우미 함수를 사용하여 BasicTextField를 업데이트할 수 있습니다.

private fun updateTextField(emojiViewItem: EmojiViewItem) {
    insertStringAsIfTyping(emojiTextFieldState, emojiViewItem.emoji)
}

뷰에서 그림 이모티콘 선택 도구 사용

그림 이모티콘 선택 도구는 지도 뷰에도 잘 맞습니다.

EmojiPickerView를 확장합니다. 원하는 경우 각 그림 이모티콘 셀의 크기에 따라 emojiGridColumns 및 emojiGridRows를 설정합니다.

<androidx.emoji2.emojipicker.EmojiPickerView
    …
    app:emojiGridColumns="9" />

커서 위치에 문자를 삽입하거나 선택한 텍스트를 바꿉니다.

// Consider unregistering/reregistering anyTextWatcher that you might have as part of this
private fun insertStringAsIfTyping(editText: EditText, string: String) {
    val stringBuffer = StringBuffer(editText.text.toString())
    val index = editText.selectionStart
    if ( !editText.hasSelection() ) {
        stringBuffer.insert(index, string)
    } else {
        stringBuffer.replace(index, editText.selectionEnd, string)
    }
    editText.setText(stringBuffer.toString())
    editText.setSelection(index + string.length)
}

선택한 그림 이모티콘에 리스너를 제공하고 이를 사용하여 EditText에 문자를 추가합니다.

// a listener example
emojiPickerView.setOnEmojiPickedListener {
   val editText = findViewById<EditText>(R.id.edit_text)
   insertStringAsIfTyping(editText, it.emoji)
}

텍스트 스타일 지정

글꼴 스타일, 크기, 두께, 글꼴 크기 등의 시각적 차이를 가독성, 계층 구조, 전반적인 미적 요소를 향상할 수 있습니다. 소셜 또는 메시지 앱의 사용자 인터페이스 매력 텍스트 스타일 도움말 사용자는 정보를 빠르게 파싱하고, 다른 유형의 데이터와 구별할 수 있습니다. 중요한 요소를 식별할 수 있습니다

Compose에서 텍스트 스타일 지정

Text 컴포저블은 다음과 같은 다양한 스타일 지정 옵션을 제공합니다.

텍스트 색상: Color을 설정하여 텍스트를 눈에 띄게 만듭니다.
글꼴 크기: FontSize를 조정하여 적절한 크기를 조정합니다.
글꼴 스타일: FontStyle을 사용하여 텍스트를 기울임꼴로 표시합니다.
글꼴 두께: FontWeight를 조정하여 텍스트를 굵게, 밝게 등으로 조정합니다.
글꼴 모음: FontFamily 아이콘을 사용하여 적절한 글꼴을 선택합니다.

Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

테마를 사용하여 애플리케이션 전체에서 이러한 스타일 지정 옵션을 일관되게 설정할 수 있습니다.

MaterialTheme(
    // This theme would include Color.Blue (as appropriate for dark and light themes)
    colorScheme = colorScheme,
    content = content,
    typography = Typography(
        titleLarge = TextStyle(
            fontSize = 18.sp,
            fontFamily = titleFont,
            fontWeight = FontWeight.Bold
        ),
    ),
)

텍스트에 여러 스타일 추가

다음을 사용하여 동일한 Text 컴포저블 내에서 여러 스타일을 설정할 수 있습니다. AnnotatedString

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

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("M")
            }
            append("y ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("S")
            }
            append("tyle")
        }
    )
}

Compose의 텍스트 스타일 지정에 관한 자세한 내용은 텍스트 스타일 지정을 참고하세요. 여기에는 그림자 추가, 브러시를 사용한 고급 스타일 지정, 불투명도.

뷰의 텍스트 스타일 지정

뷰를 사용하면 일관된 서체를 위해 스타일과 테마를 활용할 수 있습니다. 자세한 내용은 맞춤 테마를 적용하는 방법에 관한 자세한 내용은 스타일 및 테마를 참고하세요. 확인할 수 있습니다. 단일 텍스트 내에서 다른 스타일을 설정하려는 경우 보기에서 텍스트를 변경하는 방법에 대한 자세한 내용은 스팬을 참고하세요. 색상 추가, 텍스트를 클릭 가능하게 만들기, 크기 조정 등 텍스트 크기 및 맞춤설정된 방식으로 텍스트 그리기를 지원합니다.

이미지 키보드 및 기타 리치 콘텐츠 지원

사용자는 스티커, 애니메이션, 기타 종류의 리치 콘텐츠를 사용하여 의사소통하려는 경우가 많습니다. 앱이 리치 콘텐츠를 더 쉽게 수신할 수 있도록 Android 12 (API 수준 31)에는 앱이 모든 소스(클립보드, 키보드, 드래그 앤 드롭) 이전 Android 버전과의 호환성(현재 API 수준 14까지 지원)을 위해 이 API의 Android Jetpack(AndroidX) 버전을 사용하는 것이 좋습니다.

OnReceiveContentListener를 UI 구성요소에 연결하고 삽입될 때 호출될 수 있는 콜백입니다. 콜백은 일반 텍스트와 스타일이 지정된 텍스트부터 마크업, 이미지, 동영상, 오디오 파일 등에 이르기까지 코드에서 모든 콘텐츠 수신을 처리하는 단일 장소가 됩니다.

지원을 구현하는 방법에 대해 자세히 알아보려면 리치 콘텐츠 받기를 참고하세요. 있습니다. 이제 Jetpack Compose에 dragAndDropSource와 드래그 앤 드롭 구현을 간소화하는 dragAndDropTarget 수정자 다른 앱 간에 게재됩니다.

소셜 및 메시지 앱의 텍스트 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.