Skip to content

Commit 5d9dd57

Browse files
author
Luc Dion
committed
Update Readme (merged two sections)
1 parent 43aeec8 commit 5d9dd57

File tree

2 files changed

+39
-101
lines changed

2 files changed

+39
-101
lines changed

README.md

Lines changed: 39 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -142,13 +142,11 @@ This example shows how easily PinLayout can adjust its layout based on the view'
142142
* You can add iterations and enumerations (for/while/forEach/...)
143143
* Layout one view at a time. Make it simple to code and debug.
144144
* Concise syntax. Layout most views using a single line.
145-
* Support left to right (LTR) and right to left (RTL) languages.
146145

147146
* Stateless
148147
* PinLayout doesn’t add any stored properties to UIViews. It simply computes the UIView.frame property, one view at a time.
149148
* Since it is stateless, it can be used with any other layout framework without conflicts.
150149
Each view can use the layout system that better suit it (PinLayout, constraints, flexbox, grids, …)
151-
A view can be layouted using PinLayout and later with another method/framework.
152150

153151
* No Auto layout and constraints
154152
* Constraints are verbose and hard for a human brains to understand when there are many views implicated, even with sugar-syntax frameworks.
@@ -162,11 +160,6 @@ A view can be layouted using PinLayout and later with another method/framework.
162160
* Minimize as much as possible calculations and constants when layouting views. But it is always possible to add advanced computation if required.
163161

164162
* Method's name match as much as possible other layout frameworks, including [FlexLayout](https://github.com/layoutBox/FlexLayout)/flexbox, CSS, React Native, …
165-
* margin, marginHorizontal, marginVertical, marginTop, marginLeft, marginBottom, marginRight
166-
* top, left, bottom, right, width, height
167-
* As in CSS and flexbox, right and bottom coordinates are offset from container view's right and bottom edges.
168-
169-
* Shorter possible commands to layout views, but keeping English phrasing almost valid.
170163

171164
<br>
172165

@@ -182,9 +175,7 @@ A view can be layouted using PinLayout and later with another method/framework.
182175

183176
PinLayout's performance has been measured using the [Layout Framework Benchmark](https://github.com/layoutBox/LayoutFrameworkBenchmark). FlexLayout and [PinLayout](https://github.com/mirego/PinLayout) has been added to this benchmark to compare their performance.
184177

185-
As you can see in the following chart, PinLayout and FlexLayout and performance are faster or equal to manual layouting, and **between 12x and 16x faster than auto layout**, and this for all types of iPhone (5/6/6S/7)
186-
187-
These results also mean that **PinLayout is by far faster than any layout frameworks built over auto layout**.
178+
As you can see in the following chart, PinLayout are faster or equal to manual layouting, and **between 12x and 16x faster than auto layout**, and this for all types of iPhone (5/6/6S/7/8)
188179

189180
[See here a more complete details, results and explanation of the benchmark](docs/Benchmark.md).
190181

@@ -230,55 +221,67 @@ PinLayout can position a view’s edge relative to its superview edges.
230221

231222
**Methods**:
232223

233-
* **`top(_ value: CGFloat)`** / **`top(_ percent: Percent)`**
234-
The value specifies the top edge distance from the superview's top edge in pixels (or in percentage of its superview's height).
224+
* **`top(_ value: CGFloat)`** / **`top(_ percent: Percent)`** / **`top()`**
225+
The value specifies the top edge distance from the superview's top edge in pixels (or in percentage of its superview's height).
226+
`top()` is similar to calling `top(0)`, it position the view top edge directly on its superview top edge.
235227

236-
* **`vCenter(_ value: CGFloat)`** / **`vCenter(_ percent: Percent)`**
237-
The value specifies the distance vertically of the view's center related to the superview's center in pixels (or in percentage of its superview's height). A positive value move the view down and a negative value move it up relative to the superview's center.
228+
* **`vCenter(_ value: CGFloat)`** / **`vCenter(_ percent: Percent)`** / **`vCenter()`**
229+
The value specifies the distance vertically of the view's center related to the superview's center in pixels (or in percentage of its superview's height). A positive value move the view down and a negative value move it up relative to the superview's center.
230+
`vCenter()` is similar to calling `vCenter(0)`, it position vertically the view's center directly on its superview vertical center.
238231

239-
* **`bottom(_ value: CGFloat)`** / **`bottom(_ percent: Percent)`**
240-
The value specifies the bottom edge **distance from the superview's bottom edge** in pixels (or in percentage of its superview's height).
232+
* **`bottom(_ value: CGFloat)`** / **`bottom(_ percent: Percent)`** / **`bottom()`**
233+
The value specifies the bottom edge **distance from the superview's bottom edge** in pixels (or in percentage of its superview's height).
234+
`bottom()` is similar to calling `bottom(0)`, it position the view bottom edge directly on its superview top edge.
241235

