Skip to content

Commit b7008c4

Browse files
author
Luc Dion
committed
Update doc
1 parent 9ef52ec commit b7008c4

File tree

3 files changed

+132
-20
lines changed

3 files changed

+132
-20
lines changed

‎Docs/Benchmark-PinLayout-SourceCode.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<h1 align="center" style="color: #376C9D; font-family: Arial Black, Gadget, sans-serif; font-size: 1.5em">PinLayout Benchmark Source code</h1>
2+
3+
PinLayout's layout code is concise, clean and doesn't contain any computation compared to Manual Layouting source code.
4+
5+
6+
#### Manual layouting benchmark source code
7+
8+
9+
```
10+
override func layoutSubviews() {
11+
super.layoutSubviews()
12+
13+
optionsLabel.frame = CGRect(x: bounds.width-optionsLabel.frame.width, y: 0,
14+
width: optionsLabel.frame.width, height: optionsLabel.frame.height)
15+
actionLabel.frame = CGRect(x: 0, y: 0, width: bounds.width-optionsLabel.frame.width, height: 0)
16+
actionLabel.sizeToFit()
17+
18+
posterImageView.frame = CGRect(x: 0, y: actionLabel.frame.bottom,
19+
width: posterImageView.frame.width, height: 0)
20+
posterImageView.sizeToFit()
21+
22+
let contentInsets = UIEdgeInsets(top: 0, left: 1, bottom: 2, right: 3)
23+
let posterLabelWidth = bounds.width-posterImageView.frame.width - contentInsets.left -
24+
contentInsets.right
25+
posterNameLabel.frame = CGRect(x: posterImageView.frame.right + contentInsets.left,
26+
y: posterImageView.frame.origin.y + contentInsets.top,
27+
width: posterLabelWidth, height: 0)
28+
posterNameLabel.sizeToFit()
29+
30+
let spacing: CGFloat = 1
31+
posterHeadlineLabel.frame = CGRect(x: posterImageView.frame.right + contentInsets.left,
32+
y: posterNameLabel.frame.bottom + spacing,
33+
width: posterLabelWidth, height: 0)
34+
posterHeadlineLabel.sizeToFit()
35+
36+
posterTimeLabel.frame = CGRect(x: posterImageView.frame.right + contentInsets.left,
37+
y: posterHeadlineLabel.frame.bottom + spacing, width: posterLabelWidth,
38+
height: 0)
39+
posterTimeLabel.sizeToFit()
40+
41+
posterCommentLabel.frame = CGRect(x: 0, y: max(posterImageView.frame.bottom,
42+
posterTimeLabel.frame.bottom +
43+
contentInsets.bottom),
44+
width: frame.width, height: 0)
45+
posterCommentLabel.sizeToFit()
46+
47+
contentImageView.frame = CGRect(x: frame.width/2 - contentImageView.frame.width/2,
48+
y: posterCommentLabel.frame.bottom, width: frame.width, height: 0)
49+
contentImageView.sizeToFit()
50+
51+
contentTitleLabel.frame = CGRect(x: 0, y: contentImageView.frame.bottom, width: frame.width, height: 0)
52+
contentTitleLabel.sizeToFit()
53+
54+
contentDomainLabel.frame = CGRect(x: 0, y: contentTitleLabel.frame.bottom, width: frame.width, height: 0)
55+
contentDomainLabel.sizeToFit()
56+
57+
likeLabel.frame = CGRect(x: 0, y: contentDomainLabel.frame.bottom, width: 0, height: 0)
58+
likeLabel.sizeToFit()
59+
60+
commentLabel.sizeToFit()
61+
commentLabel.frame = CGRect(x: frame.width/2-commentLabel.frame.width/2,
62+
y: contentDomainLabel.frame.bottom,
63+
width: commentLabel.frame.width, height: commentLabel.frame.height)
64+
65+
shareLabel.sizeToFit()
66+
shareLabel.frame = CGRect(x: frame.width-shareLabel.frame.width, y: contentDomainLabel.frame.bottom,
67+
width: shareLabel.frame.width, height: shareLabel.frame.height)
68+
69+
actorImageView.frame = CGRect(x: 0, y: likeLabel.frame.bottom, width: 0, height: 0)
70+
actorImageView.sizeToFit()
71+
72+
actorCommentLabel.frame = CGRect(x: actorImageView.frame.right, y: likeLabel.frame.bottom,
73+
width: frame.width-actorImageView.frame.width, height: 0)
74+
actorCommentLabel.sizeToFit()
75+
}
76+
```
77+
78+
### PinLayout benchmark source code
79+
80+
```
81+
override func layoutSubviews() {
82+
super.layoutSubviews()
83+
84+
let hMargin: CGFloat = 8
85+
let vMargin: CGFloat = 2
86+
87+
optionsLabel.pin.topRight().margin(hMargin)
88+
actionLabel.pin.topLeft().margin(hMargin)
89+
90+
posterImageView.pin.below(of: actionLabel, aligned: .left).marginTop(10)
91+
posterNameLabel.pin.right(of: posterImageView, aligned: .top).margin(-6, 6).right(hMargin).sizeToFit()
92+
posterHeadlineLabel.pin.below(of: posterNameLabel, aligned: .left).right(hMargin).marginTop(1).sizeToFit()
93+
posterTimeLabel.pin.below(of: posterHeadlineLabel, aligned: .left).right(hMargin).marginTop(1).sizeToFit()
94+
95+
posterCommentLabel.pin.below(of: posterTimeLabel).left(hMargin).right().right(hMargin)
96+
.marginTop(vMargin).sizeToFit()
97+
98+
contentImageView.pin.below(of: posterCommentLabel).hCenter().width(100%).sizeToFit()
99+
contentTitleLabel.pin.below(of: contentImageView).left().right().marginHorizontal(hMargin).sizeToFit()
100+
contentDomainLabel.pin.below(of: contentTitleLabel, aligned: .left).right().marginRight(hMargin)
101+
.sizeToFit()
102+
103+
likeLabel.pin.below(of: contentDomainLabel, aligned: .left).marginTop(vMargin)
104+
commentLabel.pin.top(to: likeLabel.edge.top).hCenter(50%)
105+
shareLabel.pin.top(to: likeLabel.edge.top).right().marginRight(hMargin)
106+
107+
actorImageView.pin.below(of: likeLabel, aligned: .left).marginTop(vMargin)
108+
actorCommentLabel.pin.right(of: actorImageView, aligned: .center).marginLeft(4)
109+
}
110+
```

