Skip to content

Commit

Permalink
Create UIContentSizeCategoryPage (#32)
Browse files Browse the repository at this point in the history
  • Loading branch information
giovaninppc authored Oct 5, 2022
1 parent 56ecbce commit 0996b8c
Show file tree
Hide file tree
Showing 10 changed files with 337 additions and 128 deletions.
8 changes: 8 additions & 0 deletions Accessibility Handbook.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
3F4E7F9328DCB46700710F18 /* AdjustableCounter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F4E7F9228DCB46700710F18 /* AdjustableCounter.swift */; };
3F4E7F9528DCBC1600710F18 /* ImageAsset.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F4E7F9428DCBC1600710F18 /* ImageAsset.swift */; };
3F4E7F9728DCCFE500710F18 /* AColorfulMessage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F4E7F9628DCCFE500710F18 /* AColorfulMessage.swift */; };
3F54B62B28EE0D3400574932 /* UIContentSize.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F54B62A28EE0D3400574932 /* UIContentSize.swift */; };
3F54B62D28EE1B6A00574932 /* UIContentSizeCategory+Extensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F54B62C28EE1B6A00574932 /* UIContentSizeCategory+Extensions.swift */; };
3F6C5ABA28E3748A00B12065 /* MultiFingerSwipe.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F6C5AB928E3748A00B12065 /* MultiFingerSwipe.swift */; };
3F6C5ABC28E37FED00B12065 /* MultiFingerTap.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F6C5ABB28E37FED00B12065 /* MultiFingerTap.swift */; };
3F6C5ABF28E394D000B12065 /* AboutFontsPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F6C5ABE28E394D000B12065 /* AboutFontsPage.swift */; };
Expand Down Expand Up @@ -150,6 +152,8 @@
3F4E7F9228DCB46700710F18 /* AdjustableCounter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AdjustableCounter.swift; sourceTree = "<group>"; };
3F4E7F9428DCBC1600710F18 /* ImageAsset.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageAsset.swift; sourceTree = "<group>"; };
3F4E7F9628DCCFE500710F18 /* AColorfulMessage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AColorfulMessage.swift; sourceTree = "<group>"; };
3F54B62A28EE0D3400574932 /* UIContentSize.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UIContentSize.swift; sourceTree = "<group>"; };
3F54B62C28EE1B6A00574932 /* UIContentSizeCategory+Extensions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIContentSizeCategory+Extensions.swift"; sourceTree = "<group>"; };
3F6C5AB928E3748A00B12065 /* MultiFingerSwipe.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MultiFingerSwipe.swift; sourceTree = "<group>"; };
3F6C5ABB28E37FED00B12065 /* MultiFingerTap.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MultiFingerTap.swift; sourceTree = "<group>"; };
3F6C5ABE28E394D000B12065 /* AboutFontsPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AboutFontsPage.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -308,6 +312,7 @@
isa = PBXGroup;
children = (
3F6C5ABE28E394D000B12065 /* AboutFontsPage.swift */,
3F54B62A28EE0D3400574932 /* UIContentSize.swift */,
);
path = Pages;
sourceTree = "<group>";
Expand Down Expand Up @@ -445,6 +450,7 @@
3FBF057728DA712C00DA5BF5 /* ToAny.swift */,
3FF4A29A28DF93B1005D291A /* Icons.swift */,
3FF4A29C28DF93F3005D291A /* String+Extensions.swift */,
3F54B62C28EE1B6A00574932 /* UIContentSizeCategory+Extensions.swift */,
);
path = UI;
sourceTree = "<group>";
Expand Down Expand Up @@ -819,6 +825,7 @@
files = (
3FBF05D828DB545700DA5BF5 /* ContrastPage.swift in Sources */,
3FBF056528DA6A4400DA5BF5 /* AccessibilityPropertiesSection.swift in Sources */,
3F54B62B28EE0D3400574932 /* UIContentSize.swift in Sources */,
3FBF05F828DB6F5400DA5BF5 /* HapticsSection.swift in Sources */,
3FBF05A528DAB9C700DA5BF5 /* Storage.swift in Sources */,
3F41DB0E28E2553E00E0B056 /* HorizontalSwipe.swift in Sources */,
Expand Down Expand Up @@ -882,6 +889,7 @@
3FBF05C328DB4F2200DA5BF5 /* DynamicFontSections.swift in Sources */,
3FBF05C528DB4F3D00DA5BF5 /* ColorsSections.swift in Sources */,
3FB6C0FF28DA6367000A5503 /* Accessibility_HandbookApp.swift in Sources */,
3F54B62D28EE1B6A00574932 /* UIContentSizeCategory+Extensions.swift in Sources */,
3FBF05BD28DB4A8A00DA5BF5 /* CollaborationView.swift in Sources */,
3FBF055D28DA69F800DA5BF5 /* Page.swift in Sources */,
3FBF059328DA9E4E00DA5BF5 /* AdjustablePage.swift in Sources */,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,15 @@ import SwiftUI
struct IdentifyCurrentPreferredFontSizePage: View, Page {
let title: String = L10n.IdentifyCurrentPreferredFontSizePage.title

@State private var size: ContentSizes = .xs
@State private var sliderValue: Double = 0.0
@State private var largerAccessibilitySizes: Bool = false

var scale: ClosedRange<Double> {
switch largerAccessibilitySizes {
case true:
return 0...12
case false:
return 0...6
}
}
@State private var size: UIContentSizeCategory = UIApplication.shared.preferredContentSizeCategory
@State private var type: SystemFontType = .body

var body: some View {
PageContent(next: nil) {
Group {
intro
variations
example
list
doc
}
.toAny()
Expand Down Expand Up @@ -73,138 +62,41 @@ private extension IdentifyCurrentPreferredFontSizePage {
}
}

var list: some View {
Group {
Title(L10n.IdentifyCurrentPreferredFontSizePage.List.title)
ForEach(ContentSizes.allCases, id: \.rawValue) { size in
Text(size.name)
.font(.system(size: size.fontSize))
Divider()
}
}
}

var example: some View {
Group {
Comment(L10n.IdentifyCurrentPreferredFontSizePage.Variations.comment1)
HStack {
Spacer()
Toggle(L10n.IdentifyCurrentPreferredFontSizePage.Example.toggle, isOn: $largerAccessibilitySizes)
}
Centered {
VStack(spacing: .regular) {
Text("Aa")
.font(.system(size: size.fontSize).bold())
.font(.system(size: size.sizes[type] ?? .zero).bold())
.accessibilityHidden(true)
Comment(size.name)
Comment(L10n.fontSize("\(size.sizes[type] ?? .zero)"))
.fixedSize(horizontal: false, vertical: true)

Picker("Selected content size", selection: $size) {
ForEach(UIContentSizeCategory.allCases, id: \.title) { category in
Text(category.title).tag(category)
.font(.callout.bold())
}
}

Picker("Selected font type", selection: $type) {
ForEach(SystemFontType.allCases, id: \.rawValue) { type in
Text(type.rawValue).tag(type)
.font(.callout.bold())
}
}
}
.toAny()
}

Slider(value: $sliderValue, in: scale) {
Text("Selected content size")
} minimumValueLabel: {
Text(L10n.minimum)
} maximumValueLabel: {
Text(L10n.maximum)
}
}
.padding()
.background {
RoundedRectangle(cornerRadius: 8.0)
.foregroundColor(.secondaryBackground)
}
.onChange(of: sliderValue) { newValue in
let rounded = round(newValue)
size = ContentSizes(rawValue: rounded) ?? .xs
}
.onChange(of: largerAccessibilitySizes) { newValue in
guard !newValue, size.rawValue >= ContentSizes.a_m.rawValue else { return }
sliderValue = ContentSizes.xxxl.rawValue
size = .xxxl
}
}

var doc: some View {
DocButton(link: "https://developer.apple.com/documentation/uikit/uicontentsizecategory", title: "UIContentSizeCategory")
}
}

private extension IdentifyCurrentPreferredFontSizePage {
enum ContentSizes: CGFloat, CaseIterable {
case xs = 10.0
case s = 13.0
case m = 16.0
case l = 18.0
case xl = 19.0
case xxl = 20.0
case xxxl = 22.0
case a_m = 30.0
case a_l = 35.0
case a_xl = 40.0
case a_xxl = 45.0
case a_xxxl = 50.0

init?(rawValue: CGFloat) {
switch rawValue {
case 0..<1:
self = .xs
case 1..<2:
self = .s
case 2..<3:
self = .m
case 3..<4:
self = .l
case 4..<5:
self = .xl
case 5..<6:
self = .xxl
case 6..<7:
self = .xxxl
case 7..<8:
self = .a_m
case 8..<9:
self = .a_l
case 9..<10:
self = .a_xl
case 10..<11:
self = .a_xxl
default:
self = .a_xxxl
}
}

var name: String {
switch self {
case .xs:
return "extra small"
case .s:
return "small"
case .m:
return "medium"
case .l:
return "large"
case .xl:
return "extra large"
case .xxl:
return "extra extra large"
case .xxxl:
return "extra extra extra large"
case .a_m:
return "accessibility medium"
case .a_l:
return "accessibility large"
case .a_xl:
return "accessibility extra large"
case .a_xxl:
return "accessibility extra extra large"
case .a_xxxl:
return "accessibility extra extra extra large"
}
}

var fontSize: CGFloat {
rawValue
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,6 @@ struct FontsSection: Section {
var title: String = L10n.Fonts.title
var pages: [Page] = [
AboutFontsPage(),
UIContentSizePage()
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ struct AboutFontsPage: View, Page {
let title: String = L10n.AboutFonts.title

var body: some View {
PageContent(next: nil) {
PageContent(next: UIContentSizePage()) {
Group {
intro
ExternalLink(link: "https://www.dafont.com", title: L10n.AboutFonts.link)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
//
// UIContentSize.swift
// Accessibility Handbook
//
// Created by Giovani Nascimento Pereira on 05/10/22.
//

import SwiftUI

struct UIContentSizePage: View, Page {
let title: String = L10n.UIContentSizeCategory.title

var body: some View {
PageContent(next: nil) {
Group {
intro
list
items
Divider()
code
link
}
.toAny()
}
}
}

private extension UIContentSizePage {
var intro: some View {
Group {
Text(L10n.UIContentSizeCategory.Intro.text1)
Text(L10n.UIContentSizeCategory.Intro.text2)
Comment(L10n.UIContentSizeCategory.Intro.comment1)
}
}

var list: some View {
Group {
Title(L10n.UIContentSizeCategory.List.title)
Text(L10n.UIContentSizeCategory.List.text1)
InternalLink(page: IdentifyCurrentPreferredFontSizePage().page, title: L10n.IdentifyCurrentPreferredFontSizePage.title)
Comment(L10n.UIContentSizeCategory.List.comment1)
InternalLink(page: ScallingFontsAutomaticallyPage().page, title: L10n.ImplementingDynamicFonts.title)
VerticalSpace(.regular)
}
}

var items: some View {
ForEach(UIContentSizeCategory.allCases, id: \.title) { category in
Title(category.title.capitalized)
let current = category == UIApplication.shared.preferredContentSizeCategory
if current { currentMarker }
ScrollView([.horizontal], showsIndicators: true) {
HStack(spacing: .large) {
ForEach(SystemFontType.allCases, id: \.rawValue) { type in
item(category: category, type: type)
}
}
VerticalSpace(.regular)
}
}
}

var currentMarker: some View {
Text(L10n.UIContentSizeCategory.List.current)
.multilineTextAlignment(.center)
.padding()
.background {
RoundedRectangle(cornerRadius: 8.0)
.foregroundColor(.accentColor.opacity(0.3))
}
.fixedSize(horizontal: false, vertical: true)
}

@ViewBuilder
func item(category: UIContentSizeCategory, type item: SystemFontType) -> some View {
let fontSize = category.sizes[item] ?? .zero
let current = category == UIApplication.shared.preferredContentSizeCategory
VStack(alignment: .center, spacing: .small) {
Text("Aa")
.font(.system(size: fontSize))
VerticalSpace(.regular)
Text(item.name)
Comment(L10n.fontSize("\(fontSize)"))
}
.frame(minWidth: 100.0)
.padding()
.background {
RoundedRectangle(cornerRadius: 8.0)
.foregroundColor(current ? .accentColor.opacity(0.3) : .secondaryBackground)
}
.accessibilityElement(children: .ignore)
.accessibilityLabel([category.title, item.name, L10n.fontSize("\(fontSize)")].joined(separator: .commaSpace))
}

var code: some View {
Group {
Text(L10n.UIContentSizeCategory.Code.text1)
Code.uikit(
"""
UIFont.preferredFont(forTextStyle: .body).pointSize
"""
)
}
}

var link: some View {
DocButton(link: "https://developer.apple.com/documentation/uikit/uicontentsizecategory", title: title)
}
}
Loading

0 comments on commit 0996b8c

Please sign in to comment.