Ellipsize mobil inkişafda — bu nədir və mətnin kəsilməsi üsulları

Ellipsize nədir?

Ellipsize (ing. ellipsis — üç nöqtə) — bu konteynerin ölçülərini aşan mətnin göstərilməsi texnikasıdır. Sətri sadəcə sərhəd boyunca kəsmək (clip) əvəzinə, ellipsize istifadəçiyə gizli məzmunun olduğunu göstərən üç nöqtə simvolu (Unicode U+2026) əlavə edir.

Termin Android SDK-da möhkəmlənib, burada android:ellipsize xassəsi TextView-in daşma zamanı davranışını müəyyən edir. iOS-da analoji funksionallıq truncation (kəsmə) adlanır və NSLineBreakMode vasitəsilə idarə olunur. Vebdə CSS text-overflow xassəsi ellipsis dəyəri ilə istifadə olunur.

Ellipsize-in əsas məqsədi istifadəçini məlumatlandırmaqdır ki, mətn qısaldılıb. Piksel üzrə kəsmədən fərqli olaraq, burada söz yarıya bölünə bilər, ellipsize isə oxunaqlılığı təmin edir: üç nöqtə tam söz və ya simvoldan sonra qoyulur, onu parçalamadan. Bu, Material Design və Human Interface Guidelines prinsiplərinə uyğundur.

Ellipsize-dən konteyner eni sabit, mətn uzunluğu dinamik olduğu hər yerdə istifadə edin: məqalə başlıqları, cədvəl xanaları, etiketli düymələr, siyahıdakı kontaktlar, çörək qırıntıları və fayl yolları.

Android-də Ellipsize: TextView və rejimlər

Android-də ellipsize XML-də android:ellipsize atributu və ya kodda setEllipsize() metodu ilə konfiqurasiya olunur. Hər biri mətnin hansı tərəfdən kəsiləcəyini müəyyən edən dörd rejim mövcuddur.

END rejimi (əksər hallarda standart) sətrin sonunu kəsir və üç nöqtəni konteynerin sağ hissəsində yerləşdirir. START rejimi başlanğıcı kəsir — üç nöqtə solda, görünən mətn sağda. MIDDLE ortasını kəsir, sətrin əvvəlini və sonunu görünən buraxır. MARQUEE rejimi — mətnin animasiyalı sürüşdürülməsi, burada üç nöqtə göstərilmir, mətn dövri olaraq sürüşü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)

Vacib: ellipsize yalnız maxLines və ya singleLine ilə birlikdə işləyir. Sətir sayını məhdudlaşdırmasanız, TextView hündürlükdə böyüyəcək və ellipsize aktivləşməyəcək. Android 8.0-dan (API 26) başlayaraq, ellipsize maxLines > 1 ilə çoxsətirli rejimi dəstəkləyir — üç nöqtə son sətrin sonunda yerləşdirilir.

Proqram çağırışı üçün TextUtils.TruncateAt istifadə edin: END, START, MIDDLE, MARQUEE dəyərlərindən biri ilə. NONE dəyəri ellipsize-i söndürür.

Praktikada END 90% hallarda uyğundur — istifadəçilər mətnin sonda kəsildiyini gözləyirlər. MIDDLE fayl yolları üçün istifadə olunur (məsələn, "/User/.../project/main.kt"), yolun sonu görünməlidir. START — ümumi prefiksli adlar üçün (məsələn, "...@gmail.com").

iOS-da mətnin kəsilməsi: NSLineBreakMode

iOS-da ellipsize-in analoqu UILabel sinfinin lineBreakMode xassəsidir (və UITextView üçün NSTextContainer). Üç kəsmə rejimi mövcuddur: .byTruncatingTail (son), .byTruncatingMiddle (orta) və .byTruncatingHead (başlanğıc).

.byTruncatingTail rejimi android:ellipsize="end"-ə uyğundur. .byTruncatingHead — START, .byTruncatingMiddle — MIDDLE. .byClipping rejimi — mətni üç nöqtəsiz kəsir, müasir interfeyslərdə nadir istifadə olunur. .byCharWrapping rejimi — simvollara görə sarma, kəsmədən.

let label = UILabel()
label.text = "Etiket sərhədlərinə sığmayan uzun mətn"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString həmçinin lineBreakMode-u dəstəkləyir
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

iOS-da truncation numberOfLines ilə birlikdə işləyir. numberOfLines = 1 olarsa, mətn bir sətirdə kəsilir. numberOfLines = 2 olarsa — ikinci sətirdə. UITextView NSTextContainer.lineBreakMode istifadə edir, o da hər üç kəsmə rejimini dəstəkləyir.

