You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+39-39Lines changed: 39 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,24 +43,24 @@ Swift manual views layouting, no magic, pure code, full control. Concise syntax,
43
43
* Concise syntax. Layout most views using a single line.
44
44
45
45
* Stateless
46
-
* The layout system doesn’t add any stored properties to UIViews. It simply compute the UIView.frame property, one view at a time.
46
+
* The layout system doesn’t add any stored properties to UIViews. It simply computes the UIView.frame property, one view at a time.
47
47
* Since it is stateless, it can be used with any other layout framework without conflicts.
48
-
Each view can use the layout system that better suit it (PinLayout, constraint, flexbox, grids, …)
48
+
Each view can use the layout system that better suit it (PinLayout, constraints, flexbox, grids, …)
49
49
A view can be layouted using PinLayout and later with another method/framework.
50
50
51
51
* No constraints/No auto-layout
52
52
* Constraints are verbose and hard for a human brains to understand when there are many views implicated, even with sugar-syntax frameworks.
53
-
* PinLayout positions views as a designer would explain it (eg: “The TextField is below the Label, aligned left, and is its width match the other view’s width“).
54
-
* No priorities, simply layout views in the order that make sense. No priority required.
53
+
* PinLayout positions views as a designer would explain it (eg: “The TextField is below the Label, aligned left, and is its width matches the other view’s width“).
54
+
* No priorities, simply layout views in the order that makes sense. No priorities required.
55
55
56
56
* Before applying the new sets of attributes, PinLayout always start with the view’s current frame. So it’s possible to set the view’s size during the initialization (ex: view.pin.width(100).height(200)), and later only position the view (ex: view.pin.top(10).left(20)). This makes PinLayout really animation friendly.
57
57
58
58
* Minimize as much as possible calculations and constants when layouting views.
59
59
60
-
* Methods matches as much as possible other layouting system, including CSS, flexbox, reactive Flexbox, …
60
+
* Methods match as much as possible other layouting systems, including CSS, flexbox, reactive Flexbox, …
* As in CSS and flexbox, right and bottom coordinates are offset from container’s view right and bottom edges.
63
+
* As in CSS and flexbox, right and bottom coordinates are offset from container view's right and bottom edges.
64
64
65
65
* Shorter possible commands to layout views, but keeping english phrasing almost valid.
66
66
@@ -148,7 +148,7 @@ Another possible solution using other PinLayout's methods (more details later):
148
148
149
149
### Layout directly on superview’s edges
150
150
151
-
PinLayout also have shorten version that pin a view’s edge **directly** on its superview corresponding edge.
151
+
PinLayout also has shorter version that pins a view’s edge **directly** on its superview's corresponding edge.
152
152
153
153
**Methods**:
154
154
@@ -173,7 +173,7 @@ Position the view vertical center directly on its superview vertical center. Sim
173
173
```
174
174
175
175
###### Example:
176
-
This example is similar to the previous example, but pin edges directly on superview’s edges. It layout the view A to fit its superview frame with a margin of 10 pixels.
176
+
This example is similar to the previous example, but pins edges directly on superview’s edges. It will layout the view A to fit its superview frame with a margin of 10 pixels.
177
177
178
178

179
179
@@ -248,7 +248,7 @@ Layout using an anchors. This example pins the view B topLeft anchor on the view
248
248
249
249
Layout using multiple anchors.
250
250
251
-
It is also possible to combine two anchors to pin the position and the size of a view. The following example will position the view C between the view A and B with an horizontal margins of 10px.
251
+
It is also possible to combine two anchors to pin the position and the size of a view. The following example will position the view C between the view A and B with horizontal margins of 10px.
252
252
253
253

254
254
@@ -262,9 +262,9 @@ It is also possible to combine two anchors to pin the position and the size of a
262
262
---
263
263
### Layout using superview’s anchors
264
264
265
-
PinLayout also have shorten version that pin a view's anchor **directly** on its corresponding superview’s anchor.
265
+
PinLayout also has a shorter version that pins a view's anchor **directly** on its corresponding superview’s anchor.
266
266
267
-
Following methods position the corresponding view anchor on another view’s anchor.
267
+
The following methods position the corresponding view's anchor on another view’s anchor.
268
268
269
269
**Methods:**
270
270
@@ -299,7 +299,7 @@ This is equivalent to:
299
299
300
300
### PinLayout UIView’s edges
301
301
302
-
PinLayout add edges properties to UIViews. These properties are used to reference other view’s edges.
302
+
PinLayout adds edges properties to UIViews. These properties are used to reference other view’s edges.
303
303
304
304
**PinLayout UIView’s edges**:
305
305
@@ -313,7 +313,7 @@ PinLayout add edges properties to UIViews. These properties are used to referenc
313
313
---
314
314
### Layout using edges
315
315
316
-
PinLayout have methods to attach a UIView's edge (top, left, bottom or right edge) to another view’s edge.
316
+
PinLayout has methods to attach a UIView's edge (top, left, bottom or right edge) to another view’s edge.
317
317
318
318
**Methods:**
319
319
@@ -331,7 +331,7 @@ PinLayout have methods to attach a UIView's edge (top, left, bottom or right edg
331
331
###### Example:
332
332
Layout using an edge.
333
333
334
-
The following example layout the view B left edge on the view A right edge. It only change the view B left coordinate
334
+
The following example will layout the view B left edge on the view A right edge. It only change the view B left coordinate
335
335
336
336

337
337
@@ -345,8 +345,8 @@ The following example layout the view B left edge on the view A right edge. It o
345
345
346
346
### Layout using edges relative positioning
347
347
348
-
PinLayout also have method to position relative to another view.
349
-
This is similar to pinning to an edge with a slittly different syntax.
348
+
PinLayout also has methods to position relative to another view.
349
+
This is similar to pinning to an edge with a slightly different syntax.
350
350
351
351
**Methods:**
352
352
@@ -374,13 +374,13 @@ The following example will position the view C between the view A and B with mar
@@ -587,7 +587,7 @@ In this example, the **left** and **right** margins are applied
587
587
```
588
588
589
589
###### Example 4:
590
-
In this example, **left**, **right** and **top** margins are applied. Note that the view’s width has been reduce to apply left and right margins.
590
+
In this example, **left**, **right** and **top** margins are applied. Note that the view’s width has been reduced to apply left and right margins.
591
591

