Szöveg és tipográfia a mobilfejlesztésben: mi ez, milyen eszközök és hogyan működik

Szöveg mobilalkalmazásokban: NSAttributedString iOS-en

NSAttributedString az alapvető iOS osztály a formázott szöveggel való munkához. Lehetővé teszi attribútumok alkalmazását egyes karakterekre vagy tartományokra: betűtípus az UIFont segítségével, szín az UIColor segítségével, karakterköz a kern segítségével és sorköz az NSMutableParagraphStyle segítségével. Mobilalkalmazásokban az NSAttributedString mindenhol használatos — az UILabel-től a szerkesztést támogató összetett UITextView-ig.

UIFont és betűtípus konfiguráció

UIFont a fő osztály a betűtípusokkal való munkához iOS-en. Támogatja a rendszerbetűtípusokat, az egyéni betűtípusokat és a Dynamic Type-ot. Az UIFont(name:size:) név alapján tölt be betűtípust, az UIFont.systemFont(ofSize:weight:) a rendszerbetűtípust tölti be. Az UIFontDescriptor lehetővé teszi egy meglévő betűtípus módosítását: méret, súly megváltoztatása vagy transzformációs mátrix hozzáadása. Egyéni betűtípusok esetén a .ttf fájl hozzáadódik a projekthez, és regisztrálásra kerül az Info.plist-ben a Fonts provided by application kulcs alatt.

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont(name: "HelveticaNeue-Bold", size: 18) as Any,
    .foregroundColor: UIColor.darkGray as Any,
    .kern: 1.5 as Any
]
let attributedString = NSAttributedString(
    string: "Форматированный текст",
    attributes: attributes
)
label.attributedText = attributedString

NSMutableParagraphStyle és bekezdésformázás

NSMutableParagraphStyle a ParagraphStyle módosítható változata a bekezdések megjelenítésének konfigurálásához. Szabályozza az igazítást (alignment), a sorközt (lineSpacing), a behúzásokat (headIndent, tailIndent) és a tördelési módot (lineBreakMode). A ParagraphStyle kritikus fontosságú a hosszú szövegek olvashatóságához mobileszközökön: a megfelelő lineSpacing megakadályozza a sorok összeolvadását, a lineBreakMode pedig a szavak levágását. A paragraphSpacing beállítás határozza meg a bekezdések közötti távolságot.

Szöveg mobilalkalmazásokban: SpannableString Androidon

SpannableString a fő eszköz a szöveg formázására Androidon. Span objektumok mechanizmusán keresztül működik, amelyek mindegyike egy-egy aspektusért felelős: StyleSpan a félkövér vagy dőlt, ForegroundColorSpan a szín, URLSpan a hivatkozások, UnderlineSpan az aláhúzás. A SpannableStringBuilder az NSMutableAttributedString megfelelője, lehetővé téve a szöveg több töredékből való felépítését. A SpannableString megértése elengedhetetlen a formázott szöveggel rendelkező rugalmas felületek létrehozásához mobilalkalmazásokban.

Typeface és egyéni betűtípusok Androidon

Typeface az osztály a betűtípusokkal való munkához Androidon. Támogatja a Roboto és Noto rendszerbetűtípusokat, valamint az egyéni betűtípusokat. A Typeface.createFromResource() a res/font/ mappából tölt be betűtípust, a Typeface.createFromAsset() az assets mappából. Az Android 8.0+ támogatja a betűtípuscsaládokat XML-ben, több betűtípusfájlt egyetlen erőforrássá egyesítve. Az egyéni betűtípus a szöveghez mobilalkalmazásokban Androidon az android:fontFamily attribútummal vagy programozottan a setTypeface() segítségével állítható be.

TextMeasurer és szövegmérés

TextMeasurer (API 29+) egy modern eszköz a szöveg mérésére anélkül, hogy egy View-hoz kötődne. Kiszámítja a szélességet, magasságot és karakterpozíciókat a renderelés előtt. Régebbi API-ken a Paint.measureText() használatos egysoros szöveghez vagy a StaticLayout többsoros szöveghez. A TextMeasurer különösen hasznos egyéni nézetekben, ahol a szöveg a Canvas.drawText() segítségével rajzolódik ki. A helyes mérés megakadályozza a karakterek levágását a felületen.

