그림 이모티콘 표시

표준 이모티콘 세트는 매년 새롭게 업데이트되는 유니코드, 이모티콘 사용 증가 빠르게 확장할 수 있습니다

앱이 인터넷 콘텐츠를 표시하거나 텍스트 입력을 제공하는 경우 Google은 최신 그림 이모티콘 글꼴을 지원할 것을 권장합니다. 그렇지 않으면 나중에 표시되는 그림 이모티콘이 두부 (☐)라는 작은 정사각형 상자로 표시되거나 잘못 렌더링된 기타 이모티콘 시퀀스입니다.

Android 버전 11 (API 수준 30) 이하에서는 그림 이모티콘 글꼴을 업데이트할 수 없으므로 해당 버전에 새 버전을 표시하는 앱은 수동으로 업데이트해야 합니다.

다음은 최신 그림 이모티콘의 예입니다.

예 버전
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0(2021년 9월)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1(2020년 9월)
🥲 🥷🏿 🐻‍❄️ 13.0(2020년 3월)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1(2019년 10월)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0(2019년 2월)

2023년 3월 BOM (Compose UI 1.4)에서 최신 그림 이모티콘 지원 제공 버전(이전 Android 버전과의 호환성 포함) API 21로 업그레이드할 수 있습니다

이 지원에는 앱을 변경할 필요가 없습니다.—Text 및 TextField (Material 2 또는 Material 3) 또는 BasicText 및 BasicTextField에서는 최신 그림 이모티콘 지원을 즉시 사용할 수 있습니다.

앱에서 최신 그림 이모티콘을 테스트하는 가장 좋은 방법은 API 30 이하에서 실제 기기를 사용할 수 있습니다.

맞춤 그림 이모티콘 솔루션을 사용하거나 기본 그림 이모티콘을 사용 중지해야 하는 경우 Compose의 해상도를 높이려는 경우 PlatformTextStyle(emojiSupportMatch):

Text(
    text = "Hello $EMOJI_TEXT",
    style = TextStyle(
        platformStyle = PlatformTextStyle(
            emojiSupportMatch = EmojiSupportMatch.None
        )/* ... */
    )
)
EmojiSnippets.kt

상호 운용성

앱이 동일한 Activity에서 뷰와 Compose를 모두 사용하는 경우 적절한 API를 사용하여 그림 이모티콘을 올바르게 구성합니다. 다음 섹션에서는 각 API를 언제 사용해야 하는지 설명합니다.

ComponentActivity에서 확장

Activity가 다음과 같이 Compose ComponentActivity에서 확장되는 경우 AppCompatActivity의 경우 AppCompat 없이 그림 이모티콘 지원을 따릅니다. 참조하세요.

AppCompatActivity를 확장하지 않으므로 Emoji2를 추가합니다. 라이브러리를 종속 항목에 연결하고 뷰에서 EmojiTextView를 사용합니다. 대신 다음 스니펫에 표시된 것처럼 TextView 위젯에 사용합니다.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: EmojiTextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}
EmojiSnippets.kt

그런 다음 XML 파일에서 다음을 수행합니다.

<androidx.emoji2.widget.EmojiTextView
    android:id="@+id/emoji_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />
example_view.xml

AppCompatActivity에서 확장

Activity가 AppCompatActivity에서 확장되는 경우 다음을 사용할 수 있습니다. ComposeView: 구성 가능한 함수를 호출합니다. 그림 이모티콘이 여러 플랫폼에서 올바르게 렌더링됨 Text 컴포저블을 사용하는 Android 버전

AppCompatActivity에서 확장하는 경우 XML에서 TextView를 확장합니다. 해야 합니다.

이는 XML을 확장하는 경우에 적용됩니다.

  • ComposeView 외부, Activity 포드의 AppCompatActivity 및 TextView는 다음 스니펫에 포함되어 있습니다.

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: TextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}
EmojiSnippets.kt

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidViewBinding(ExampleViewBinding::inflate) {
                            emojiTextView.text = EMOJI_TEXT
                        }
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

ComposeView 내에서 AndroidView를 사용하여 텍스트를 확장하려면 다음을 사용합니다. AppCompatTextView를 사용하여 그림 이모티콘을 올바르게 렌더링합니다.

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidView(
                            factory = { context -> AppCompatTextView(context) },
                            update = { it.text = EMOJI_TEXT }
                        )
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

자세한 내용은 상호 운용성 API 문서를 참조하세요.

문제 해결

그림 이모티콘 대신 두부 (☐)가 표시되면 먼저 문제가 다음에 해당하는지 확인하세요. 테스트할 수 있습니다. 다음과 같은 몇 가지 주요 사항을 확인할 수 있습니다.