592
592
593
593
```javascript
@@ -605,14 +605,14 @@ In this example, **left**, **right**, **top** and **bottom** margins are applied
605
605
<br>
606
606
607
607
### pinEdges()
608
-
The `pinEdges()` method pin the four edges (top, left, bottom and right edges) before applying margins.
608
+
The `pinEdges()` method pins the four edges (top, left, bottom and right edges) before applying margins.
609
609
610
610
This method is useful in situations where the width and/or the height attributes have been pinned.
611
-
This method is a add-on, there is no equivalent in CSS.
611
+
This method is an add-on, there is no equivalent in CSS.
612
612
613
613
614
614
###### Example without `pinEdges`
615
-
Without `pinEdges()` margins rules has been applied and has moved the view to the left.
615
+
Without `pinEdges()` margins rules would be applied and the view would be moved to the left.
616
616
617
617

618
618
@@ -623,7 +623,7 @@ Without `pinEdges()` margins rules has been applied and has moved the view to th
623
623
624
624
###### Example with `pinEdges`
625
625
626
-
With `pinEdges()` the left and right margins are applied even if only the left and width has been set. The reason is the call to pinEdges() have pinned the two horizontal edges at their position before applying margins.
626
+
With `pinEdges()` the left and right margins are applied even if only the left and width has been set. The reason is the call to pinEdges() has pinned the two horizontal edges at their position before applying margins.
627
627
628
628

629
629
@@ -647,15 +647,15 @@ NOTE: In that in that particular situation, the same results could have been ach
647
647
648
648
## Warnings <aname="warnings"></a>
649
649
### PinLayout's warnings
650
-
In debug, PinLayout will displays warning when pin rules cannot be applied.
650
+
In debug, PinLayout will display warnings when pin rules cannot be applied.
651
651
652
652
**Warning reasons**
653
653
654
654
* The newly pinned attributes conflict with other already pinned attributes.
655
655
Example:
656
656
`view.pin.left(10).right(10).width(200)`
657
657
👉 Layout Conflict: `width(200) won't be applied since it conflicts with the following already set properties: left: 0, right: 10.`
658
-
* The newly pinned attributes was already set to another value.
658
+
* The newly pinned attributes have already been set to another value.
659
659
Example:
660
660
`view.pin.width(100).width(200)`
661
661
👉 Layout Conflict: `width(200) won't be applied since it value has already been set to 100.`
@@ -672,7 +672,7 @@ Example:
672
672
`view.pin.width(-100)`
673
673
👉 Layout Warning: `The width (-100) must be greater or equal to 0.`
674
674
675
-
### Disabling warning
675
+
### Disabling warnings
676
676
677
677
Warnings can be disabled in debug mode too by setting the boolean PinLayoutLogConflicts to false.
678
678
@@ -681,14 +681,14 @@ Warnings can be disabled in debug mode too by setting the boolean PinLayoutLogCo
681
681
## More examples<aname="more_examples"></a>
682
682
683
683
### Adjust to container size
684
-
The following examples show how PinLayout can be used to adjust views size and position to the size of their container, in this case containers are cells.
684
+
The following examples show how PinLayout can be used to adjust views size and position to the size of their container. in this case containers are cells.
0 commit comments