Build iOS UI in the way of LEGO bricks

How to build iOS UI in a way declarative, reusable and configurable.
The library built based on the idea in this talk is available on Github: http://github.com/wangshengjia/LeeGo

Transcript

1. Build iOS UI in the way of LEGO bricks
2. What’s our problem? 320 375 981 768 736 694 678 667 639 568 507 480 438 414 1366 1024
3. What we have? is just not enough “Size classes” “Size classes”
4. • XS: 300 - 400 • S: 400 - 500 • M: 500 - 600 • L: 600 - 800 • XL: 800 - 1024 • XXL: 1024+
5. All cells should have dynamic height
7. One cell to rule them all
8. Isolate completely all UI parts OUT of cell.
9. Put UI parts into “configurations”
10. Configuration Configuration( style: Styles.BasicCell, components: [ .title.type(UILabel): Configuration(Styles.H1), .subtitle.type(UILabel): Configuration(Styles.H2), .avatar.type(UIImageView): Configuration(Styles.Img) ], layout: Layout([ "H:|-left-[avatar(90)]-interspaceH-[title]-right-|", "H:[avatar]-interspaceH-[subtitle]-right-|", "V:|-top-[title]-interspaceV-[subtitle]-(>=bottom)-|", "V:|-top-[avatar(60)]-(>=bottom)-|", ], .layoutMetrics) ) How the view looks like What’s inside How to layout them
11. case .Article: return Configuration( Styles.BasicCell, [ .title.type(UILabel): Configuration(Styles.H1), .subtitle.type(UILabel): Configuration(Styles.H2), .image.type(UIImageView): Configuration(Styles.Img) ], Layout([ "H:|-left-[avatar(90)]-interspaceH-[title]-right-|", "H:[avatar]-interspaceH-[subtitle]-right-|", "V:|-top-[title]-interspaceV-[subtitle]-(>=bottom)-|", "V:|-top-[avatar(60)]-(>=bottom)-|", ], .layoutMetrics) ) Cell Apply style to root view • Construct component’s view • Apply component’s style • Add them as subview Apply layout constraints What is Lorem Ipsum ? Lorem Ipsum is simply dummy text of the printing and typesetting industry. img
12. “Spotlight”: les super-pouvoirs du quatrième pouvoir case Zen, Article, Featured, Video, Portfolio, Alert, Twitter, Date, Header, Footer, Toolbar, etc …
13. This is the very basic idea, but it could be developed and could lead us to beat the monster eventually.
14. Where to go from here?
15. Use also auto layout and configuration to layout our cells in the collection view cell cell cell cell cell
16. Zen { "components": ["title", "subtitle", "avatar"], "styles": ["H1", "Pre", "Img"], "layout": [ "H:|-left-[avatar(50)]-interspaceH-[title]-right-|", "H:[avatar]-interspaceH-[subtitle]-right-|", "V:|-top-[title]-interspaceV-[subtitle]-(>=bottom)-|", "V:|-top-[avatar(50)]-(>=bottom)-|", ], "metrics": ["top":20, "bottom":20, "left":20, "right":20, "interspaceH":10, "interspaceV":10], } H1 { "font": System, "textColor": "dark", "textAlignment": Center, "numberOfLines": 0, "translatesAutoresizingMaskIntoConstraints": false } H2 { … } Hot update UI, layout or even create the whole new design remotely
17. Declarative Reusable Configurable
18. Thank you and enjoy !