Dynamic Type: mga pangunahing konsepto, estilo ng teksto, at paano ito gumagana sa iOS

Ano ang Dynamic Type sa iOS

Dynamic Type — teknolohiya ng iOS, lumitaw sa iOS 7, na nagpapahintulot sa teksto sa application na awtomatikong umangkop sa mga system setting ng laki ng font. Maaaring palakihin o paliitin ng user ang font sa lahat ng application nang sabay-sabay — nang hindi kinakailangang baguhin ang mga setting sa bawat application nang magkahiwalay.

Ayon sa Apple WWDC 2023, “Make Your App Visually Accessible”, higit sa 40% ng mga gumagamit ng iOS ang nagbabago ng laki ng font mula sa karaniwan. Para sa pangkat ng edad na 65+, ang bilang na ito ay umaabot sa 70%. Ang Dynamic Type ay isang mandatoryong kinakailangan para sa sertipikasyon ng accessibility ng App Store. Ang kakulangan ng suporta ay dahilan para sa pagtanggi ng application sa pagsusuri.

Prinsipyo ng pagpapatakbo: ginagamit ng application ang UIFont.preferredFont(forTextStyle:) sa halip na UIFont(name:size:). Awtomatikong ibinabalik ng iOS ang font na naka-scale ayon sa kasalukuyang setting ng system. Kapag binago ang laki sa mga setting, bumubuo ang iOS ng notification na UIContentSizeCategory.didChangeNotification — dapat kalkulahin muli ng application ang layout.

Kasaysayan ng Pag-unlad ng Dynamic Type

Lumitaw ang Dynamic Type sa iOS 7 kasama ng “flat” na disenyo. Sa iOS 10, idinagdag ang suporta para sa mga custom na font sa pamamagitan ng UIFontMetrics. Ipinakilala ng iOS 11 ang mga antas ng accessibility (hanggang AccessibilityXXXL). Nagdagdag ang iOS 15 ng Dynamic Type sa SwiftUI na may awtomatikong suporta. Sa bawat release, pinapahigpit ng Apple ang mga kinakailangan: simula sa iOS 17, ang mga application na walang suporta sa Dynamic Type ay makakatanggap ng babala kapag nag-upload sa App Store Connect.

Mga Estilo ng Teksto UIFont.TextStyle

Nagbibigay ang iOS ng 8 estilo ng teksto, bawat isa ay may paunang natukoy na laki at hitsura para sa karaniwang setting:

Ang paggamit ng tamang estilo ay hindi lamang tungkol sa “itsura”. Ang UIFont.TextStyle.body sa AccessibilityXXXL mode ay maaaring umabot ng 53px. Kung ang application ay gumagamit ng nakapirming font na 17px para sa body, ang teksto ay magiging hindi nababasa para sa mga user na nagpinalaki ng font.

Visual Hierarchy sa pamamagitan ng mga Estilo

Ang Dynamic Type ay hindi lamang nag-scale — pinapanatili nito ang visual hierarchy. Ang Large Title ay palaging mas malaki kaysa sa Title 1, na mas malaki kaysa sa Body, anuman ang antas ng pag-scale. Ang mga coefficient ng pag-scale ay nagkakaiba: ang mga heading ay mas aktibong nag-scale kaysa sa pangunahing teksto, upang ang hierarchy ay mapanatili kahit sa mga antas ng accessibility.

Mga Antas ng Pag-scale

Sinusuportahan ng iOS ang 11 antas ng pag-scale ng teksto, nahahati sa dalawang kategorya:

• Mga karaniwang sukat (5 antas): XS, S, M, L (default), XL
• Mga sukat ng accessibility (6 na antas): accessibilityXL, accessibilityXXL, accessibilityXXXL, accessibilityXXXXL, accessibilityXXXXXL, accessibilityXXXXXXL

Ang pagkakaiba sa pagitan ng XS at AccessibilityXXXL para sa estilo ng body ay mula 14px hanggang 53px — halos 4×. Ang layout na idinisenyo para sa 17px ay ganap na nasisira sa 53px: lumalabas ang teksto sa mga hangganan, nagsasapawan ang mga button, nagkakatabing mga cell.