242-
* **`left(_ value: CGFloat)`** / **`left(_ percent: Percent)`**
243-
The value specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width).
236+
* **`left(_ value: CGFloat)`** / **`left(_ percent: Percent)`** / **`left()`**
237+
The value specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width).
238+
`left()` is similar to calling `left(0)`, it position the view left edge directly on its superview left edge.
244239

245-
* **`hCenter(_ value: CGFloat)`** /**`hCenter(_ percent: Percent)`**
246-
The value specifies the distance horizontally of the view's center related to the superview's center in pixels (or in percentage of its superview's width).
247-
A positive value move the view to the right and a negative value move it to the left relative to the superview's center.
240+
* **`hCenter(_ value: CGFloat)`** /**`hCenter(_ percent: Percent)`** / **`hCenter()`**
241+
The value specifies the distance horizontally of the view's center related to the superview's center in pixels (or in percentage of its superview's width). A positive value move the view to the right and a negative value move it to the left relative to the superview's center.
242+
`hCenter()` is similar to calling `hCenter(0)`, it position horizontally the view's center directly on its superview horizontal center.
248243

249-
* **`right(_ value: CGFloat)`** / **`right(_ percent: Percent)`**
250-
The value specifies the right edge **distance from the superview's right edge** in pixels (or in percentage of its superview's width).
244+
* **`right(_ value: CGFloat)`** / **`right(_ percent: Percent)`** / **`right()`**
245+
The value specifies the right edge **distance from the superview's right edge** in pixels (or in percentage of its superview's width).
246+
`right()` is similar to calling `right(0)`, it position the view right edge directly on its superview right edge.
251247

252-
* **`start(_ value: CGFloat)`** / **`start(_ percent: Percent)`** :left_right_arrow:
248+
* **`start(_ value: CGFloat)`** / **`start(_ percent: Percent)`** / **`start()`**:left_right_arrow:
253249
In LTR direction the value specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width).
254-
In RTL direction the value specifies the right edge distance from the superview's right edge in pixels (or in percentage of its superview's width).
250+
In RTL direction the value specifies the right edge distance from the superview's right edge in pixels (or in percentage of its superview's width).
251+
`start()` is similar to calling `start(0)`.
255252

256-
* **`end(_ value: CGFloat)`** / **`end(_ percent: Percent)`** :left_right_arrow:
253+
* **`end(_ value: CGFloat)`** / **`end(_ percent: Percent)`** / **`end()`** :left_right_arrow:
257254
In LTR direction the value specifies the right edge distance from the superview's right edge in pixels (or in percentage of its superview's width).
258255
In RTL direction the value specifies the left edge distance from the superview's left edge in pixels (or in percentage of its superview's width).
256+
`end()` is similar to calling `end(0)`.
259257

260258
**Methods pinning multiple edges**:
261259

262-
* **`all(_ value: CGFloat)`**
260+
* **`all(_ value: CGFloat)`** / **`all()`**
263261
The value specifies the **top, bottom, left and right edges** distance from the superview's corresponding edge in pixels.
264-
Similar to calling `view.top(value).bottom(value).left(value).right(value)`.
262+
Similar to calling `view.top(value).bottom(value).left(value).right(value)`.
263+
`all()` is similar to calling `all(0)`.
265264

266-
* **`horizontally(_ value: CGFloat)`** / **`horizontally(_ percent: Percent)`**
265+
* **`horizontally(_ value: CGFloat)`** / **`horizontally(_ percent: Percent)`** / **`horizontally()`
267266
The value specifies the **left and right edges** on its superview's corresponding edges in pixels (or in percentage of its superview's width).
268-
Similar to calling `view.left(value).right(value)`.
267+
`horizontally()` is similar to calling `horizontally(0)`.
269268

270-
* **`vertically(_ value: CGFloat)`** / **`vertically(_ percent: Percent)`**
269+
* **`vertically(_ value: CGFloat)`** / **`vertically(_ percent: Percent)`** / **`vertically()`**
271270
The value specifies the ** top and bottom edges** on its superview's corresponding edges in pixels (or in percentage of its superview's height).
272-
Similar to calling `view.top(value).bottom(value)`.
271+
`vertically()` is similar to calling `vertically(0)`.
273272

274273

275274
###### Usage Examples:
276275

277276
```swift
278-
view.pin.top(20).bottom(20) // The view has a top margin and a bottom margin of 20 pixels
279-
view.pin.top(25%).hCenter(0) // The view is centered horizontally
280-
view.pin.left(12).vCenter(0) // The view is centered vertically
281-
view.pin.start(20).end(20)
277+
view.pin.top(20).bottom(20) // The view has a top margin and a bottom margin of 20 pixels
278+
view.pin.top().left() // The view is pinned directly on its parent top and left edge
279+
view.pin.top(25%).hCenter() // The view is centered horizontally with a top margin of 25%
280+
view.pin.left(12).vCenter() // The view is centered vertically
281+
view.pin.start(20).end(20) // Support right-to-left languages.
282+
view.pin.all() // The view fill completely its parent (horizontally and vertically)
283+
view.pin.horizontally(20) // The view is filling its parent width with a left and right margin.
284+
view.pin.top().horizontally() // The view is pinned at the top edge of its parent and fill it horizontally.
282285
```
283286

284287
###### Example:
@@ -295,71 +298,6 @@ Another shorter possible solution using `all()`:
295298
view.pin.all(10)
296299
```
297300

298-
299-
<br/>
300-
301-
<a name="position_edges"></a>
302-
### Position view directly on superview’s edges
303-
304-
PinLayout also has a shorter version that pins a view’s edge **directly** on its superview's corresponding edge.
305-
306-
**Methods**:
307-
308-
* **`top()`**
309-
Position the view top edge directly on its superview top edge. Similar to calling `top(0)`.
310-
* **`vCenter()`**
311-
Position vertically the view's center directly on its superview vertical center. Similar to calling `vCenter(0)`.
312-
* **`bottom()`**
313-
Position the view bottom edge directly on its superview top edge. Similar to calling `bottom(0)`.
314-
* **`left()`**
315-
Position the view left edge directly on its superview left edge. Similar to calling `left(0)`.
316-
* **`hCenter()`**
317-
Position horizontally the view's center directly on its superview horizontal center. Similar to calling `hCenter(0)`.
318-
* **`right()`**
319-
Position the view right edge directly on its superview right edge. Similar to calling `right(0)`.
320-
* **`start()`**:left_right_arrow:
321-
Position the view left edge directly on its superview left edge in LTR direction or right edge directly on its superview right edge in RTL direction. Similar to calling `start(0)`.
322-
* **`end()`**:left_right_arrow:
323-
Position the view right edge directly on its superview right edge in LTR direction or left edge directly on its superview left edge in RTL direction. Similar to calling `end(0)`.
324-
325-
**Methods pinning multiple edges**:
326-
327-
* **`all()`**
328-
Pin **all edges** on its superview's corresponding edges (top, bottom, left, right).
329-
Similar to calling `view.top().bottom().left().right()`.
330-
* **`horizontally()`**
331-
Pin the **left and right edges** on its superview's corresponding edges.
332-
Similar to calling `view.left().right()`.
333-
* **`vertically()`**
334-
Pin the **top and bottom edges** on its superview's corresponding edges.
335-
Similar to calling `view.top().bottom()`.
336-
337-
338-
###### Usage examples:
339-
```swift
340-
view.pin.top().left()
341-
view.pin.bottom().right()
342-
view.pin.hCenter().vCenter()
343-
view.pin.start().end()
344-
view.pin.all()
345-
view.pin.top().horizontally()
346-
```
347-
348-
###### Example:
349-
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 all around.
350-
351-
![](docs/02-example-superview-edge.png)
352-
353-
```swift
354-
viewA.pin.all().margin(10)
355-
```
356-
357-
The same results can also be achieved using:
358-
359-
```swift
360-
view.pin.all(10)
361-
```
362-
363301
<br/>
364302

365303
<a name="edges"></a>

docs/02-example-superview-edge.png

-44.6 KB
Binary file not shown.

0 commit comments

Comments
 (0)