Metnin görünümünü karakter karakter animasyonlu hale getirme

Metnin görünümünü karakter karakter animasyonlu hale getirerek daktiloda yazılan metne benzer bir akış efekti oluşturabilirsiniz.

Sürüm uyumluluğu

Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.

Bağımlılıklar

Metni karakter karakter animasyonlu hale getirme

Bu kod, metni karakter karakter animasyonlu hale getirir. Metnin ne kadarının gösterileceğini kontrol etmek için bir dizini izler. Gösterilen metin, yalnızca geçerli dizinle sınırlı olacak şekilde dinamik olarak güncellenir. Son olarak, değişken değiştiğinde animasyon çalıştırılır.

@Composable
private fun AnimatedText() {
    val text = "This text animates as though it is being typed \uD83E\uDDDE\u200D♀\uFE0F \uD83D\uDD10  \uD83D\uDC69\u200D❤\uFE0F\u200D\uD83D\uDC68 \uD83D\uDC74\uD83C\uDFFD"

    // Use BreakIterator as it correctly iterates over characters regardless of how they are
    // stored, for example, some emojis are made up of multiple characters.
    // You don't want to break up an emoji as it animates, so using BreakIterator will ensure
    // this is correctly handled!
    val breakIterator = remember(text) { BreakIterator.getCharacterInstance() }

    // Define how many milliseconds between each character should pause for. This will create the
    // illusion of an animation, as we delay the job after each character is iterated on.
    val typingDelayInMs = 50L

    var substringText by remember {
        mutableStateOf("")
    }
    LaunchedEffect(text) {
        // Initial start delay of the typing animation
        delay(1000)
        breakIterator.text = StringCharacterIterator(text)

        var nextIndex = breakIterator.next()
        // Iterate over the string, by index boundary
        while (nextIndex != BreakIterator.DONE) {
            substringText = text.subSequence(0, nextIndex).toString()
            // Go to the next logical character boundary
            nextIndex = breakIterator.next()
            delay(typingDelayInMs)
        }
    }
    Text(substringText)

Kodla ilgili önemli noktalar

  • BreakIterator, nasıl depolandıklarına bakılmaksızın karakterler üzerinde doğru şekilde iterasyon yapar. Örneğin, animasyonlu emojiler birden fazla karakterden oluşur. BreakIterator, animasyonların bozulmaması için bunların tek bir karakter olarak işlenmesini sağlar.
  • LaunchedEffect, karakterler arasındaki gecikmeyi uygulamak için bir iş parçacığı başlatır. Animasyonu tetiklemek için kod bloğunu bir tıklama dinleyicisiyle veya başka bir etkinlikle değiştirebilirsiniz.
  • Text bileşeni, substringText değerinin her güncellendiğinde yeniden oluşturulur.

Sonuçlar

Şekil 1. Metin ve emojiler karakter karakter animasyonlu.

Bu kılavuzu içeren koleksiyonlar

Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:

Metin, her kullanıcı arayüzünün temel bileşenidir. Kullanıcılara keyifli bir deneyim sunmak için uygulamanızda metinleri sunmanın farklı yollarını öğrenin.
Bu video serisinde, çeşitli Compose API'leri tanıtılır ve mevcut API'ler ile bunların nasıl kullanılacağı hızlıca gösterilir.

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek kısa kılavuzlar hakkında bilgi edinebilir veya bize ulaşarak düşüncelerinizi bizimle paylaşabilirsiniz.