Dynamic Type

A walkthrough to support Dynamic Type in iOS Apps. It's a feature which helps a user to change the system text size according to their preference. For many, it may be just a choice, but for some, it is a necessity.

Transcript

1. Dynamic Type Embracing Scaling Fonts Rudrank Riyam,  WWDC Scholarship Winner 2019 Mobile Flock - iOS
2. Introduction to Dynamic Type TableView and AutoLayout Constraints Supporting Accessibility Large Sizes Large Content Viewer Implementation through demo project (s)
3. Introduction to Dynamic Type
8. Dynamic Type A feature which helps a user to change the system text size according to their preference.
9. Dynamic Type For many, it maybe just a choice, but for some it is a necessity.
10. Dynamic Type Easier for visually impaired users who need larger text for better clarity. Helps users with sharper vision to decrease the text size, accommodating more information on the screen.
11. Source: Improving Dynamic Type Support by PSPDFKit
12. tileLabel.font = UIFont.systemFont(ofSize: 17, weight: .regular) ❌ tileLabel.font = UIFont.preferredFont(forTextStyle: .body) ✅ tileLabel.adjustsFontForContentSizeCategory = true
14. guard let customFont = UIFont(name: “CustomFont-abc”, size: UIFont.labelFontSize) else { fatalError(“Font NOT found. :((”) } tileLabel.font = UIFontMetrics(forTextStyle: .body).customFont(for: customFont) tileLabel.adjustsFontForContentSizeCategory = true
15. Accessibility Inspector
18. TableView and AutoLayout Constraints
21. Custom Fonts
22. guard let customFont = UIFont(name: “Avenir-Book”, size: UIFont.labelFontSize) else { fatalError(“”) } nameLabel.font = UIFontMetrics(forTextStyle: .headline).customFont(for: customFont) nameLabel.adjustsFontForContentSizeCategory = true
23. guard let customFont = UIFont(name: “Avenir-Light”, size: UIFont.labelFontSize) else { fatalError(“”) } stateLabel.font = UIFontMetrics(forTextStyle: .subheadline).customFont(f or: customFont) stateLabel.adjustsFontForContentSizeCategory = true
24. Horizontal Constraints
25. nameLabel.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor).isActive = true nameLabel.trailingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.trailingAnchor).isActive = true
26. stateLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor).isActive = true stateLabel.trailingAnchor.constraint(equalTo: nameLabel.trailingAnchor).isActive = true
27. Vertical Constraints
28. nameLabel.firstBaselineAnchor.constraint( equalToSystemSpacingBelow: contentView.layoutMarginsGuide.topAnchor, multiplier: 1).isActive = true
29. contentView.layoutMarginsGuide. topAnchor.constraint(equalToSystemSpacing Below: stateLabel.lastBaselineAnchor, multiplier: 1).isActive = true
30. stateLabel.firstBaselineAnchor.constraint (equalToSystemSpacingBelow: nameLabel.lastBaselineAnchor, multiplier: 1).isActive = true
31. Supporting Accessibility Large Sizes
35. Large Content Viewer
37. PDF Image
38. let trendsView = UIView() trendsView.showsLargeContentViewer = true trendsView.largeContentTitle = “Trends” trendsView.largeContentImage = UIImage(systemName: “arrowTriangle.up.circle”) trendsView.addInteraction(UILargeContentViewerInteraction())
39. Demo Project (s)
40. Contact Twitter : @rudrankriyam LinkedIn : @rudrankriyam GitHub : @rudrankriyam Instagram : @rudrankriyam