Mobil geliştirmede Ellipsize — nedir ve metni kısma yöntemleri

Ellipsize Nedir?

Ellipsize (ellipsis — üç noktadan) kapsayıcı boyutunu aşan metni görüntüleme tekniğidir. Satırı sınırdan basitçe kesmek yerine, ellipsize bir üç nokta karakteri (üç nokta, Unicode U+2026) ekleyerek kullanıcıya gizli içerik olduğunu belirtir.

Terim Android SDK'da yerleşiktir; android:ellipsize özelliği taşma durumunda TextView'in davranışını tanımlar. iOS'ta benzer işlevsellik kırpma olarak adlandırılır ve NSLineBreakMode aracılığıyla yönetilir. Web'de, ellipsis değerine sahip CSS özelliği text-overflow kullanılır.

Ellipsize'nin temel amacı, metnin kısaltıldığı konusunda kullanıcıyı bilgilendirmektir. Bir kelimenin ikiye bölünebileceği piksel tabanlı kırpmadan farklı olarak, ellipsize okunabilirliği garanti eder: üç nokta, kelimeyi veya karakteri bölmeden tam bir kelime veya karakterden sonra yerleştirilir. Bu, Material Design ve Human Interface Guidelines ilkeleriyle uyumludur.

Kapsayıcı genişliğinin sabit olduğu ve metin uzunluğunun dinamik olduğu her yerde ellipsize kullanın: makale başlıkları, tablo hücreleri, etiketli düğmeler, listedeki kişiler, ekmek kırıntıları ve dosya yolları.

Android'de Ellipsize: TextView ve Modlar

Android'de ellipsize, XML'deki android:ellipsize özelliği veya kodda setEllipsize() yöntemiyle yapılandırılır. Her biri metnin hangi tarafının kırpılacağını belirleyen dört mod mevcuttur.

END modu (çoğu durumda varsayılan) satırın sonunu kırpar ve üç noktayı kapsayıcının sağ tarafına yerleştirir. START modu başlangıcı kırpar — üç nokta solda, görünür metin sağda. MIDDLE ortayı kırpar, satırın başlangıcını ve sonunu görünür tutar. MARQUEE modu, üç noktanın gösterilmediği ve metnin döngüsel olarak kaydırıldığı animasyonlu bir metin kaydırmadır.

<!-- XML layout -->
<TextView
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Very long text that will be truncated"
    android:ellipsize="end"
    android:maxLines="1"
    android:singleLine="true" />

<!-- Kotlin code -->
textView.setEllipsize(TextUtils.TruncateAt.MIDDLE)

Önemli: ellipsize yalnızca maxLines veya singleLine ile birlikte çalışır. Satır sayısı sınırlandırılmazsa, TextView yükseklikte büyür ve ellipsize etkinleşmez. Android 8.0'dan (API 26) itibaren ellipsize, maxLines > 1 ile çok satırlı modu destekler — üç nokta son satırın sonuna yerleştirilir.

Programlı kullanım için, TextUtils.TruncateAt öğesini END, START, MIDDLE, MARQUEE değerlerinden biriyle çağırın. NONE değeri ellipsize'yi devre dışı bırakır.

Pratikte, END vakaların %90'ı için uygundur — kullanıcılar metnin sonda kırpılmasını bekler. MIDDLE, dosya yolları için kullanılır (örneğin, "/User/.../project/main.kt") böylece yolun sonu görünür olur. START, ortak ön eke sahip adlar için kullanılır (örneğin, "...@gmail.com").

iOS'ta Metin Kırpma: NSLineBreakMode

iOS'ta ellipsize'nin eşdeğeri, UILabel sınıfının lineBreakMode özelliğidir (UITextView için NSTextContainer). Üç kırpma modu mevcuttur: .byTruncatingTail (son), .byTruncatingMiddle (orta) ve .byTruncatingHead (başlangıç).

.byTruncatingTail modu android:ellipsize="end"e karşılık gelir. .byTruncatingHead, START'a, .byTruncatingMiddle, MIDDLE'a karşılık gelir. .byClipping modu, modern arayüzlerde nadiren kullanılan, metni üç nokta olmadan kırpar. .byCharWrapping modu, kırpma olmadan karakter bazında kaydırma yapar.

let label = UILabel()
label.text = "Etiket sınırlarına sığmayan uzun metin"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString ayrıca lineBreakMode'u destekler
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

iOS'ta kırpma, numberOfLines ile birlikte çalışır. numberOfLines = 1 ise, metin tek bir satırda kırpılır. numberOfLines = 2 ise — ikinci satırda. UITextView, her üç kırpma modunu da destekleyen NSTextContainer.lineBreakMode'u kullanır.

