Teks di aplikasi sosial dan pesan

Teks adalah inti dari aplikasi sosial, tempat pengguna berbagi pemikiran, mengekspresikan emosi, dan menceritakan kisah. Dokumen ini membahas cara menggunakan teks secara efektif, dengan berfokus pada emoji, gaya visual, dan integrasi konten lengkap.

Menangani emoji

Emoji telah menjadi bagian integral dari komunikasi modern, terutama di sosial dan aplikasi pesan. Ikon ini mengatasi kendala bahasa, sehingga pengguna dapat mengekspresikan emosi dan ide dengan cepat dan efektif.

Dukungan emoji di Compose

Jetpack Compose, toolkit UI deklaratif modern Android, menyederhanakan penanganan emoji:

Input: Komponen TextField secara native mendukung input emoji.
Tampilan: Komponen Text Compose merender emoji dengan benar, memastikan tampilannya konsisten di seluruh perangkat dan platform yang menawarkan penyedia font yang dapat didownload dan kompatibel dengan emoji2, seperti perangkat yang didukung oleh Layanan Google Play.

Menampilkan emoji membahas cara menampilkan emoji di Jetpack Compose, termasuk cara memastikan aplikasi Anda menampilkan font emoji terbaru, cara memastikan emoji berfungsi dengan benar jika aplikasi Anda menggunakan View dan Compose dalam Aktivitas yang sama, dan cara memecahkan masalah saat emoji tidak muncul seperti yang diharapkan.

Dukungan emoji di View

Jika Anda menggunakan View Android, library AppCompat 1.4 atau yang lebih tinggi menyediakan dukungan emoji untuk subclass platform TextView:

Input: Versi AppCompat EditText secara native mendukung input emoji.
Tampilan: Versi AppCompat dari TextView, ToggleButton, Switch, Button, CheckedTextView, RadioButton, CheckBox, AutoCompleteTextView, dan MultiAutoCompleteTextView semuanya mendukung tampilan emoji, yang memastikan tampilan konsisten di seluruh perangkat dan platform yang menyediakan penyedia font yang dapat didownload dan kompatibel dengan emoji2, seperti perangkat yang didukung oleh layanan Google Play.

Jika Anda membuat tampilan kustom yang merupakan subclass langsung atau tidak langsung dari TextView, perluas implementasi AppCompat (bukan implementasi platform) untuk mendapatkan dukungan emoji bawaan. Mendukung acara emoji modern cara menguji dan memecahkan masalah integrasi emoji Anda, serta mendukung emoji tanpa AppCompat, mendukung emoji dalam tampilan kustom, mendukung font atau font alternatif penyedia layanan, dan banyak lagi.

Menggunakan Pemilih Emoji

Pemilih Emoji Jetpack adalah View Android yang menyediakan daftar kategori emoji, varian melekat, dan dukungan untuk emoji yang baru saja digunakan emoji — kompatibel di beberapa versi dan perangkat Android. Ini adalah cara mudah untuk meningkatkan integrasi emoji aplikasi Anda.

Mulai dengan mengimpor library di build.gradle.

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

Menggunakan Pemilih Emoji dengan Compose

Anda membuat Pemilih Emoji di Compose menggunakan composable AndroidView. Cuplikan ini menyertakan pemroses yang memberi tahu Anda saat ada emoji dipilih:

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

Compose 1.7 menambahkan banyak fungsi baru ke BasicTextField, termasuk dukungan untuk TextFieldState, yang dapat ditempatkan di ViewModel:

private val emojiTextFieldState = TextFieldState()

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

Anda dapat menggunakan TextFieldState untuk menyisipkan teks pada posisi kursor atau mengganti teks yang dipilih, seolah-olah Anda sedang mengetik 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)
    }
}

Callback dapat memperbarui BasicTextField menggunakan fungsi helper:

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

Menggunakan Pemilih Emoji dengan Tampilan

