Ellipsize mobil ishlanmada — bu nima va matnni kesish usullari

Ellipsize nima?

Ellipsize (ingl. ellipsis — uch nuqta) — bu konteyner o'lchamlaridan oshib ketadigan matnni ko'rsatish texnikasi. Satrni oddiygina chegarada kesish (clip) o'rniga, ellipsize uch nuqta belgisini (Unicode U+2026) qo'shib, foydalanuvchiga yashirin tarkib mavjudligini ko'rsatadi.

Bu atama Android SDK-da mustahkamlangan bo'lib, unda android:ellipsize xususiyati TextView-ning to'lib ketishdagi xatti-harakatini belgilaydi. iOS-da o'xshash funksiya truncation (kesish) deb ataladi va NSLineBreakMode orqali boshqariladi. Vebda CSS text-overflow xususiyati ellipsis qiymati bilan ishlatiladi.

Ellipsize-ning asosiy maqsadi foydalanuvchini xabardor qilish matn qisqartirilganligi haqida. Piksel bo'yicha kesishdan farqli o'laroq, bu so'z ikkiga bo'linishi mumkin, ellipsize esa o'qilishini ta'minlaydi: uch nuqta butun so'z yoki belgidan keyin qo'yiladi, uni buzmasdan. Bu Material Design va Human Interface Guidelines tamoyillariga mos keladi.

Ellipsize-dan konteyner eni qat'iy, matn uzunligi dinamik bo'lgan hamma joyda foydalaning: maqola sarlavhalari, jadval kataklari, yorliqli tugmalar, ro'yxatdagi kontaktlar, nonushtalar va fayl yo'llari.

Android-da Ellipsize: TextView va rejimlar

Android-da ellipsize XML-dagi android:ellipsize atributi yoki koddagi setEllipsize() metodi orqali sozlanadi. Har biri matnning qaysi tomondan kesilishini belgilaydigan to'rtta rejim mavjud.