iOS özelliği: UILabel üzerindeki .byTruncatingMiddle modu, kısa dizelerde beklenmedik davranabilir — dize tamamen sığıyorsa, üç nokta görünmez. Kısa dizelerde üç noktanın garantili görüntülenmesi için, sizeThatFits aracılığıyla özel mantık kullanın.

CSS text-overflow: Web'de Üç Nokta Nasıl Eklenir

Web geliştirmede, ellipsize, CSS özelliği text-overflow: ellipsis overflow: hidden ve white-space: nowrap ile birlikte uygulanır. Bu, web arayüzlerinde bir satırı üç nokta ile kırpmanın standart yoludur.

.text-cell {
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

text-overflow özelliği overflow: hidden olmadan çalışmaz — tarayıcının içeriğin kırpıldığını bilmesi gerekir. white-space: nowrap satır kaydırmayı önler, aksi takdirde metin bir sonraki satıra geçer ve taşma oluşmaz.

Çok satırlı kırpma için (örneğin, ikincinin sonunda üç nokta bulunan 2 satır), daha önce deneysel -webkit-line-clamp özelliği kullanılıyordu, şimdi CSS Overflow Level 4'te line-clamp olarak standartlaştırıldı.

Pratikte, text-overflow: ellipsis 10 yılı aşkın süredir tüm modern tarayıcılar tarafından desteklenmektedir ve web'de metni kırpmanın en güvenilir yoludur.

Doğru Kırpma Modu Nasıl Seçilir

Ellipsize modu seçimi UX'i etkiler ve arayüz algısını iyileştirebilir veya kullanıcının kafasını karıştırabilir. Ana kural: kullanıcı, kırpılan kısmın anlama için en az ihtiyaç duyulan yerde olmasını bekler.

END modu başlıklar, altyazılar için uygundur — kullanıcı satırın başlangıcını görür ve bağlamı anlar. Sağdaki üç nokta "daha var, ama sığmadı" anlamına gelir. Bu en sezgisel ve yaygın moddur.

MIDDLE modu dosya yolları, e-posta adresleri ve uzun tanımlayıcılar için vazgeçilmezdir. Satırın sonu benzersiz bilgi içerdiğinde (dosya adı, alan adı), kullanıcı özellikle bunu görmelidir, başlangıç kısaltılabilir. Örnek: "/User/.../important_document.pdf" — dosya adı hemen görünür.

START modu nadiren kullanılır ancak ortak ön eke sahip kişi listeleri için faydalıdır — örneğin, tüm adresler aynı alana ait olduğunda "username@gmail.com" yerine "...@gmail.com". Ancak bu desen genellikle yardımdan çok kafa karıştırır. Nielsen Norman Group'a göre, kullanıcılar soldan sağa okur ve başlangıçta önemli bilgiler bekler, bu nedenle START kırpması bilişsel yükü artırır.

MARQUEE modu (kayan metin) yalnızca düşük güncelleme sıklığına sahip tek satırlık öğeler için uygundur: oynatıcıdaki mevcut parça, haber akışı, durum çubuğu. Tablolar, listeler veya formlar için marquee kullanmayın — animasyon dikkat dağıtır ve zayıf cihazlarda performansı düşürür.

Yaygın Sorunlar ve Çözümleri

İlk sorun — ellipsize çalışmıyor. En yaygın neden satır sayısı sınırının olmamasıdır. maxLines olmadan, TextView yükseklikte büyür ve genişlik taşması oluşmaz. Çözüm: her zaman maxLines belirtin (tek satır için singleLine="true").

İkinci sorun — metin programlı olarak değiştirildiğinde üç nokta gösterilmiyor. setText() çağrıldıktan sonra TextView doğru şekilde yeniden çizilmeyebilir. Çözüm: metni değiştirdikten sonra invalidate() veya post(() -> requestLayout()) çağırın.

Üçüncü sorun — farklı Android sürümlerinde farklı davranış. API 23'ten önce, çok satırlı modda (maxLines > 1) ellipsize desteklenmiyordu. Çözüm: uyumluluk için Build.VERSION.SDK_INT'i kontrol edin ve AndroidX'ten ViewCompat.setEllipsize()'ı kullanın.

Dördüncü sorun — üç nokta karakteri özel yazı tiplerinde gösterilmiyor. Yazı tipi U+2026 glifini içermiyorsa, üç nokta üç nokta ile değiştirilir. Çözüm: yazı tipinde üç nokta glifi olup olmadığını kontrol edin veya fontFamily aracılığıyla bir yedek yazı tipi ekleyin.