Pemilih Emoji juga berfungsi baik dengan View.

Inflate EmojiPickerView. Secara opsional, tetapkan emojiGridColumns dan emojiGridRows berdasarkan ukuran yang diinginkan dari setiap sel emoji.

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

Sisipkan karakter di posisi kursor atau ganti teks yang dipilih:

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

Berikan pemroses ke emoji yang dipilih, lalu gunakan untuk menambahkan karakter ke EditText.

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

Menata gaya teks

Dengan menerapkan perbedaan visual pada teks, seperti gaya {i>font<i}, ukuran, ketebalan, dan warna, Anda dapat meningkatkan keterbacaan, hierarki, dan estetika secara keseluruhan daya tarik antarmuka pengguna aplikasi sosial atau pesan Anda. Bantuan gaya teks pengguna dengan cepat mengurai informasi, membedakan di antara berbagai jenis pesan, dan mengidentifikasi elemen-elemen penting.

Memberi gaya pada teks di Compose

Composable Text menawarkan banyak opsi gaya, termasuk:

Warna Teks: Tetapkan Color untuk membuat teks terlihat mencolok.
Font Size: Kontrol FontSize untuk skala yang sesuai.
Gaya Font: Gunakan FontStyle untuk membuat teks miring.
Ketebalan Font: Sesuaikan FontWeight untuk variasi teks tebal, terang, dll.
Font Family: Gunakan FontFamily untuk memilih font yang sesuai.

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

Anda dapat menetapkan opsi gaya ini secara konsisten di seluruh aplikasi menggunakan tema.

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

Menambahkan beberapa gaya dalam teks

Anda dapat menetapkan gaya yang berbeda dalam composable Text yang sama menggunakan AnnotatedString.

AnnotatedString memiliki builder yang aman, buildAnnotatedString, untuk mempermudah pembuatannya.

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

Lihat Menata gaya teks untuk informasi selengkapnya tentang gaya visual teks di Compose, termasuk menambahkan bayangan, gaya visual lanjutan dengan Kuas, dan opasitas.

Menata gaya teks di View

Dengan View, andalkan gaya dan tema untuk tipografi yang konsisten. Lihat Gaya dan tema untuk informasi selengkapnya tentang cara menerapkan tema kustom untuk tampilan di aplikasi Anda. Jika Anda ingin menetapkan gaya yang berbeda dalam satu teks lihat Span untuk informasi lebih lanjut tentang cara mengubah teks dalam berbagai cara, termasuk menambahkan warna, membuat teks dapat diklik, menskalakan ukuran teks, dan menggambar teks dengan cara yang disesuaikan.

Mendukung keyboard gambar dan konten multimedia lainnya

Pengguna sering kali ingin berkomunikasi menggunakan stiker, animasi, dan jenis lainnya konten lengkap. Untuk mempermudah aplikasi menerima konten lengkap, Android 12 (API level 31) memperkenalkan API terpadu yang memungkinkan aplikasi Anda menerima konten dari sumber apa pun: papan klip, keyboard, atau tarik lalu lepas. Untuk mundur kompatibilitas dengan versi Android sebelumnya (saat ini kembali ke API level 14), sebaiknya gunakan versi Android Jetpack (AndroidX) API ini.

Anda melampirkan OnReceiveContentListener ke komponen UI dan mendapatkan callback saat konten disisipkan melalui mekanisme apa pun. Callback menjadi satu tempat bagi kode Anda untuk menangani penerimaan semua konten, dari teks biasa dan bergaya hingga markup, gambar, video, file audio, dan lainnya.

Lihat Menerima konten kaya untuk mempelajari lebih lanjut cara menerapkan dukungan di aplikasi Anda. Jetpack Compose kini memiliki pengubah dragAndDropSource dan dragAndDropTarget untuk menyederhanakan penerapan tarik lalu lepas dalam aplikasi Anda dan di antara aplikasi lain.

Teks di aplikasi sosial dan pesan Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.