Suriin ang kasalukuyang kategorya sa code:

let category = UIApplication.shared.preferredContentSizeCategory
// .extraSmall, .small, .medium, .large, .extraLarge ...
if category.isAccessibilityCategory {
    // I-activate ang alternatibong layout
}

traitCollection at Laki ng Teksto

Ang kategorya ng laki ng teksto ay magagamit sa pamamagitan ng traitCollection.uiContentSizeCategory. Kapag nagbago ang system setting, tinatawag ng iOS ang traitCollectionDidChange sa lahat ng UIView. Sa paraang ito, kailangan i-update ang mga font at muling kalkulahin ang layout. Awtomatikong ginagawa ito ng SwiftUI — ang UIKit ay nangangailangan ng manu-manong subscription.

Para sa UICollectionView, gumamit ng UICollectionViewCompositionalLayout — awtomatiko nitong inaayos ang bilang ng mga column sa lapad ng screen at laki ng teksto. Sa mga antas ng accessibility, lumipat mula sa dalawang-column patungo sa isang-column na layout upang hindi maputol ang teksto at hindi magsapawan ang mga elemento. Gumamit ng conditional na layout: para sa regular width — dalawang column, para sa compact o accessibility — isang column.

Pagpapatupad sa UIKit

Pangunahing pagpapatupad sa UIKit — UIFont.preferredFont(forTextStyle:). Ibinabalik ng paraang ito ang font na naka-scale ayon sa kasalukuyang setting ng system:

titleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
bodyLabel.font = UIFont.preferredFont(forTextStyle: .body)

Para sa mga custom na font gumamit ng UIFontMetrics:

let customFont = UIFont(name: "Montserrat-Regular", size: 16)!
titleLabel.font = UIFontMetrics(forTextStyle: .body)
    .scaledFont(for: customFont)

// Pagsubaybay sa mga pagbabago sa laki
NotificationCenter.default.addObserver(
    self,
    selector: #selector(preferredContentSizeChanged),
    name: UIContentSizeCategory.didChangeNotification,
    object: nil
)

Para sa UILabel sa Interface Builder, sapat na itakda ang font bilang estilo ng teksto (Text Style) at i-on ang “Automatically Adjusts Font”. Para sa mga custom na font, hindi sinusuportahan ng IB ang UIFontMetrics — sa pamamagitan lamang ng code.

UIFontMetrics at Scaling Curve

Gumagamit ang UIFontMetrics ng parehong scaling curve gaya ng preferredFont. Maaari mong itakda ang fromTextStyle: .body, .headline, atbp. Ang bawat estilo ay may sariling coefficient ng pag-scale. Ang Body ay nag-scale nang katamtaman, ang Large Title — nang agresibo. Kung ang iyong custom na font ay ginagamit para sa pangunahing teksto, gamitin ang .body.

Dynamic Type sa SwiftUI

Sa SwiftUI, ang suporta para sa Dynamic Type ay naka-built in bilang default. Lahat ng system modifier (.font(.body), .font(.title)) ay awtomatikong nag-scale. Hindi kailangan ng developer na tawagan ang UIFont.preferredFont.

Halimbawa:

Text("Pangunahing teksto")
    .font(.body)
    .lineLimit(nil)
    .minimumScaleFactor(0.5)

Para sa mga custom na scale gumamit ng DynamicTypeSize:

@Environment(\.dynamicTypeSize) var dynamicTypeSize

var body: some View {
    Text("Adaptive na teksto")
        .font(.body)
        .padding(dynamicTypeSize <= .large ? 8 : 16)
}

Awtomatikong ina-update ng SwiftUI ang view kapag nagbago ang system text size — walang karagdagang subscription sa notification.

Limitasyon ng Dynamic Type sa SwiftUI

Ang modifier na .font(.body) ay gumagana lamang para sa system font. Para sa mga custom na font sa SwiftUI, gumamit ng Font.custom na may UIFontMetrics sa ilalim. Simula sa iOS 16, sinusuportahan ng SwiftUI ang DynamicTypeSize sa @Environment, na nagpapahintulot sa pag-angkop ng mga spacing at layout.

