Skip to content

Commit 4596f31

Browse files
SahilSainiYMLmpospese
authored andcommitted
[UPDATE] updated readme file with usage info
1 parent eaa9eaf commit 4596f31

File tree

1 file changed

+191
-0
lines changed

1 file changed

+191
-0
lines changed

README.md

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,197 @@ Documentation
1515

1616
Documentation is automatically generated from source code comments and rendered as a static website hosted via GitHub Pages at: https://yml-org.github.io/YCoreUI/
1717

18+
Usage
19+
----------
20+
21+
##1. UIView extensions for declarative Auto Layout
22+
23+
To aid in auto layout, Y—CoreUI has several `UIView` extensions that simplify creating layout constraints. These do not use any 3rd party library such as SnapKit, but are simply wrappers around Apple’s own `NSLayoutConstraint` api’s. If you are more comfortable using Apple’s layout constraint api’s natively, then by all means go ahead and use them. But these convenience methods allow for less verbose code that expresses its intent more directly.
24+
25+
All the extensions are to `UIView` and begin with the word `constrain`.
26+
27+
The simplest flavor just creates constraints using attributes just like the original iOS 6 `NSLayoutContraint` api.
28+
29+
30+
```swift
31+
//constrain a button's width to 100
32+
let button = UIButton()
33+
addSubview(button)
34+
button.constrain(.width, constant: 100)
35+
36+
//constrain view to superview**
37+
38+
let container = UIView()
39+
addSubview(container)
40+
container.constrain(.leading, to: .leading, of: superview)
41+
container.constrain(.trailing, to: .trailing, of: superview)
42+
container.constrain(.top, to: .top, of: superview)
43+
container.constrain(.bottom, to: .bottom, of: superview)
44+
```
45+
46+
Another flavor creates constraints using anchors just like the anchor api’s first introduced in iOS 9.
47+
48+
```swift
49+
//constrain a button's width to 100
50+
let button = UIButton()
51+
addSubview(button)
52+
button.constrain(.widthAnchor, constant: 100)
53+
54+
// constrain view to superview**
55+
56+
let container = UIView()
57+
addSubview(container)
58+
container.constrain(.leadingAnchor, to: leadingAnchor)
59+
container.constrain(.trailingAnchor, to: trailingAnchor)
60+
container.constrain(.topAnchor, to: topAnchor)
61+
container.constrain(.bottomAnchor, to: bottomAnchor)
62+
```
63+
64+
There are overrides to handle the common use case of placing one view below another or to the trailing side of another:
65+
66+
```swift
67+
// constrain button2.leadingAnchor to button1.trailingAnchor
68+
button2.constrain(after: button1, offset: insets.leading)
69+
70+
// constrain label2.topAnchor to label1.bottomAnchor
71+
label2.constrain(below: label1, offset: gap)
72+
```
73+
74+
But where these extensions really shine are the `constrainEdges` methods that create up to four constraints with a single method call.
75+
76+
```swift
77+
// constrain 2 buttons across in a view
78+
let button1 = UIButton()
79+
let button2 = UIButton()
80+
let insets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
81+
addSubview(button1)
82+
addSubview(button2)
83+
84+
button1.constrainEdges(.notTrailing, with: insets)
85+
button2.constrainEdges(.notLeading, with: insets)
86+
button2.constrain(after: button1, offset: insets.leading)
87+
button1.constrain(.widthAnchor, to: button2.widthAnchor)
88+
89+
// constrain view to superview
90+
let container = UIView()
91+
addSubview(container)
92+
container.constrainEdges()
93+
```
94+
95+
There’s also a `constrainEdgesToMargins` variant that sets constraints between the recipient’s edges and the layout margins of the specified view (typically the recipient’s superview). This is very handy for avoiding safe areas such as the region occupied by the navigation bar or by the FaceID notch.
96+
97+
```swift
98+
// constrain 2 buttons across in a view using margins
99+
let button1 = UIButton()
100+
let button2 = UIButton()
101+
let spacing: CGFloat = 16
102+
addSubview(button1)
103+
addSubview(button2)
104+
105+
button1.constrainEdgesToMargins(.notTrailing)
106+
button2.constrainEdgesToMargins(.notLeading)
107+
button2.constrain(after: button1, offset: spacing)
108+
button1.constrain(.widthAnchor, to: button2.widthAnchor)
109+
110+
// constrain view to superview margins
111+
let container = UIView()
112+
addSubview(container)
113+
container.constrainEdgesToMargins()
114+
```
115+
116+
## 2. UIColor extensions for WCAG 2.0 contrast ratio calculations
117+
118+
Y—CoreUI contains a number of extensions to make working with colors easier. The most useful of them may be WCAG 2.0 contrast calculations. Given any two colors (representing foreground and background colors), you can calculate the contrast ration between them and evaluate whether that passes particular WCAG 2.0 standards (AA or AAA). You can even write unit tests to quickly check all color pairs in your app across all color modes. That could look like this:
119+
120+
```swift
121+
final class ColorsTests: XCTestCase {
122+
typealias ColorInputs = (foreground: UIColor, background: UIColor, context: WCAGContext)
123+
124+
// These pairs should pass WCAG 2.0 AA
125+
let colorPairs: [ColorInputs] = [
126+
// label on system background
127+
(.label, .systemBackground, .normalText),
128+
// label on secondary background
129+
(.label, .secondarySystemBackground, .normalText),
130+
// label on tertiary background
131+
(.label, .tertiarySystemBackground, .normalText),
132+
// secondary label on system background
133+
(.secondaryLabel, .systemBackground, .normalText),
134+
// secondary label on secondary background
135+
(.secondaryLabel, .secondarySystemBackground, .normalText),
136+
// secondary label on tertiary background
137+
(.secondaryLabel, .tertiarySystemBackground, .normalText),
138+
// tertiary label on system background
139+
(.tertiaryLabel, .systemBackground, .normalText),
140+
// tertiary label on secondary background
141+
(.tertiaryLabel, .secondarySystemBackground, .normalText),
142+
// tertiary label on tertiary background
143+
(.tertiaryLabel, .tertiarySystemBackground, .normalText),
144+
145+
// system red on system background (fails)
146+
// (.systemRed, .systemBackground, .normalText),
147+
]
148+
149+
let allColorSpaces: [UITraitCollection] = [
150+
// Light Mode
151+
UITraitCollection(userInterfaceStyle: .light),
152+
// Light Mode, Increased Contrast
153+
UITraitCollection(traitsFrom: [
154+
UITraitCollection(userInterfaceStyle: .light),
155+
UITraitCollection(accessibilityContrast: .high)
156+
]),
157+
// Dark Mode
158+
UITraitCollection(userInterfaceStyle: .dark),
159+
// Dark Mode, Increased Contrast
160+
UITraitCollection(traitsFrom: [
161+
UITraitCollection(userInterfaceStyle: .dark),
162+
UITraitCollection(accessibilityContrast: .high)
163+
])
164+
]
165+
166+
func testColorContrast() {
167+
// test across all color modes we support
168+
for traits in allColorSpaces {
169+
// test each color pair
170+
colorPairs.forEach {
171+
let color1 = $0.foreground.resolvedColor(with: traits)
172+
let color2 = $0.background.resolvedColor(with: traits)
173+
174+
XCTAssertTrue(
175+
color1.isSufficientContrast(to: color2, context: $0.context, level: .AA),
176+
String(
177+
format: "#%@ vs #%@ ratio = %.02f under %@ Mode%@",
178+
color1.rgbDisplayString(),
179+
color2.rgbDisplayString(),
180+
color1.contrastRatio(to: color2),
181+
traits.userInterfaceStyle == .dark ? "Dark" : "Light",
182+
traits.accessibilityContrast == .high ? " Increased Contrast" : ""
183+
)
184+
)
185+
}
186+
}
187+
}
188+
}
189+
```
190+
191+
## 3. UIScrollView extensions to assist with keyboard avoidance
192+
193+
`FormViewController` is a view controller with a scrollable content area that will automatically avoid the keyboard for you. It is a good choice for views that have inputs (e.g. login or onboarding). Even for views without inputs, it is still quite useful for managing the creation of a `UIScrollView` and a `contentView` set within it, so that you can focus on your content and not have to code a scrollView for every view.
194+
195+
<aside>
196+
💡 Almost every full-screen view in your app that contains any text should be a scroll view because of the vagaries of localization, Dynamic Type, potentially small screen sizes, and landscape mode support.
197+
198+
</aside>
199+
200+
## `UIScrollview` Extensions
201+
202+
Want to have a scrollview that avoids the keyboard, but you can’t use `FormViewController`? Most of its functionality is a simple extension to `UIScrollView`. You can add keyboard avoidance to any scroll view like so:
203+
204+
```swift
205+
scrollView.registerKeyboardNotifications()
206+
```
207+
208+
18209
Installation
19210
----------
20211

0 commit comments

Comments
 (0)