‎Docs/Benchmark.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
## Methodology
88

99
##### LayoutKit Benchmark
10-
PinLayout's performance has been tested using a fork of [LayoutKit](https://github.com/mirego/LayoutKit). LayoutKit's example app include a really nice benchmark.
10+
PinLayout's performance has been tested using a fork of [LayoutKit](https://github.com/mirego/LayoutKit). LayoutKit include an example app with a really nice and simple benchmark. It is used to compare LayoutKit with Auto layout, UIStackViews and manual layouting.
1111

12-
The benchmark has been modified to also include PinLayout. [See PinLayout implementation source code](https://github.com/mirego/LayoutKit/blob/master/LayoutKitSampleApp/Benchmarks/FeedItemPinLayoutView.swift). Remark that PinLayout's layout code is concise, clean and doesn't contain any computation in `layoutSubviews()`, compared to [Manual Layouting source code](https://github.com/mirego/LayoutKit/blob/master/LayoutKitSampleApp/Benchmarks/FeedItemManualView.swift)
12+
The benchmark has been modified to also include [PinLayout](https://github.com/mirego/LayoutKit/blob/master/LayoutKitSampleApp/Benchmarks/FeedItemPinLayoutView.swift). Remark in the implemantation that PinLayout's layout code is concise, clean and doesn't contain any computation [compared to Manual Layouting source code](Benchmark-PinLayout-SourceCode.md).
1313

1414
The benchmark include tests for the following layout systems:
1515

@@ -27,21 +27,22 @@ The LayoutKit benchmark layout UICollectionView and UITableView cells in multipl
2727
Here are the rendering results to compare visual results:
2828

2929
* [Auto layout rendering result](Benchmark/Benchmark-Autolayout.png)
30-
* [LayoutKit rendering result](Benchmark/Benchmark-PinLayout.png)
31-
* [PinLayout rendering result](Benchmark/Benchmark-LayoutKit.png)
30+
* [PinLayout rendering result](Benchmark/Benchmark-PinLayout.png)
31+
* [LayoutKit rendering result](Benchmark/Benchmark-LayoutKit.png)
3232

3333
## Results
3434

35-
As you can see in the following chart, PinLayout's performance is as fast as manual layouting, and up to **12x faster than auto layout**, and **16x faster than UIStackViews**. LayoutKit is also realy fast, slightly slower than PinLayout and manual layouting.
35+
As you can see in the following chart, PinLayout's performance is as fast as manual layouting, and up to **12x faster than auto layout**, and **16x faster than UIStackViews**. [LayoutKit](https://github.com/linkedin/LayoutKit) is also really fast, slightly slower than PinLayout and manual layouting.
3636

3737
These results also means that PinLayout is by far faster than any layout frameworks that is built over auto layout ([SnapKit](https://github.com/SnapKit/SnapKit), [Stevia](https://github.com/freshOS/Stevia), [PureLayout](https://github.com/PureLayout/PureLayout), ...).
3838

39-
It takes almost half a second (0.468 ms) to render 100 UICollectionView's cells using UIStackViews, and 1/3 of second (0.344) using auto layout. And all these results are on a iPhone 6S device.
39+
It takes almost half a second (0.468 ms) to render 100 UICollectionView's cells using UIStackViews, and 1/3 of second (0.344) using auto layout on a iPhone 6S device.
4040

41+
<br>
4142

4243
<p align="center">iPhone 6S - iOS 10.3.2</p>
4344
<p align="center">
44-
<a href="https://mirego.github.io/PinLayout/"><img src="Benchmark/Chart-iPhone6S.png" alt="PinLayout Performance"/></a>
45+
<a href=""><img src="Benchmark/Chart-iPhone6S.png" alt="PinLayout Performance"/></a>
4546
<p align="center" style="font-size:10px;">X axis in the number cells in a UICollectionView, and Y axis is the time in miliseconds to layout all cells.</p>
4647
</p>
4748

‎README.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -75,19 +75,18 @@ A view can be layouted using PinLayout and later with another method/framework.
7575

7676
# PinLayout's Performance <a name="performance"></a>
7777

78-
PinLayout's performance has been measured using the excellent LayoutKit benchmark, which has been developped to compared LayoutKit performance over UIStackView, Auto layout and manual layouting. [PinLayout has been added to this benchmark](https://github.com/mirego/LayoutKit)
79-
to compare its performance.
78+
PinLayout's performance has been measured using the excellent LayoutKit benchmark. PinLayout has been added to this benchmark to compare its performance.
8079

8180
As you can see in the following chart, PinLayout's performance is as fast as manual layouting, and up to **12x faster than auto layout**, and **16x faster than UIStackViews**.
8281

8382
These results also means that **PinLayout is by far faster than any layout frameworks that is built over auto layout**.
8483

85-
[More details and explanation of the benchmark](Docs/Benchmark)
84+
[More details and explanation of the benchmark](Docs/Benchmark.md)
8685

8786
<p align="center"> Tested on a iPhone 6S iOS 10.3.2</p>
8887
<p align="center">
89-
<a href="https://mirego.github.io/PinLayout/"><img src="Docs/Benchmark/Chart-iPhone6S.png" alt="PinLayout Performance" width=500/></a>
90-
<p align="center" style="font-size:10px;">X axis in the number cells in a UICollectionView, and Y axis is the time in miliseconds to layout all cells.</p>
88+
<img src="Docs/Benchmark/Chart-iPhone6S.png" alt="PinLayout Performance" width=650/>
89+
<p align="center" style="font-size:9px;">X axis in the number cells in a UICollectionView, and Y axis is the time in miliseconds to layout all cells.</p>
9190
</p>
9291

9392
<br/>
@@ -828,17 +827,19 @@ dependencies: [
828827
```
829828
<br>
830829

831-
## Comments, ideas, suggestions, issues, .... <a name="comments"></a>
830+
### Comments, ideas, suggestions, issues, .... <a name="comments"></a>
832831
For any **comments**, **ideas**, **suggestions**, **issues**, simply open an [issue](https://github.com/mirego/PinLayout/issues).
833832

834-
<br>
835833

836-
## Contributing
837-
1. Fork it!
838-
2. Create your feature branch: `git checkout -b my-new-feature`
839-
3. Commit your changes: `git commit -am 'Add some feature'`
840-
4. Push to the branch: `git push origin my-new-feature`
841-
5. Submit a pull request :D
834+
### Thanks
835+
PinLayout was inspired by other great layout frameworks, including:
836+
837+
* [MCUIViewLayout](https://github.com/mirego/MCUIViewLayout)
838+
* HTML's CSS
839+
* [SnapKit](https://github.com/SnapKit/SnapKit)
840+
* [Stevia](https://github.com/freshOS/Stevia)
841+
* ... and even Auto layout :-)
842+
842843

843844
## License
844845
BSD 3-Clause License

0 commit comments

Comments
 (0)