Build iOS UI in the way of Lego bricks

What’s our problem?

320

375

981

768

736

694

678667

639

568507

480

438

414

1366

1024

What we have?

is just not enough“Size classes”“Size classes”

• XS: 300 - 400

• S: 400 - 500

• M: 500 - 600

• L: 600 - 800

• XL: 800 - 1024

• XXL: 1024+

All cells should have dynamic height

https://vimeo.com/148935928

One cell to rule them all

Isolate completely all UI parts OUT of cell.

Put UI parts into “configurations”

ConfigurationConfiguration(

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

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

“Spotlight”: les super-pouvoirs du quatrième pouvoir

case Zen, Article, Featured, Video, Portfolio, Alert, Twitter, Date, Header, Footer, Toolbar, etc …

This is the very basic idea, but it could be developed and could lead us to beat the monster eventually.

Where to go from here?

Use also auto layout and configuration to layout our cells in the collection view

cell

cell

cell

cellcell

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

Declarative

Reusable

Configurable

Made by Victor Wang

allblue.me

Follow me on Twitter: @wangshengjia

Visit my blog: