Dynamic Type: ano ito, pag-scale ng font sa iOS

Ano ang Dynamic Type?

Dynamic Type — teknolohiya ng Apple na nagpapahintulot sa mga font ng app na awtomatikong mag-scale kapag nagbago ang laki ng teksto ng system. Itinatakda ng user ang gustong laki sa Settings → Accessibility → Display & Text Size, at lahat ng app na sumusuporta sa Dynamic Type ay nag-aadapt ng laki ng titik nang walang restart.

Nag-aalok ang system ng 11 antas ng pag-scale: mula XS (14pt base) hanggang XXXL (23pt base), pati na rin ang 5 karagdagang laki ng accessibility (AX1–AX5) para sa mga user na may matinding kapansanan sa paningin. Kapag nagbago ang laki, bumubuo ang iOS ng notipikasyon na UIContentSizeCategory.didChangeNotification, at dapat basahin muli ng app ang mga font sa pamamagitan ng UIFontMetrics. Ayon sa Apple Human Interface Guidelines, hindi binabago ng Dynamic Type ang spacing ng linya at proporsyon ng titik — tanging ang laki ng titik, na nagpapanatili ng pagkabasa sa lahat ng laki.

Kinakailangan ang Dynamic Type para sa mga app na naglalayon sa katayuan ng accessibility. Sa WWDC 2024, inanunsyo ng Apple na ang mga app na walang suporta para sa dynamic na uri ay nanganganib na tanggihan sa review kung ang pangunahing functionality nila ay may kaugnayan sa pagbabasa ng teksto. Sa mga proyekto ng IT Sectr, ipinapatupad namin ang Dynamic Type mula sa unang bersyon — nakakatipid ito ng hanggang 20% ng oras para sa kasunod na adaptasyon sa accessibility.

Mga estilo ng teksto sa iOS: mula largeTitle hanggang caption2

Nagbibigay ang Apple ng 11 paunang natukoy na estilo ng teksto, bawat isa ay ipinapakita sa UIFontDescriptor.UIAttributes para sa system font na SF Pro. Hindi tinutukoy ng developer ang laki sa pixel — pumipili siya ng semantikong estilo, at inilalapat ng iOS ang nararapat na laki ng titik batay sa mga setting ng user.

Bawat estilo ay gumagamit ng system font na SF Pro na may nakapirming anyo (Regular para sa body, Bold para sa headline). Ang mga custom na font ay ikinokonekta sa pamamagitan ng UIFontMetrics — ang tanging tamang paraan upang i-adapt ang third-party na font sa dynamic na uri.

UIFontMetrics: pag-adapt ng custom na font

UIFontMetrics — klase na ipinakilala sa iOS 11, na nag-scale ng anumang UIFont nang proporsyonal sa napiling estilo ng teksto. Bago ang iOS 11, gumamit ang mga developer ng direktang tawag sa preferredFontForTextStyle, na nagbabalik lamang ng system font na SF Pro. Niresolba ng UIFontMetrics ang problemang ito: tumatanggap ito ng anumang font at ibinabalik ang naka-scale na bersyon nito, na pinapanatili ang anyo at proporsyon.

Kinakalkula ng pamamaraang scaledFont(for:) ang factor ng pag-scale batay sa kasalukuyang laki ng teksto ng user: kung napili ang laki na "Malaki" (Large), ang factor ay 1.0; kung "Napakalaki" (AX1) — humigit-kumulang 1.3; para sa "Maksimum" (AX5) — hanggang 1.8. Ang factor ay inilalapat sa base size ng custom na font, hindi sa system font — ginagarantiyahan nito na ang disenyo ay nananatili sa lahat ng laki.

Ang UIFontMetrics ay inirerekomenda para sa lahat ng custom na font sa app. Sa WWDC 2024, ipinakita ng Apple ang tool na Accessibility Inspector, na sumusuri ng suporta sa Dynamic Type at nagha-highlight ng mga elementong gumagamit ng nakapirming laki sa halip na UIFontMetrics. Sa IT Sectr, ipinatupad namin ang UIFontMetrics sa lahat ng proyekto mula noong 2018 — binawasan nito ang bilang ng mga bug na may magkakapatong na teksto ng 35%.

