Sosyal medya ve mesajlaşma uygulamalarındaki metinler

Metin, kullanıcıların düşüncelerini paylaştığı, duygularını ifade ettiği ve hikayeler anlattığı sosyal uygulamaların merkezinde yer alır. Bu dokümanda metinlerle nasıl çalışılacağı incelenmektedir emoji, stil ve zengin içerik entegrasyonuna odaklanıyor.

Emojilerle çalışma

Emojiler, özellikle sosyal medya ve mesajlaşma uygulamalarında modern iletişimin ayrılmaz bir parçası haline geldi. Dil engellerini aşarak kullanıcıların duyguları ve fikirleri hızlı ve etkili bir şekilde ifade etme.

Oluşturma bölümünde emoji desteği

Android'in modern bildirime dayalı kullanıcı arayüzü araç seti olan Jetpack Compose, emoji işlemeyi basitleştirir:

Giriş: TextField bileşeni, emoji girişini doğal olarak destekler.
Görüntüleme: Oluşturma'nın Text bileşeni, emojileri doğru şekilde oluşturur. Böylece, emoji2 uyumlu indirilebilir yazı tipi sağlayıcı sunan cihazlar (ör. Google Play Hizmetleri tarafından desteklenen cihazlar) gibi cihaz ve platformlarda emojilerin tutarlı bir şekilde görünmesini sağlar.

Emoji görüntüleme, uygulamanızın en son emoji yazı tiplerini görüntülemesini sağlama, uygulamanız aynı etkinlikte hem Görünümler hem de Compose'u kullanıyorsa emojilerin düzgün çalışmasını sağlama ve emojiler beklendiği gibi görünmediğinde sorun giderme gibi konular da dahil olmak üzere Jetpack Compose'da emoji görüntülemeyle ilgili konuları kapsar.

Görüntülemelerde emoji desteği

Android Görünümler kullanıyorsanız AppCompat kitaplığının 1.4 veya sonraki sürümleri, TextView platform alt sınıfları için emoji desteği sağlar:

Giriş: EditText'in AppCompat sürümü, emoji girişini doğal olarak destekler.
Görüntülü Reklam Ağı: TextView, ToggleButton ve AppCompat sürümleri Switch, Button, CheckedTextView, RadioButton, CheckBox, AutoCompleteTextView ve MultiAutoCompleteTextView Tüm öğeler emoji ekranını destekler ve tutarlılık sağlar. emoji2 uyumlu öğeler sağlayan cihaz ve platformlarda tarafından desteklenen cihazlar gibi indirilebilir yazı tipleri sağlayıcısı Google Play Hizmetleri.

TextView sınıfının doğrudan veya dolaylı bir alt sınıfı olan özel bir görünüm oluşturuyorsanız yerleşik emoji desteği almak için platform uygulaması yerine AppCompat uygulamasını genişletin. Modern emojiyi destekleme bölümünde, emoji entegrasyonunuzu nasıl test edebileceğiniz ve emojilerle ilgili sorunları nasıl giderebileceğiniz, AppCompat olmadan emojileri nasıl destekleyebileceğiniz, özel görünümlerde emojileri nasıl destekleyebileceğiniz, alternatif yazı tiplerini veya yazı tipi sağlayıcıları nasıl destekleyebileceğiniz ve daha fazlası hakkında bilgi verilmektedir.

Emoji seçiciyi kullanma

Jetpack Emoji Seçici, emojilerin kategorize edilmiş bir listesini, yapışkan varyantlarını ve en son kullanılan emojiler için destek sunan bir Android Görünümü'dür. Bu görünüm, birden fazla Android sürümü ve cihazla uyumludur. en iyi şekilde kullanabilirsiniz.

Kitaplığı build.gradle ürününe içe aktararak başlayın.

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

Oluştur ile Emoji Seçici'yi kullanma

Oluşturma'da Emoji Seçici'yi AndroidView kullanarak oluşturursunuz composable'dan bahsetmek istiyorum. Bu snippet, bir emoji seçildiğinde size haber veren bir dinleyici içerir:

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

Compose 1.7, BasicTextField'e aşağıdakiler gibi birçok yeni işlev ekler: ViewModel'inizde bulunan TextFieldState desteği:

private val emojiTextFieldState = TextFieldState()

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

İmleç konumuna metin eklemek için TextFieldState simgesini kullanabilirsiniz. seçilen metni, IME'de yazar gibi değiştirin:

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

Geri çağırma, yardımcı işlevi kullanarak BasicTextField öğesini güncelleyebilir:

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

Emoji Seçiciyi Görünümlerle Kullanma

