Uygulamalarda kayan yazı — nedir, nasıl oluşturulur ve yapılandırılır

Kayan yazı nedir?

Kayan yazı, metnin sabit bir alan içinde yatay olarak hareket ettiği, kapsayıcıya sığmayan tüm içeriği kullanıcının okuyabilmesi için döngüsel olarak kaydığı bir UI efektidir. Metnin bir kısmını gizleyen ellipsize'in aksine, marquee metnin tamamını hareket halinde gösterir.

Marquee terimi, Netscape ve Internet Explorer tarayıcılarının ilk sürümlerinde eklenen HTML etiketi <marquee> sayesinde yerleşmiştir. Etiket, JavaScript veya CSS olmadan kayan metin oluşturmayı sağlıyordu, ancak hiçbir zaman HTML standardının parçası olmadı. Modern tarayıcılar geriye dönük uyumluluk için desteklemeye devam ediyor, ancak kullanımı önerilmez.

Mobil geliştirmede, marquee kompakt kapsayıcılardaki uzun etiket sorununu çözer: oynatıcıdaki parça adları, döviz bantları, TV ekranlarındaki haber bantları. Ancak animasyon nedeniyle erişilebilirliğe yük bindirir ve kullanıcıları rahatsız edebilir — bu nedenle seçici olarak kullanılır.

Nielsen Norman Group araştırmasına (2023) göre, hareketli metin okuma hızını %15-20 azaltır ve bilişsel yükü artırır. Marquee'yi yalnızca statik kırpma (ellipsize) gerçekten kabul edilemez olduğunda kullanın.

TextView ile Android'de kayan yazı

Android'de marquee, TextView'ın yerleşik mekanizması aracılığıyla android:ellipsize="marquee" özniteliği ile uygulanır. Bu, metni kırpmayan ancak kaydırmasını canlandıran tek ellipsize modudur.

Marquee'yi etkinleştirmek için üç koşul karşılanmalıdır: singleLine="true" (veya maxLines="1"), ellipsize="marquee" ve kodda setSelected(true). setSelected() çağrılmazsa animasyon başlamaz.

<!-- XML layout -->
<TextView
    android:id="@+id/marquee_text"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever" />

// Kotlin: activate marquee
textView.setSelected(true)
textView.isSingleLine = true

marqueeRepeatLimit özniteliği animasyon tekrar sayısını belirler: marquee_forever (sonsuz) veya belirli bir sayı. Varsayılan marquee_forever'dır. Metin kapsayıcı genişliğinden kısaysa animasyon başlamaz — TextView statik metin gösterir.

Önemli bir özellik: setSelected(true) yalnızca TextView odaklandığında veya seçili moddayken çalışır. RecyclerView'da bu sorunlara neden olabilir — animasyon yalnızca bir öğe için başlar. Çözüm: isFocused()'u geçersiz kılan ve her zaman true döndüren özel bir MarqueeTextView oluşturun.

Android 9'dan (API 28) itibaren Google, marquee davranışını iyileştirdi — animasyon daha pürüzsüz hale geldi ve liste kaydırma sırasında donmuyor. Ancak eski cihazlarda, özellikle yüksek piksel yoğunluğunda marquee takılabilir.

iOS'te kayan yazı uygulaması

iOS'ta android:ellipsize="marquee"'nin yerleşik bir karşılığı yoktur. Marquee, Core Animation veya SwiftUI animasyonu kullanılarak elle uygulanır. En yaygın yaklaşım, bir kırpma kapsayıcısıyla birlikte layer.position'u canlandırmaktır.

UIKit'te marquee üç öğeden oluşur: clipsToBounds = true olan bir UILabel kapsayıcısı, metnin kendisi ve metni X ekseninde sonsuz tekrarla kaydıran ve autoreverses = false olan, böylece satırın bir yönde kayıp geri sıçradığı bir CABasicAnimation.

func startMarquee(for label: UILabel) {
    label.clipsToBounds = true
    label.numberOfLines = 1

    let textWidth = (label.text as? NSString)?
        .size(withAttributes: [.font: label.font as any]).width ?? 0

    guard textWidth > label.bounds.width else { return }

    let animation = CABasicAnimation(keyPath: "position.x")
    animation.fromValue = label.layer.position.x + label.bounds.width / 2
    animation.toValue = label.layer.position.x - textWidth - label.bounds.width / 2
    animation.duration = CFTimeInterval(textWidth / 60)
    animation.repeatCount = .infinity
    animation.autoreverses = false
    label.layer.add(animation, forKey: "marquee")
}