Mga halimbawa ng code sa Swift

Halimbawa 1: System font sa pamamagitan ng preferredFontForTextStyle

Ang pinakasimpleng paraan upang makakuha ng dynamic na font para sa isang label. Ipinapakita ng code kung paano mag-set ng UILabel na may estilo .body na awtomatikong tumutugon sa pagbabago ng laki ng teksto ng system.

import UIKit

class GreetingViewController: UIViewController {

    private let label: UILabel = {
        let l = UILabel()
        l.text = "Hello, Dynamic Type!"
        l.font = UIFont.preferredFont(forTextStyle: .body)
        l.adjustsFontForContentSizeCategory = true
        l.translatesAutoresizingMaskIntoConstraints = false
        return l
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(label)
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        ])
    }
}

Ang bandila na adjustsFontForContentSizeCategory = true ay awtomatikong nag-aupdate ng font kapag nagbago ang laki ng teksto ng system — kung wala ang bandilang ito, hindi gagana ang Dynamic Type para sa umiiral na label. Kapag nagbago ang laki, tinatawagan ng iOS ang layoutIfNeeded, at inaupdate ng label ang font nang walang manu-manong interbensyon.

Halimbawa 2: Custom na font sa pamamagitan ng UIFontMetrics

Kapag gumagamit ng custom na font (hal. Montserrat), ibabalik ng tawag na preferredFontForTextStyle ang SF Pro, hindi ang iyong font. Ang UIFontMetrics ay nag-scale nang eksakto ng custom na font, na pinapanatili ang disenyo nito.

import UIKit

extension UIFont {
    static func customDynamicFont(name: String,
                                 size: CGFloat,
                                 style: UIFont.TextStyle) -> UIFont {
        guard let baseFont = UIFont(name: name, size: size) else {
            return .preferredFont(forTextStyle: style)
        }
        return UIFontMetrics(forTextStyle: style).scaledFont(for: baseFont)
    }
}

let titleFont = UIFont.customDynamicFont(
    name: "Montserrat-Bold",
    size: 20,
    style: .title3
)

Ang pamamaraang scaledFont(for:) ay tumatanggap ng base UIFont at nagbabalik ng naka-scale na bersyon na proporsyonal sa estilo .title3. Sa laki ng accessibility na AX5, ang font na Montserrat-Bold 20pt ay nagiging ~36pt — eksaktong kung gaano tataas ang system font ng estilong ito. Sa IT Sectr, ginagamit namin ang pattern na ito sa lahat ng proyekto na may custom na font mula noong 2018, na ganap na nag-alis ng mga reklamo tungkol sa maliit na teksto mula sa mga user na may limitasyon sa paningin.

Halimbawa 3: Pag-subscribe sa pagbabago ng laki

Kung manu-mano mong inaupdate ang font (nang walang adjustsFontForContentSizeCategory), mag-subscribe sa notipikasyon na UIContentSizeCategory.didChangeNotification. Ito ay kinakailangan para sa custom na UI elemento na hindi nagmamana ng awtomatikong pag-update ng font.

import UIKit

class DynamicLabel: UILabel {

    private var customFont: UIFont?
    private var textStyle: UIFont.TextStyle = .body

    func configure(font: UIFont, style: UIFont.TextStyle) {
        customFont = font
        textStyle = style
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(updateFont),
            name: UIContentSizeCategory.didChangeNotification,
            object: nil
        )
        updateFont()
    }

    @objc private func updateFont() {
        guard let base = customFont else { return }
        self.font = UIFontMetrics(forTextStyle: textStyle).scaledFont(for: base)
    }

    deinit {
        NotificationCenter.default.removeObserver(self)
    }
}

Ang pag-subscribe sa didChangeNotification ay ginagarantiyahan na ang custom na elemento ay mag-aupdate ng font sa bawat pagbabago ng mga setting ng system nang hindi nire-restart ang app. Mula noong iOS 15, dumarating ang notipikasyon kahit na kapag binago ang laki ng teksto sa pamamagitan ng Control Center sa mga app na sumusuporta sa Live Text Size.