Dynamic Type: fő fogalmak, szöveges stílusok és működése iOS-ben

Mi az a Dynamic Type iOS-ben

Dynamic Type — iOS technológia, amely az iOS 7-ben jelent meg, és lehetővé teszi, hogy az alkalmazásban lévő szöveg automatikusan alkalmazkodjon a betűméret rendszerbeállításaihoz. A felhasználó egyszerre minden alkalmazásban nagyíthatja vagy kicsinyítheti a betűtípust — anélkül, hogy külön-külön módosítania kellene a beállításokat minden alkalmazásban.

A Apple WWDC 2023, „Make Your App Visually Accessible” szerint az iOS felhasználók több mint 40%-a módosítja a betűméretet az alapértelmezetthez képest. A 65+ életkori csoportban ez az arány eléri a 70%-ot. A Dynamic Type kötelező követelmény az App Store akadálymentesítési tanúsítványához. A támogatás hiánya az alkalmazás elutasításához vezethet a felülvizsgálat során.

Működési elv: az alkalmazás az UIFont(name:size:) helyett a UIFont.preferredFont(forTextStyle:) függvényt használja. Az iOS automatikusan visszaadja a betűtípust az aktuális rendszerbeállítás szerint skálázva. Amikor a méret megváltozik a beállításokban, az iOS létrehozza az UIContentSizeCategory.didChangeNotification értesítést — az alkalmazásnak újra kell számítania az elrendezést.

A Dynamic Type fejlődésének története

A Dynamic Type az iOS 7-ben jelent meg a „lapos” dizájnnal együtt. Az iOS 10-ben hozzáadták az egyéni betűtípusok támogatását az UIFontMetrics segítségével. Az iOS 11 bevezette az akadálymentesítési szinteket (az AccessibilityXXXL-ig). Az iOS 15 hozzáadta a Dynamic Type-ot a SwiftUI-ban automatikus támogatással. Minden kiadással az Apple szigorítja a követelményeket: az iOS 17-től kezdve a Dynamic Type támogatás nélküli alkalmazások figyelmeztetést kapnak az App Store Connect-be történő feltöltéskor.

UIFont.TextStyle szöveges stílusok

Az iOS 8 szöveges stílust kínál, mindegyik előre meghatározott mérettel és megjelenéssel az alapértelmezett beállításhoz:

A megfelelő stílus használata nem csak „külalak” kérdése. Az UIFont.TextStyle.body az AccessibilityXXXL módban elérheti az 53px-t. Ha az alkalmazás rögzített 17px-es betűtípust használ a body-hoz, a szöveg olvashatatlanná válik azon felhasználók számára, akik megnövelték a betűméretet.

Vizuális hierarchia stílusokon keresztül

A Dynamic Type nem csak skáláz — megőrzi a vizuális hierarchiát. A Large Title mindig nagyobb, mint a Title 1, ami nagyobb, mint a Body, függetlenül a skálázás szintjétől. A skálázási együtthatók különböznek: a címek aktívabban skálázódnak, mint a fő szöveg, hogy a hierarchia az akadálymentesítési szinteken is megmaradjon.

Skálázási szintek

Az iOS 11 szintet támogat a szöveg skálázásához, két kategóriára osztva:

• Standard méretek (5 szint): XS, S, M, L (alapértelmezett), XL
• Akadálymentesítési méretek (6 szint): accessibilityXL, accessibilityXXL, accessibilityXXXL, accessibilityXXXXL, accessibilityXXXXXL, accessibilityXXXXXXL

Az XS és az AccessibilityXXXL közötti különbség a body stílusnál 14px-től 53px-ig terjed — csaknem 4×. A 17px-re tervezett elrendezés teljesen összeomlik 53px-nál: a szöveg túllépi a határokat, a gombok átfedik egymást, a cellák egymásra csúszhatnak.

Ellenőrizze az aktuális kategóriát a kódban:

let category = UIApplication.shared.preferredContentSizeCategory
// .extraSmall, .small, .medium, .large, .extraLarge ...
if category.isAccessibilityCategory {
    // Alternatív elrendezés bekapcsolása
}

traitCollection és szövegméret

A szövegméret kategóriája a traitCollection.uiContentSizeCategory-n keresztül érhető el. A rendszerbeállítás megváltozásakor az iOS meghívja a traitCollectionDidChange függvényt az összes UIView-on. Ebben a metódusban frissíteni kell a betűtípusokat és újra kell számítani az elrendezést. A SwiftUI ezt automatikusan megteszi — a UIKit manuális feliratkozást igényel.

Az UICollectionView-hoz használja a UICollectionViewCompositionalLayout-ot — ez automatikusan igazítja az oszlopok számát a képernyő szélességéhez és a szövegmérethez. Az akadálymentesítési szinteken váltson két oszlopos elrendezésről egy oszloposra, hogy a szöveg ne vágódjon le és az elemek ne fedjék egymást. Használjon feltételes elrendezést: regular width esetén — két oszlop, compact vagy accessibility esetén — egy oszlop.

Megvalósítás UIKit-ben

Alap megvalósítás UIKit-ben — UIFont.preferredFont(forTextStyle:). Ez a metódus visszaadja a betűtípust az aktuális rendszerbeállítás szerint skálázva:

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

Az egyéni betűtípusokhoz használja az UIFontMetrics-t:

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

// Méretváltozások követése
NotificationCenter.default.addObserver(
    self,
    selector: #selector(preferredContentSizeChanged),
    name: UIContentSizeCategory.didChangeNotification,
    object: nil
)