Emoji Seçici, Görünümler'de de kullanılabilir.

Emoji PickerView öğesini artırın. İsteğe bağlı olarak emojiGridColumns ve emojiGridRows'u her emoji hücresinin istenen boyutuna göre ayarlayın.

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

İmleç konumuna bir karakter ekleyin veya seçili metni değiştirin:

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

Seçilen emoji için bir dinleyici sağlayın ve EditText öğesine karakter eklemek için bu dinleyiciyi kullanın.

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

Metnin stilini ayarlama

Metne yazı tipi stilleri, boyutlar, kalınlıklar ve renkler gibi görsel farklılıklar uygulayarak sosyal medya veya mesajlaşma uygulamanızın kullanıcı arayüzünün okunabilirliğini, hiyerarşisini ve genel estetik çekiciliğini artırabilirsiniz. Metin stilleri, kullanıcıların bilgileri hızlı bir şekilde ayrıştırmasına, farklı mesaj türlerini ayırt etmesine ve önemli öğeleri belirlemesine yardımcı olur.

Oluştur'da metin biçimlendirme

Text bileşeni, aşağıdakiler de dahil olmak üzere çok sayıda stil seçeneği sunar:

Metin Rengi: Metnin öne çıkmasını sağlamak için Color simgesini ayarlayın.
Yazı Tipi Boyutu: Uygun ölçek için FontSize simgesini kontrol edin.
Yazı Tipi Stili: Metni italik hale getirmek için FontStyle simgesini kullanın.
Yazı Tipi Kalınlığı: Kalın, ince vb. metin varyasyonları için FontWeight simgesini ayarlayın.
Yazı Tipi Ailesi: Uygun bir yazı tipi seçmek için FontFamily simgesini kullanın.

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

Bu stil seçeneklerini uygulamanız genelinde tutarlı bir şekilde ayarlayabilirsiniz: temizleyin.

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

Metne birden fazla stil ekleme

Aynı Text composable'da farklı stiller ayarlamak için AnnotatedString

AnnotatedString, oluşturmayı kolaylaştırmak için tür açısından güvenli bir oluşturucu (buildAnnotatedString) içerir.

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

Oluşturma bölümünde metin biçimlendirme, gölge ekleme, fırçayla gelişmiş biçimlendirme ve saydamlık gibi konular hakkında daha fazla bilgi için Metne stil uygulama başlıklı makaleyi inceleyin.

Görünümlerde metin biçimlendirme

Görünümler'de tutarlı bir yazı biçimi için stilleri ve temaları kullanın. Görüntüleyin Stil ve temalar sayfasında özel temaların nasıl uygulanacağı hakkında daha fazla bilgi görüntüleyebilirsiniz. Tek bir metinde farklı stiller ayarlamak istiyorsanız Görünümde, çeşitli içeriklerde metinlerin nasıl değiştirileceği hakkında daha fazla bilgi için Aralıklar'a renk ekleme, metni tıklanabilir hale getirme, ölçeklendirme, metin boyutunu ve metni özelleştirilmiş bir şekilde çizin.

Resim klavyelerini ve diğer zengin içerikleri destekleme

Kullanıcılar genellikle çıkartma, animasyon ve diğer zengin içerik türlerini kullanarak iletişim kurmak ister. Uygulamaların zengin içerik almasını kolaylaştırmak için Android 12, (API düzeyi 31), uygulamanızın şu kaynaklardan gelen içerikleri kabul etmesine olanak tanıyan birleştirilmiş bir API'yi kullanıma sundu: herhangi bir kaynak: pano, klavye veya sürükleyip bırakma. Geriye dönük önceki Android sürümleriyle uyumluluk (şu anda API düzeyi 14'e geridir), bu API'nin Android Jetpack (AndroidX) sürümünü kullanmanızı öneririz.

Kullanıcı arayüzü bileşenlerine bir OnReceiveContentListener ekler ve geri çağırmayı içerir. Geri çağırma kodunuzun sade ve kötü amaçlı yazılımlardan, tüm içeriği alma işini tek bir yerde biçimlendirme, resimler, videolar, ses dosyaları ve diğer öğelere stilize edilmiş metin

Desteğin şurada nasıl uygulanacağıyla ilgili daha fazla bilgi edinmek için Zengin içerik alma bölümüne bakın: en iyi şekilde yararlanabilirsiniz. Jetpack Compose'da artık dragAndDropSource ve Sürükleyip bırakma işlevini basitleştiren dragAndDropTarget değiştiricileri ve diğer uygulamalar arasında geçiş yapın.

Sosyal medya ve mesajlaşma uygulamalarındaki metinler Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.