Teksto at Tipograpiya sa Mobile Development: Ano Ito, Anong Mga Tool at Paano Gumagana

Teksto sa Mobile Apps: NSAttributedString sa iOS

NSAttributedString ang pangunahing iOS class para sa pagtatrabaho sa naka-format na teksto. Pinapayagan nito ang paglalapat ng mga attribute sa mga indibidwal na character o range: font sa pamamagitan ng UIFont, kulay sa pamamagitan ng UIColor, spacing ng character sa pamamagitan ng kern, at line spacing sa pamamagitan ng NSMutableParagraphStyle. Sa mga mobile app, ang NSAttributedString ay ginagamit kahit saan — mula UILabel hanggang sa kumplikadong UITextView na may suporta sa pag-edit.

UIFont at Configuration ng Font

UIFont ang pangunahing class para sa pagtatrabaho sa mga font sa iOS. Sinusuportahan nito ang mga system typeface, custom na font, at Dynamic Type. Ang UIFont(name:size:) ay naglo-load ng font ayon sa pangalan, ang UIFont.systemFont(ofSize:weight:) ay naglo-load ng system font. Ang UIFontDescriptor ay nagpapahintulot sa pagbabago ng isang umiiral na font: pagpapalit ng laki, bigat, o pagdaragdag ng transformation matrix. Para sa mga custom na font, ang .ttf file ay idinaragdag sa proyekto at nirerehistro sa Info.plist sa ilalim ng key na Fonts provided by application.

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 at Pag-format ng Talata

NSMutableParagraphStyle ay isang nababagong bersyon ng ParagraphStyle para sa pag-configure ng pagpapakita ng talata. Kinokontrol nito ang alignment, line spacing (lineSpacing), indentation (headIndent, tailIndent), at mode ng pagputol (lineBreakMode). Ang ParagraphStyle ay kritikal para sa pagiging madaling mabasa ng mahabang teksto sa mga mobile device: ang tamang lineSpacing ay pumipigil sa pagsasama ng mga linya, at ang lineBreakMode ay pumipigil sa pagputol ng mga salita. Ang setting na paragraphSpacing ay tumutukoy sa espasyo sa pagitan ng mga talata.

Teksto sa Mobile Apps: SpannableString sa Android

SpannableString ang pangunahing tool para sa pag-format ng teksto sa Android. Gumagana ito sa pamamagitan ng mekanismo ng mga Span object, bawat isa ay responsable para sa isang aspeto: StyleSpan para sa bold o italic, ForegroundColorSpan para sa kulay, URLSpan para sa mga link, UnderlineSpan para sa salungguhit. Ang SpannableStringBuilder ay katumbas ng NSMutableAttributedString, na nagpapahintulot sa pagbuo ng teksto mula sa maraming fragment. Ang pag-unawa sa SpannableString ay mahalaga para sa paglikha ng mga flexible na interface na may naka-format na teksto sa mga mobile app.

Typeface at Custom na Font sa Android

Typeface ang class para sa pagtatrabaho sa mga font sa Android. Sinusuportahan nito ang mga system typeface na Roboto at Noto, pati na rin ang mga custom na font. Ang Typeface.createFromResource() ay naglo-load ng font mula sa res/font/, ang Typeface.createFromAsset() ay naglo-load mula sa folder ng assets. Ang Android 8.0+ ay sumusuporta sa mga pamilya ng font sa XML, na pinagsasama ang maraming file ng font sa iisang resource. Ang isang custom na font para sa teksto sa mga mobile app sa Android ay itinatakda sa pamamagitan ng attribute na android:fontFamily o programmatically gamit ang setTypeface().

TextMeasurer at Pagsukat ng Teksto

TextMeasurer (API 29+) ay isang modernong tool para sa pagsukat ng teksto nang hindi nakatali sa isang View. Kinakalkula nito ang lapad, taas, at posisyon ng mga character bago mag-render. Sa mga lumang API, ang Paint.measureText() ay ginagamit para sa solong-linya na teksto o StaticLayout para sa multi-linya na teksto. Ang TextMeasurer ay lalong kapaki-pakinabang sa mga custom na View kung saan ang teksto ay iginuhit sa pamamagitan ng Canvas.drawText(). Ang tamang pagsukat ay pumipigil sa pagputol ng mga character sa interface.

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

Tipograpiya sa Mobile Development: Kerning, Ligature at Tracking

Tipograpiya sa mga mobile app ay isang komprehensibong configuration ng mga font, character spacing, at line spacing. Ang tamang tipograpiya sa mobile development ay direktang nakakaapekto sa pagiging madaling mabasa ng teksto at visual na persepsyon ng interface. Tingnan natin ang mga pangunahing parameter na available sa parehong platform.

Kerning at Tracking

Kerning ay ang pagsasaayos ng espasyo sa pagitan ng mga tiyak na pares ng character (AV, To, Wa). Tracking ay pare-parehong spacing ng character para sa buong teksto o bahagi nito. Sa iOS, ang kerning ay itinatakda sa pamamagitan ng NSKernAttributeName, sa Android — sa pamamagitan ng property na letterSpacing ng TextView. Ang mga negatibong halaga ay naglalapit sa mga character, ang mga positibong halaga ay nagpapalayo sa kanila. Ang tipograpiya sa mobile development ay nangangailangan ng maingat na pag-tune ng mga parameter na ito: para sa malalaking heading, ang spacing ng character ay karaniwang pinapataas, para sa body text ito ay nananatiling pamantayan.