duration = textWidth / 60 hesaplaması saniyede yaklaşık 60 piksel hız verir — rahat bir okuma temposu. Hız 120 px/s'yi aşarsa metin okunamaz hale gelir. 30 px/s'nin altındaysa animasyon ağır görünür. Hızı belirli senaryonuza göre ayarlayın.

SwiftUI'de marquee daha basit bir şekilde uygulanır — tekrarlanabilir animasyonla offset() değiştiricisi ve .animation(.linear(duration:).repeatForever(autoreverses: false)) ile. SwiftUI animasyon yaşam döngüsünü otomatik olarak yönetir ancak metin genişliğini belirlemek için GeometryReader gerektirir.

Marquee etiketi yerine CSS animasyonu

Web'de, kullanımdan kalkmış <marquee> etiketi önerilmez, ancak tarayıcılar desteklemeye devam eder. Marquee'nin modern uygulaması, anahtar kareler ve transform: translateX ile CSS animasyonudur.

CSS yaklaşımının avantajları: hız, duraklama ve animasyon eğrisi üzerinde tam kontrol, erişilebilirlik için prefers-reduced-motion desteği ve anlamsal olarak yanlış bir etiketin olmaması.

.marquee {
    overflow: hidden;
    white-space: nowrap;
    width: 300px;
}
.marquee-content {
    display: inline-block;
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Pause on hover */
.marquee-content:hover {
    animation-play-state: paused;
}

Anahtar püf nokta: içerikte display: inline-block, öğe genişliğinin metin genişliğine eşit olmasını sağlar ve translateX(-100%) onu tam olarak bu genişlik kadar sola kaydırır. İçerik display: block ise, translateX(-100%) metin genişliği değil kapsayıcı genişliğine eşit olur ve animasyon bozulur.

Erişilebilirlik için @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } } ekleyin — vestibüler bozukluğu olan kullanıcılar kaydırma özelliğiyle statik metin görecektir.

Ne zaman kullanılmalı ve ne zaman kaçınılmalı

Marquee, kullanıcının kapsayıcıyı kendisinin genişletemediği ve tam metnin kritik olduğu senaryolarda haklıdır: kilitli ekrandaki oynatıcıda geçerli parça, TV panelinde haber bandı, bir araç çağırma uygulamasında marquee (sipariş durumu).

Marquee tablolarda, listelerde, formlarda ve diyaloglarda kullanılmamalıdır — kullanıcının arayüzle aktif olarak etkileşime girdiği her yerde. Animasyon hedeften uzaklaştırır, öğe arama süresini artırır ve rahatsızlık yaratır. WebAIM'e (2024) göre, vestibüler bozukluğu olan her 3 kullanıcıdan 1'i animasyonlu metin izlerken rahatsızlık bildirmektedir.

Bir kural: metin kısaltılabiliyor veya sonraki satıra kaydırılabiliyorsa — yapın. Marquee son çaredir, uzun etiketler için evrensel bir çözüm değildir.

Erişilebilirlik: animasyon ve azaltılmış hareket

Marquee, erişilebilirlik açısından en sorunlu UI animasyonlarından biridir. Hareketli metin, vestibüler bozukluğu olan kişilerde baş dönmesi, mide bulantısı ve yönelim bozukluğuna neden olabilir. WCAG 2.2'ye göre, 5 saniyeden uzun süren herhangi bir animasyon duraklatma veya devre dışı bırakma mekanizmasına sahip olmalıdır.

iOS'te, sistem ayarını kontrol etmek için UIAccessibility.isReduceMotionEnabled özelliğini kullanın. reduceMotion etkinse — animasyonu başlatmayın, ellipsize ile statik metin gösterin.

Android'de, sistem animasyonunu Settings.Global.ANIMATOR_DURATION_SCALE aracılığıyla kontrol edin. Genel animasyon devre dışıysa (duration scale = 0), marquee etkinleştirilmemelidir.

Web'de, prefers-reduced-motion medya özelliğini kullanın: @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } }. Bu, tüm modern tarayıcılar tarafından desteklenen standart bir CSS özelliğidir. DevTools'ta kontrol edin: prefers-reduced-motion emülasyonunu etkinleştirin ve animasyonun kapandığını doğrulayın.