iOS-un xüsusiyyəti: UILabel-də .byTruncatingMiddle rejimi qısa sətirlərdə gözlənilməz davrana bilər — əgər sətir tam sığırsa, üç nöqtə görünmür. Qısa sətirlərdə üç nöqtənin göstərilməsini təmin etmək üçün sizeThatFits vasitəsilə xüsusi məntiqdən istifadə edin.

CSS text-overflow: vebdə üç nöqtəni necə etmək olar

Vebdə ellipsize CSS text-overflow: ellipsis xassəsi ilə overflow: hidden və white-space: nowrap kombinasiyasında reallaşdırılır. Bu, veb interfeyslərində sətri üç nöqtə ilə kəsməyin standart üsuludur.

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

text-overflow xassəsi overflow: hidden olmadan işləmir — brauzer məzmunun kəsildiyini bilməlidir. white-space: nowrap sətir sarmasını qadağan edir, əks halda mətn növbəti sətri keçəcək və daşma baş verməyəcək.

Çoxsətirli kəsmə üçün (məsələn, ikinci sətrin sonunda üç nöqtə ilə 2 sətir) əvvəllər -webkit-line-clamp eksperimental xassəsindən istifadə olunurdu, indi CSS Overflow Level 4-də line-clamp kimi standartlaşdırılıb.

Praktikada text-overflow: ellipsis 10 ildən artıqdır bütün müasir brauzerlər tərəfindən dəstəklənir və vebdə mətn kəsməyin ən etibarlı üsuludur.

Doğru kəsmə rejimini necə seçmək olar

Ellipsize rejiminin seçimi UX-ə təsir edir və interfeysin qavranılmasını yaxşılaşdıra və ya istifadəçini çaşdıra bilər. Əsas qayda: istifadəçi kəsilmiş hissənin anlamaq üçün ən az ehtiyac duyulan yerdə olduğunu gözləyir.

END rejimi başlıqlar, etiketlər, adlar üçün uyğundur — istifadəçi sətrin əvvəlini görür və konteksti başa düşür. Sağdakı üç nöqtə "davamı var, amma sığmadı" mənasını verir. Bu, ən intuitiv və geniş yayılmış rejimdir.

MIDDLE rejimi fayl yolları, e-poçt ünvanları və uzun identifikatorlar üçün əvəzsizdir. Sətrin sonu unikal məlumat ehtiva etdikdə (fayl adı, domen), istifadəçi məhz onu görməlidir, başlanğıc isə qısaldıla bilər. Nümunə: "/User/.../important_document.pdf" — dərhal fayl adı görünür.

START rejimi nadir hallarda istifadə olunur, lakin ümumi prefiksli əlaqə siyahısı üçün faydalıdır — məsələn, bütün ünvanlar bir domenə aid olduqda "...@gmail.com" "username@gmail.com" əvəzinə. Lakin bu nümunə daha çox çaşdırır, kömək etməkdən daha çox. Nielsen Norman Group-a görə, istifadəçilər soldan sağa oxuyur və vacib məlumatı əvvəldə gözləyirlər, buna görə START kəsməsi idrak yükünü artırır.

MARQUEE rejimi (hərəkət edən mətn) yalnız aşağı yenilənmə tezliyi olan təksətirli elementlər üçün uyğundur: pleyerdə cari treki, xəbər tickeri, status sətri. Cədvəllər, siyahılar və ya formalar üçün marquee istifadə etməyin — animasiya diqqəti yayındırır və zəif cihazlarda performansı azaldır.

Tipik problemlər və həll yolları

Birinci problem — ellipsize işləmir. Ən çox səbəb sətir sayının məhdudlaşdırılmamasıdır. maxLines olmadan TextView hündürlükdə böyüyür və en üzrə daşma baş vermir. Həll: həmişə maxLines (və ya bir sətir üçün singleLine="true") göstərin.

İkinci problem — mətn proqram dəyişdirildikdə üç nöqtə görünmür. setText() çağırışından sonra TextView düzgün yenidən çəkilməyə bilər. Həll: mətni dəyişdikdən sonra invalidate() və ya post(() -> requestLayout()) çağırın.

Üçüncü problem — müxtəlif Android versiyalarında fərqli davranış. API 23-dən əvvəl ellipsize çoxsətirli rejimdə (maxLines > 1) dəstəklənmirdi. Həll: uyğunluq üçün Build.VERSION.SDK_INT yoxlayın və AndroidX-dən ViewCompat.setEllipsize() istifadə edin.

Dördüncü problem — xüsusi şriftlərdə üç nöqtə simvolu göstərilmir. Şrift U+2026 glifini ehtiva etmirsə, üç nöqtə üç nöqtə ilə əvəz olunur. Həll: şrifti ellipsis glifinin olması üçün yoxlayın və ya fontFamily vasitəsilə fallback şrift əlavə edin.