END rejimi (ko'p hollarda standart) satrning oxirini kesadi va uch nuqtani konteynerning o'ng qismiga qo'yadi. START rejimi boshini kesadi — uch nuqta chapda, ko'rinadigan matn o'ngda. MIDDLE o'rtasini kesadi, satrning boshini va oxirini ko'rinadigan qoldiradi. MARQUEE rejimi — matnning animatsion aylantirilishi, bunda uch nuqta ko'rsatilmaydi, matn tsiklik ravishda aylanadi.

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

Muhim: ellipsize faqat maxLines yoki singleLine bilan birgalikda ishlaydi. Agar satrlar soni cheklanmasa, TextView balandlikda o'sadi va ellipsize faollashmaydi. Android 8.0 (API 26) dan boshlab, ellipsize maxLines > 1 bilan ko'p satrli rejimni qo'llab-quvvatlaydi — uch nuqta oxirgi satrning oxiriga qo'yiladi.

Dasturiy chaqiruv uchun TextUtils.TruncateAt dan END, START, MIDDLE, MARQUEE qiymatlaridan biri bilan foydalaning. NONE qiymati ellipsize-ni o'chiradi.

Amalda END 90% hollarda mos keladi — foydalanuvchilar matn oxirida kesilganini kutishadi. MIDDLE fayl yo'llari uchun ishlatiladi (masalan, "/User/.../project/main.kt"), yo'lning oxiri ko'rinishi uchun. START — umumiy prefiksli nomlar uchun (masalan, "...@gmail.com").

iOS-da matnni kesish: NSLineBreakMode

iOS-da ellipsize-ning analogi UILabel sinfining lineBreakMode xususiyatidir (va UITextView uchun NSTextContainer). Uchta kesish rejimi mavjud: .byTruncatingTail (oxir), .byTruncatingMiddle (o'rta) va .byTruncatingHead (bosh).

.byTruncatingTail rejimi android:ellipsize="end" ga mos keladi. .byTruncatingHead — START, .byTruncatingMiddle — MIDDLE. .byClipping rejimi — matnni uch nuqtasiz kesadi, zamonaviy interfeyslarda kam qo'llaniladi. .byCharWrapping rejimi — belgilar bo'yicha o'rash, kesishsiz.

let label = UILabel()
label.text = "Yorliq chegaralariga sig'maydigan uzun matn"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString shuningdek lineBreakMode-ni qo'llab-quvvatlaydi
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

iOS-da truncation numberOfLines bilan birga ishlaydi. numberOfLines = 1 bo'lsa, matn bir satrda kesiladi. numberOfLines = 2 bo'lsa — ikkinchi satrda. UITextView NSTextContainer.lineBreakMode dan foydalanadi, u ham uchala kesish rejimini qo'llab-quvvatlaydi.

iOS xususiyati: UILabeldagi .byTruncatingMiddle rejimi qisqa satrlarda kutilmagan xatti-harakat qilishi mumkin — agar satr to'liq sig'sa, uch nuqta ko'rinmaydi. Qisqa satrlarda uch nuqta ko'rinishini kafolatlash uchun sizeThatFits orqali maxsus mantiqdan foydalaning.

CSS text-overflow: vebda uch nuqtani qanday qilish

Vebda ellipsize CSS text-overflow: ellipsis xususiyati bilan overflow: hidden va white-space: nowrap kombinatsiyasida amalga oshiriladi. Bu veb interfeyslarida satrni uch nuqta bilan kesishning standart usulidir.

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

text-overflow xususiyati overflow: hidden bo'lmasa ishlamaydi — brauzer tarkibning kesilayotganini bilishi kerak. white-space: nowrap satr o'rashini taqiqlaydi, aks holda matn keyingi satrga o'tadi va to'lib ketish sodir bo'lmaydi.

Ko'p satrli kesish uchun (masalan, ikkinchi satr oxirida uch nuqta bilan 2 satr) ilgari eksperimental -webkit-line-clamp xususiyatidan foydalanilgan, hozir CSS Overflow Level 4 da line-clamp sifatida standartlashtirilgan.

Amalda text-overflow: ellipsis barcha zamonaviy brauzerlar tomonidan 10 yildan ortiq qo'llab-quvvatlanadi va vebda matnni kesishning eng ishonchli usulidir.

To'g'ri kesish rejimini qanday tanlash

Ellipsize rejimini tanlash UX-ga ta'sir qiladi va interfeysni idrok etishni yaxshilashi ham, foydalanuvchini chalkashtirishi ham mumkin. Asosiy qoida: foydalanuvchi kesilgan qism tushunish uchun eng kam kerakli joyda bo'lishini kutadi.

END rejimi sarlavhalar, yorliqlar, nomlar uchun mos keladi — foydalanuvchi satrning boshini ko'radi va kontekstni tushunadi. O'ngdagi uch nuqta "davomi bor, lekin sig'madi" degan ma'noni anglatadi. Bu eng intuitiv va keng tarqalgan rejimdir.

MIDDLE rejimi fayl yo'llari, elektron pochta manzillari va uzun identifikatorlar uchun ajralmasdir. Satrning oxiri noyob ma'lumotni o'z ichiga olganida (fayl nomi, domen), foydalanuvchi aynan uni ko'rishi kerak, boshini esa qisqartirish mumkin. Misol: "/User/.../important_document.pdf" — darhol fayl nomi ko'rinadi.

START rejimi kam qo'llaniladi, lekin umumiy prefiksli kontaktlar ro'yxati uchun foydali — masalan, barcha manzillar bir domenga tegishli bo'lganda "...@gmail.com" "username@gmail.com" o'rniga. Biroq, bu naqsh ko'pincha chalkashtiradi, yordam berishdan ko'ra. Nielsen Norman Group ma'lumotlariga ko'ra, foydalanuvchilar chapdan o'ngga o'qiydilar va muhim ma'lumotni boshida kutadilar, shuning uchun START kesish kognitiv yukni oshiradi.

MARQUEE rejimi (harakatlanuvchi matn) faqat past yangilanish chastotali bir satrli elementlar uchun mos keladi: pleerdagi joriy trek, yangiliklar tickeri, holat satri. Marquee-ni jadvallar, ro'yxatlar yoki formalarda ishlatmang — animatsiya chalg'itadi va zaif qurilmalarda ishlashni pasaytiradi.

Oddiy muammolar va ularning yechimlari

Birinchi muammo — ellipsize ishlamaydi. Ko'pincha sabab satrlar sonining cheklanmaganligi. maxLines bo'lmasa, TextView balandlikda o'sadi va en bo'ylab to'lib ketish sodir bo'lmaydi. Yechim: har doim maxLines (yoki bir satr uchun singleLine="true") ko'rsating.

Ikkinchi muammo — matn dasturiy o'zgartirilganda uch nuqta ko'rinmaydi. setText() chaqiruvidan keyin TextView to'g'ri qayta chizilmasligi mumkin. Yechim: matnni o'zgartirgandan so'ng invalidate() yoki post(() -> requestLayout()) chaqiring.

Uchinchi muammo — turli Android versiyalarida turlicha xatti-harakat. API 23 dan oldin ellipsize ko'p satrli rejimda (maxLines > 1) qo'llab-quvvatlanmas edi. Yechim: moslik uchun Build.VERSION.SDK_INT ni tekshiring va AndroidX dan ViewCompat.setEllipsize() dan foydalaning.

To'rtinchi muammo — maxsus shriftlarda uch nuqta belgisi ko'rinmaydi. Agar shrift U+2026 glifini o'z ichiga olmasa, uch nuqta uch nuqta bilan almashtiriladi. Yechim: shriftni ellipsis glifi mavjudligi uchun tekshiring yoki fontFamily orqali zaxira shrift qo'shing.