Ligature

Ligature ay mga espesyal na glyph na pumapalit sa mga kumbinasyon ng dalawa o higit pang character: fi, fl, ffi. Sa iOS, ang mga ligature ay kinokontrol sa pamamagitan ng NSLigatureAttributeName: 0 — hindi pinagana, 1 — pamantayan, 2 — lahat ng available. Sa Android, ang mga ligature ay kinokontrol sa antas ng font sa pamamagitan ng mga feature ng OpenType. Ang pagpapagana ng mga ligature ay nagpapabuti sa hitsura ng teksto, lalo na sa mga serif typeface. Ang tipograpiya sa mobile development ay gumagamit ng mga ligature pangunahin para sa mga heading at logo.

Custom na Font sa Mobile Apps: Pag-load at Configuration

Custom na font ay isa sa mga pangunahing tool para sa paglikha ng kakaibang visual na estilo para sa isang app. Tumutulong ang mga ito na i-highlight ang brand at pahusayin ang karanasan ng user. Sa mga mobile app, ang mga custom na font ay ginagamit para sa mga heading, logo, accent element, at corporate identity.

Mga Variable Font

Mga Variable Font ay isang modernong teknolohiya ng font kung saan ang isang file ay naglalaman ng maraming estilo: mula manipis hanggang sobrang bold, mula makitid hanggang malapad. Binabawasan nito ang laki ng app sa pamamagitan ng pagpapalit ng ilang file ng font ng iisa. Sa iOS, ang mga Variable Font ay sinusuportahan sa pamamagitan ng UIFont na may parameter na weight. Sa Android — sa pamamagitan ng Typeface.Builder na tumutukoy sa mga axis ng variability na wght, wdth, slnt. Ang paggamit ng mga Variable Font ay nagpapasimple ng tipograpiya sa mga mobile app: ang developer ay hindi kailangang mag-load ng hiwalay na mga file para sa bawat estilo.

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

NSTextAttachment at ImageSpan

NSTextAttachment sa iOS ay nagpapahintulot sa pag-embed ng UIImage sa loob ng NSAttributedString — ang imahe ay nakahanay sa baseline at gumagalaw kasama ng teksto. Sa Android, ang katumbas ay ImageSpan sa loob ng SpannableString. Ang parehong approach ay kapaki-pakinabang para sa chat na may emoji, news feed na may icon, at form na may custom na checkbox. Mahalaga na wastong i-scale ang imahe upang tumugma sa taas ng font upang ang teksto at graphics ay magmukhang magkakasundo.

Mga Epekto ng Teksto, Alignment at Ellipsis

Bukod sa pangunahing pag-format, ang teksto sa mga mobile app ay sumusuporta sa karagdagang visual effect: mga anino, outline, strikethrough, at salungguhit. Ang mga tool na ito ay nagpapalawak ng mga posibilidad ng tipograpiya ngunit nangangailangan ng maingat na paglalapat upang mapanatili ang pagiging madaling mabasa.

Anino at Outline ng Teksto

Anino ng teksto sa iOS ay itinatakda sa pamamagitan ng NSShadow na may offset, blurRadius, at color. Outline — sa pamamagitan ng NSStrokeWidthAttributeName: ang mga negatibong halaga ay lumilikha ng fill na may outline, ang mga positibong halaga ay lumilikha lamang ng contour. Strikethrough — NSUnderlineStyle (.single, .thick, .double). Sa Android, ang anino ng TextView ay naka-configure sa pamamagitan ng android:shadowRadius, android:shadowDx, android:shadowDy. Sinusuportahan ng SpannableString ang StrikethroughSpan at UnderlineSpan. Ang outline ng teksto sa Android ay ipinapatupad sa pamamagitan ng OutlineSpan o isang custom na font.

Ellipsis at Marquee

Ellipsis ay pagputol ng teksto na may ellipsis kapag umapaw ang container. Sa iOS, ito ay naka-configure sa pamamagitan ng lineBreakMode .byTruncatingTail at numberOfLines. Sa Android — sa pamamagitan ng android:ellipsize="end" at android:maxLines. Marquee ay isang scrolling text animation na available sa Android sa pamamagitan ng android:ellipsize="marquee". Sa iOS, walang built-in na katumbas — ang library na MarqueeLabel ay ginagamit. Ang ellipsis ay sapilitan para sa lahat ng solong-linya na teksto sa mga mobile app upang maiwasan ang pagputol ng nilalaman.

Dynamic Type sa iOS

Dynamic Type ay isang adaptive text system sa iOS na nag-aayos ng laki ng font batay sa mga setting ng Accessibility ng user. Gamitin ang UIFontMetrics para i-scale ang mga custom na font. Ang Dynamic Type ay sapilitan para sa mga app na sumusunod sa Accessibility. Sa Android, ang katumbas ay mga unit na sp at scaledPixels, na nagsi-scale ayon sa mga setting ng laki ng teksto ng system.