val spannable = SpannableString("Жирный текст с цветом")
spannable.setSpan(
    StyleSpan(Typeface.BOLD),
    0, 6,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
spannable.setSpan(
    ForegroundColorSpan(Color.RED),
    14, 19,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
textView.text = spannable

Tipográfia a mobilfejlesztésben: kerning, ligatúrák és tracking

Tipográfia a mobilalkalmazásokban a betűtípusok, karakterközök és sorközök átfogó konfigurációja. A megfelelő tipográfia a mobilfejlesztésben közvetlenül befolyásolja a szöveg olvashatóságát és a felület vizuális érzékelését. Nézzük meg a legfontosabb paramétereket, amelyek mindkét platformon elérhetők.

Kerning és Tracking

Kerning a konkrét karakterpárok (AV, To, Wa) közötti távolság beállítása. Tracking az egységes karakterköz a teljes szöveg vagy annak egy része számára. iOS-en a kerning az NSKernAttributeName segítségével állítható be, Androidon — a TextView letterSpacing tulajdonságán keresztül. A negatív értékek közelebb hozzák a karaktereket, a pozitív értékek távolítják őket. A tipográfia a mobilfejlesztésben e paraméterek gondos hangolását igényli: a nagy címsoroknál a karakterköz általában növekszik, a törzsszövegnél standard marad.

Ligatúrák

Ligatúrák speciális glifák, amelyek két vagy több karakter kombinációját (fi, fl, ffi) helyettesítik. iOS-en a ligatúrák az NSLigatureAttributeName segítségével vezérelhetők: 0 — kikapcsolva, 1 — standard, 2 — minden elérhető. Androidon a ligatúrák betűtípus szinten, OpenType funkciókon keresztül vezérelhetők. A ligatúrák bekapcsolása javítja a szöveg megjelenését, különösen a talpas betűtípusoknál. A tipográfia a mobilfejlesztésben a ligatúrákat elsősorban címsorokhoz és logókhoz használja.

Egyéni betűtípusok mobilalkalmazásokban: betöltés és konfiguráció

Egyéni betűtípusok az egyik fő eszköz az alkalmazás egyedi vizuális stílusának kialakításához. Segítenek kiemelni a márkát és javítani a felhasználói élményt. Mobilalkalmazásokban az egyéni betűtípusokat címsorokhoz, logókhoz, akcentuselemekhez és vállalati arculathoz használják.

Változó betűtípusok

Változó betűtípusok egy modern betűtípus-technológia, ahol egyetlen fájl több stílust tartalmaz: a vékonytól a rendkívül vastagig, a keskenytől a szélesig. Ez csökkenti az alkalmazás méretét azáltal, hogy több betűtípusfájlt egyetlen fájllal helyettesít. iOS-en a Változó betűtípusok az UIFont-on keresztül támogatottak a weight paraméterrel. Androidon — a Typeface.Builder segítségével a wght, wdth, slnt variabilitási tengelyek megadásával. A Változó betűtípusok használata leegyszerűsíti a tipográfiát a mobilalkalmazásokban: a fejlesztőnek nem kell külön fájlokat betöltenie minden stílushoz.

let customFont = UIFont(name: "CustomFont-Regular", size: 16)
let scaledFont = UIFontMetrics.default
    .scaledFont(for: customFont)
label.font = scaledFont
label.adjustsFontForContentSizeCategory(true)

NSTextAttachment és ImageSpan

NSTextAttachment iOS-en lehetővé teszi UIImage beágyazását az NSAttributedString-be — a kép az alapvonalhoz igazodik, és együtt mozog a szöveggel. Androidon a megfelelője az ImageSpan a SpannableString-en belül. Mindkét megközelítés hasznos az emojis csevegéshez, ikonos hírfolyamokhoz és egyéni jelölőnégyzetes űrlapokhoz. Fontos, hogy a képet megfelelően méretezzük a betűtípus magasságához, hogy a szöveg és a grafika harmonikusan nézzen ki.

Szövegeffektusok, igazítás és ellipszis

Az alapvető formázáson kívül a szöveg mobilalkalmazásokban további vizuális effektusokat támogat: árnyékokat, kontúrokat, áthúzást és aláhúzást. Ezek az eszközök bővítik a tipográfia lehetőségeit, de gondos alkalmazást igényelnek az olvashatóság megőrzéséhez.

Szövegárnyék és kontúr

Szövegárnyék iOS-en az NSShadow segítségével állítható be offset, blurRadius és color paraméterekkel. Kontúr — az NSStrokeWidthAttributeName segítségével: a negatív értékek kitöltést hoznak létre kontúrral, a pozitív értékek csak a kontúrt. Áthúzás — NSUnderlineStyle (.single, .thick, .double). Androidon a TextView árnyék az android:shadowRadius, android:shadowDx, android:shadowDy segítségével konfigurálható. A SpannableString támogatja a StrikethroughSpan-t és az UnderlineSpan-t. A szövegkontúr Androidon az OutlineSpan vagy egy egyéni betűtípus segítségével valósítható meg.

Ellipszis és Marquee

Ellipszis a szöveg levágása három ponttal, amikor a tároló túlcsordul. iOS-en a lineBreakMode .byTruncatingTail és numberOfLines segítségével konfigurálható. Androidon — az android:ellipsize="end" és android:maxLines segítségével. Marquee egy görgető szöveges animáció, amely Androidon az android:ellipsize="marquee" segítségével érhető el. iOS-en nincs beépített megfelelője — a MarqueeLabel könyvtár használatos. Az ellipszis kötelező minden egysoros szövegnél a mobilalkalmazásokban a tartalom levágásának elkerülése érdekében.

Dynamic Type iOS-en

Dynamic Type egy adaptív szövegrendszer iOS-en, amely a felhasználó akadálymentesítési beállításai alapján állítja be a betűméretet. Használja az UIFontMetrics-t az egyéni betűtípusok méretezéséhez. A Dynamic Type kötelező az akadálymentesítés-kompatibilis alkalmazásokhoz. Androidon a megfelelője az sp egységek és a scaledPixels, amelyek a rendszer szövegméret-beállításai szerint méreteződnek.