Skip to content

Commit f3b8d93

Browse files
author
Luc Dion
authored
Merge pull request #28 from elucic/patch-1
Update README.md
2 parents 61f7ba5 + a0dc879 commit f3b8d93

File tree

1 file changed

+39
-39
lines changed

1 file changed

+39
-39
lines changed

README.md

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -43,24 +43,24 @@ Swift manual views layouting, no magic, pure code, full control. Concise syntax,
4343
* Concise syntax. Layout most views using a single line.
4444

4545
* 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.
4747
* 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, …)
4949
A view can be layouted using PinLayout and later with another method/framework.
5050

5151
* No constraints/No auto-layout
5252
* 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.
5555

5656
* 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.
5757

5858
* Minimize as much as possible calculations and constants when layouting views.
5959

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, …
6161
* margin, marginHorizontal, marginVertical, marginTop, marginLeft, marginBottom, marginRight
6262
* top, left, bottom, right, width, height
63-
* 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.
6464

6565
* Shorter possible commands to layout views, but keeping english phrasing almost valid.
6666

@@ -148,7 +148,7 @@ Another possible solution using other PinLayout's methods (more details later):
148148

149149
### Layout directly on superview’s edges
150150

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.
152152

153153
**Methods**:
154154

@@ -173,7 +173,7 @@ Position the view vertical center directly on its superview vertical center. Sim
173173
```
174174

175175
###### 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.
177177

178178
![](Docs/02-example-superview-edge.png)
179179

@@ -248,7 +248,7 @@ Layout using an anchors. This example pins the view B topLeft anchor on the view
248248

249249
Layout using multiple anchors.
250250

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.
252252

253253
![](Docs/example-multiple-anchors.png)
254254

@@ -262,9 +262,9 @@ It is also possible to combine two anchors to pin the position and the size of a
262262
---
263263
### Layout using superview’s anchors
264264

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.
266266

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.
268268

269269
**Methods:**
270270

@@ -299,7 +299,7 @@ This is equivalent to:
299299

300300
### PinLayout UIView’s edges
301301

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.
303303

304304
**PinLayout UIView’s edges**:
305305

@@ -313,7 +313,7 @@ PinLayout add edges properties to UIViews. These properties are used to referenc
313313
---
314314
### Layout using edges
315315

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.
317317

318318
**Methods:**
319319

@@ -331,7 +331,7 @@ PinLayout have methods to attach a UIView's edge (top, left, bottom or right edg
331331
###### Example:
332332
Layout using an edge.
333333

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
335335

336336
![](Docs/example-edges.png)
337337

@@ -345,8 +345,8 @@ The following example layout the view B left edge on the view A right edge. It o
345345

346346
### Layout using edges relative positioning
347347

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.
350350

351351
**Methods:**
352352

@@ -374,13 +374,13 @@ The following example will position the view C between the view A and B with mar
374374
```javascript
375375
viewC.pin.top().left(of: viewA).right(of: viewB).margin(10)
376376
```
377-
This is an equivalent solutions using [edges](#edge):
377+
This is an equivalent solution using [edges](#edge):
378378

379379
```javascript
380380
viewC.pin.top().left(to: viewA.edge.right).right(to: viewB.edge.left).margin(10)
381381
```
382382

383-
This is also an equivalent solutions using [relative positioning and alignment](#relative_positionning_w_alignment) explained in the next section:
383+
This is also an equivalent solution using [relative positioning and alignment](#relative_positionning_w_alignment) explained in the next section:
384384

385385
```javascript
386386
viewC.pin.left(of: viewA, aligned: .top).right(of: viewB, aligned: top).marginHorizontal(10)
@@ -391,7 +391,7 @@ This is also an equivalent solutions using [relative positioning and alignment](
391391

392392
### Layout using relative positioning and alignment <a name="relative_positionning_w_alignment"></a>
393393

394-
PinLayout also have method to position relative to another view but with also the ability of specifying the alignment.
394+
PinLayout also has methods to position relative to another view but with also the ability of specifying the alignment.
395395
This is similar to pinning to an anchor with a more natural syntax.
396396

397397
**Methods:**
@@ -427,7 +427,7 @@ This is an equivalent solutions using anchors:
427427
## Width, height and size <a name="width_height_size"></a>
428428

429429
### Adjust view width, height and size
430-
PinLayout have methods to set the view’s height and width.
430+
PinLayout has methods to set the view’s height and width.
431431

432432
**Methods:**
433433

@@ -474,7 +474,7 @@ Set the view’s size to match the referenced view’s size
474474

475475
### sizeToFit()
476476

477-
sizeToFit() is the equivalent of calling sizeThatFits() on the size of the view once PinLayout has computed the size and have applied margins.
477+
sizeToFit() is the equivalent of calling sizeThatFits() on the size of the view once PinLayout has computed the size and has applied margins.
478478

479479
###### Usage examples:
480480
```javascript
@@ -498,7 +498,7 @@ PinLayout applies margins similar to CSS.
498498

499499
### PinLayout's margins
500500

501-
PinLayout have methods to apply margin.
501+
PinLayout has methods to apply margins.
502502

503503
**Methods:**
504504

@@ -530,9 +530,9 @@ PinLayout have methods to apply margin.
530530
### PinLayout margin rules
531531
The following section explains how CSS/PinLayout margin rules are applied.
532532

533-
#### When and how horizontal margins are applies in PinLayout?
533+
#### When and how horizontal margins are applied in PinLayout?
534534

535-
This table explain how and when **left and right margins** are applied depending of which view’s attribute has been pinned using PinLayout.
535+
This table explains how and when **left and right margins** are applied depending on which view’s attribute has been pinned using PinLayout.
536536

537537
| View’s pinned attributes | Left Margin | Right Margin |
538538
|--------------------------|:-------------------------------------------:|:--------------------------------------------:|
@@ -548,7 +548,7 @@ NOTE: `-` indicates that the margin is not applied.
548548

549549
#### When and how does vertical margins are applies in PinLayout?
550550

551-
This table explain how and when **top and bottom margins** are applied depending of which view’s attribute has been pinned using PinLayout.
551+
This table explains how and when **top and bottom margins** are applied depending on which view’s attribute has been pinned using PinLayout.
552552

553553
| View’s pinned attributes | Left Margin | Right Margin |
554554
|--------------------------|:-------------------------------------------:|:--------------------------------------------:|
@@ -587,7 +587,7 @@ In this example, the **left** and **right** margins are applied
587587
```
588588

589589
###### 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.
591591
![](Docs/pinlayout-margin-04.png)
592592

593593
```javascript
@@ -605,14 +605,14 @@ In this example, **left**, **right**, **top** and **bottom** margins are applied
605605
<br>
606606

607607
### 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.
609609

610610
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.
612612

613613

614614
###### 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.
616616

617617
![](Docs/pinlayout-margin-pinEdges-01.png)
618618

@@ -623,7 +623,7 @@ Without `pinEdges()` margins rules has been applied and has moved the view to th
623623

624624
###### Example with `pinEdges`
625625

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.
627627

628628
![](Docs/pinlayout-margin-pinEdges-02.png)
629629

@@ -647,15 +647,15 @@ NOTE: In that in that particular situation, the same results could have been ach
647647

648648
## Warnings <a name="warnings"></a>
649649
### 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.
651651

652652
**Warning reasons**
653653

654654
* The newly pinned attributes conflict with other already pinned attributes.
655655
Example:
656656
`view.pin.left(10).right(10).width(200)`
657657
👉 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.
659659
Example:
660660
`view.pin.width(100).width(200)`
661661
👉 Layout Conflict: `width(200) won't be applied since it value has already been set to 100.`
@@ -672,7 +672,7 @@ Example:
672672
`view.pin.width(-100)`
673673
👉 Layout Warning: `The width (-100) must be greater or equal to 0.`
674674

675-
### Disabling warning
675+
### Disabling warnings
676676

677677
Warnings can be disabled in debug mode too by setting the boolean PinLayoutLogConflicts to false.
678678

@@ -681,14 +681,14 @@ Warnings can be disabled in debug mode too by setting the boolean PinLayoutLogCo
681681
## More examples<a name="more_examples"></a>
682682

683683
### 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.
685685

686686
![](Docs/pinlayout-example-cells.png)
687687

688688
Cell A:
689689

690690
* A1 is left aligned with a width of 50px
691-
* A2 fill the remaining space
691+
* A2 fills the remaining space
692692

693693
```javascript
694694
a1.pin.topLeft().bottom().width(50)
@@ -698,7 +698,7 @@ Cell A:
698698
Cell B:
699699

700700
* B2 is right aligned with a fixed width of 50px
701-
* B1 fill the remaining space
701+
* B1 fills the remaining space
702702

703703
```javascript
704704
b2.pin.topRight().bottom().width(50)
@@ -708,8 +708,8 @@ Cell B:
708708
Cell C:
709709

710710
* C2 is centered with a fixed width of 50px
711-
* C1 fill the remaining left space
712-
* C3 fill the remaining right space
711+
* C1 fills the remaining left space
712+
* C3 fills the remaining right space
713713

714714
```javascript
715715
c2.pin.topCenter().width(50).bottom()
@@ -721,7 +721,7 @@ Cell D:
721721

722722
* D1 takes 25% of its container width
723723
* D2 takes 50% of its container width
724-
* D3 fill the remaining space
724+
* D3 fills the remaining space
725725

726726
```javascript
727727
d1.pin.topLeft().bottom().width(25%)

0 commit comments

Comments
 (0)