Az UILabel számára az Interface Builder-ben elegendő a betűtípust szöveges stílusként (Text Style) beállítani és bekapcsolni a „Automatically Adjusts Font” lehetőséget. Az egyéni betűtípusokhoz az IB nem támogatja az UIFontMetrics-t — csak kódon keresztül.

UIFontMetrics és skálázási görbe

Az UIFontMetrics ugyanazt a skálázási görbét használja, mint a preferredFont. Beállíthatja a fromTextStyle: .body, .headline stb. paramétereket. Minden stílusnak saját skálázási együtthatója van. A Body mérsékeltem skálázódik, a Large Title — agresszíven. Ha az egyéni betűtípusa a fő szöveghez használja, használja a .body-t.

Dynamic Type SwiftUI-ban

A SwiftUI-ban a Dynamic Type támogatása alapértelmezetten be van építve. Az összes rendszermódosító (.font(.body), .font(.title)) automatikusan skálázódik. A fejlesztőnek nem kell meghívnia az UIFont.preferredFont függvényt.

Példa:

Text("Fő szöveg")
    .font(.body)
    .lineLimit(nil)
    .minimumScaleFactor(0.5)

Az egyéni skálákhoz használja a DynamicTypeSize-t:

@Environment(\.dynamicTypeSize) var dynamicTypeSize

var body: some View {
    Text("Adaptív szöveg")
        .font(.body)
        .padding(dynamicTypeSize <= .large ? 8 : 16)
}

A SwiftUI automatikusan frissíti a nézetet a rendszer szövegméretének változásakor — nincs szükség további értesítési feliratkozásokra.

A Dynamic Type korlátozásai SwiftUI-ban

A .font(.body) módosító csak a rendszer betűtípushoz működik. Az egyéni betűtípusokhoz a SwiftUI-ban használja a Font.custom függvényt UIFontMetrics-szel a háttérben. Az iOS 16-tól kezdve a SwiftUI támogatja a DynamicTypeSize használatát az @Environment-ben, ami lehetővé teszi a távolságok és az elrendezés igazítását.

Elrendezés igazítása nagy betűtípusokhoz

Auto Layout — a Dynamic Type támogatásának kötelező feltétele. A rögzített szélességek és magasságok (>=, <=) az akadálymentesítési méreteknél meghibásodnak. Használja az intrinsicContentSize-t az UILabel számára — ez automatikusan kiszámítja a magasságot az aktuális betűméret alapján.

Az adaptív elrendezés szabályai:

• UIStackView distribution = fill és spacing = >= 8 beállítással — az elemek a következő sorba kerülnek
• UITableViewCell automaticDimension beállítással — a cella magassága a tartalomhoz igazodik
• numberOfLines = 0 az UILabel-en — a szöveg nem vágódik le, hanem törik
• Gombok edgeInsets-szel – adjon hozzá távolságokat az akadálymentesítési szinteken a traitCollection.preferredContentSizeCategory segítségével

Hosszú szövegeknél (pl. cikkek, felhasználási feltételek) állítsa be a minimumScaleFactor tulajdonságot az UILabel-en — ez végső megoldásként kicsinyíti a szöveget, amikor az Auto Layout nem tudja elhelyezni a tartalmat. A 0.5 érték azt jelenti, hogy a betűtípus 50%-ra csökkenthető az előnyben részesített mérethez képest.

Példa a távolságok méretkategóriához igazítására:

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)

Gyakori elrendezési problémák az akadálymentesítési szinteken

Szöveg levágása — az UILabel numberOfLines = 1 és rögzített szélesség beállítással levágja a szöveget az AccessibilityXL szinten. Megoldás: numberOfLines = 0 és trailing constraint. Elemek átfedése — a rögzített magasságú gombok átfedik egymást. Megoldás: UIStackView automatikus távolsággal. Kijelzőn túllógó szöveg — ScrollView kötelező az akadálymentesítési szinteken.

Dynamic Type tesztelése

Az Xcode szimulátor lehetővé teszi a szövegméret módosítását: a szimulátor menüjében Settings → Accessibility → Display & Text Size → Larger Text. Váltsák között az összes 11 szint között, és ellenőrizzék, hogy a szöveg nem vágódik-e le, a gombok elérhetőek-e, és az elrendezés nem törik-e meg.

Automatizált teszteléshez használja a contentSizeCategory beállítást az XCUIApplication-ben:

func testAccessibilitySizes() {
    let app = XCUIApplication()
    app.launchArguments += [
        "-UIPreferredContentSizeCategoryName",
        "UICTContentSizeCategoryAccessibilityXXXL"
    ]
    app.launch()
    app.scrollViews.buttons["Küldés"].tap()
    XCTAssertTrue(app.staticTexts["Űrlap elküldve"]
        .waitForExistence(timeout: 5))
}

Az XCUITest különböző launchArguments paraméterekkel lehetővé teszi a skálázás összes szintjének ellenőrzését CI-ban. Ne felejtse el külön ellenőrizni az akadálymentesítési kategóriákat — ezek törik leggyakrabban az elrendezést. Az Apple szerint a Dynamic Type hibáinak 70%-a pontosan az akadálymentesítési szinteken derül ki, mert a fejlesztők csak a standard méreteket tesztelik.

Accessibility Inspector: Dynamic Type ellenőrzése

Az Xcode Accessibility Inspector megmutatja, hogy a kiválasztott elem milyen betűtípusokat használ — rögzítettet vagy skálázhatót. Ha az elem nem reagál a szövegméret változására a szimulátorban, az azt jelenti, hogy rögzített betűtípus van használatban. Cserélje ki UIFont.preferredFont-ra vagy UIFontMetrics-re.