Pag-aangkop ng Layout para sa Malalaking Font

Auto Layout — sapilitang kondisyon para sa suporta sa Dynamic Type. Ang mga nakapirming lapad at taas (>=, <=) ay nasisira sa mga sukat ng accessibility. Gumamit ng intrinsicContentSize para sa UILabel — awtomatiko nitong kinakalkula ang taas batay sa kasalukuyang laki ng font.

Mga panuntunan ng adaptive layout:

• UIStackView na may distribution = fill at spacing = >= 8 — ang mga elemento ay ililipat sa susunod na linya
• UITableViewCell na may automaticDimension — ang taas ng cell ay umaangkop sa nilalaman
• numberOfLines = 0 sa UILabel — ang teksto ay hindi pinuputol kundi bumabalot
• Mga button na may edgeInsets — magdagdag ng mga puwang sa mga antas ng accessibility sa pamamagitan ng traitCollection.preferredContentSizeCategory

Para sa mahabang teksto (hal. mga artikulo, mga tuntunin ng paggamit), itakda ang minimumScaleFactor sa UILabel — pinapaliit nito ang teksto bilang huling paraan kapag hindi mailagay ng Auto Layout ang nilalaman. Ang halagang 0.5 ay nangangahulugang ang font ay maaaring lumiit hanggang 50% ng gustong laki.

Halimbawa ng pag-aangkop ng mga puwang sa kategorya ng laki:

let isAccessibility = traitCollection
    .preferredContentSizeCategory.isAccessibilityCategory
stackView.spacing = isAccessibility ? 16 : 8
button.contentEdgeInsets = isAccessibility
    ? UIEdgeInsets(top: 16, left: 24, bottom: 16, right: 24)
    : UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)

Mga Karaniwang Problema sa Layout sa Mga Antas ng Accessibility

Pagputol ng teksto — UILabel na may numberOfLines = 1 at nakapirming lapad ay pumuputol ng teksto sa AccessibilityXL. Solusyon: numberOfLines = 0 at trailing constraint. Pagsasapawan ng elemento — mga button na may nakapirming taas ay nagsasapawan. Solusyon: UIStackView na may automatic spacing. Paglabas sa hangganan ng screen — ScrollView ay sapilitan sa mga antas ng accessibility.

Pagsubok sa Dynamic Type

Ang Xcode Simulator ay nagpapahintulot na baguhin ang laki ng teksto: sa menu ng simulator Settings → Accessibility → Display & Text Size → Larger Text. Lumipat sa pagitan ng lahat ng 11 antas at suriin kung ang teksto ay hindi pinuputol, ang mga button ay naa-access, at ang layout ay hindi nasisira.

Para sa automated na pagsubok gamitin ang setting ng contentSizeCategory sa XCUIApplication:

func testAccessibilitySizes() {
    let app = XCUIApplication()
    app.launchArguments += [
        "-UIPreferredContentSizeCategoryName",
        "UICTContentSizeCategoryAccessibilityXXXL"
    ]
    app.launch()
    app.scrollViews.buttons["Ipadala"].tap()
    XCTAssertTrue(app.staticTexts["Naipadala ang form"]
        .waitForExistence(timeout: 5))
}

Ang XCUITest na may iba't ibang launchArguments ay nagpapahintulot sa pagsuri ng lahat ng antas ng pag-scale sa CI. Huwag kalimutang suriin ang mga kategorya ng accessibility nang hiwalay — sila ang kadalasang sumisira ng layout. Ayon sa Apple, 70% ng mga bug sa Dynamic Type ay natutuklasan mismo sa mga antas ng accessibility, dahil sinusubok lamang ng mga developer ang mga karaniwang sukat.

Accessibility Inspector: Pagsusuri ng Dynamic Type

Ipinapakita ng Xcode Accessibility Inspector kung anong mga font ang ginagamit ng napiling elemento — nakapirma o scalable. Kung ang elemento ay hindi tumutugon sa pagbabago ng laki ng teksto sa simulator, nangangahulugan ito na gumagamit ito ng nakapirming font. Palitan ito ng UIFont.preferredFont o UIFontMetrics.