Auto Layout with an extended Visual Format Language

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. 4QFBLFS1SPGJMF ;0;05FDIOPMPHJFT *OD %FWFMPQNFOU%JWJTJPO #"/+VO!CBOKVO -PWF-JWFS NBD04 $SFBUF-JWF1IPUPTGSPN.PWJFT 'MJDL4,, J04   +BQBOFTF$VTUPN,FZCPBSE&YUFOTJPO 4JEF1SPKFDUT

Slide 3

Slide 3 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. w 5IFMBSHFTUGBTIJPOPOMJOFTIPQQJOHXFCTJUFJO+BQBO w 0WFS TUPSFTP⒎FSJOHNPSFUIBO CSBOET "TPG%FDTU w "UBOZHJWFOUJNF NPSFUIBO JUFNTBSFBWBJMBCMFGPSQVSDIBTF JOBEEJUJPOPGNPSFUIBO OFXJUFNT BWFSBHF QFSEBZ w 4BNFEBZEFMJWFSZTFSWJDFTBSFBWBJMBCMFJOMJNJUFEBSFBTXJUIJO+BQBO IUUQT[P[PKQ

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP-BZPVUXJUI7'- Pros Multiple constraints at once, using a compact expression ASCII-art like, readable diff Create only valid constraints "H:|-[icon(==32)]-[label]-(>=8)—|"

Slide 10

Slide 10 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP-BZPVUXJUI7'- Cons VFL itself is not validated at compile time Needs some boilerplates to use No explicit support for neither Layout Margins or Safe Area

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. override func loadView() { super.loadView() let views = [ "icon": iconView, "name": nameLabel] views.values.forEach { view.addSubview($0) $0.translatesAutoresizingMaskIntoConstraints = false } let metrics = ["p": 8] view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-p-[icon(==64)]", options: [], metrics: metrics, views: views)) view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: iconView nameLabel 1. setup a view hierarchy for views  2. enable auto-layout for views Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP-BZPVUXJUIPVU/PSUI-BZPVU

Slide 13

Slide 13 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. override func loadView() { super.loadView() let views = [ "icon": iconView, "name": nameLabel] views.values.forEach { view.addSubview($0) $0.translatesAutoresizingMaskIntoConstraints = false } let metrics = ["p": 8] view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-p-[icon(==64)]", options: [], metrics: metrics, views: views)) view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-p-[name]-p-|", options: [], metrics: metrics, views: views)) view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-100-[icon(==64)]-p-[name]", options: [], metrics: metrics, views: views)) } 3. write VFL with many parameters

Slide 14

Slide 14 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. /PSUI-BZPVU6TBHF 1. declare views 2. write VFLs autolayout("…") iconView nameLabel override func loadView() { super.loadView() let autolayout = northLayoutFormat(["p": 8], [ "icon": iconView, "name": nameLabel]) autolayout("H:|-p-[icon(==64)]") autolayout("H:|-p-[name]-p—|") autolayout("V:|-p—[icon(==64)]-p-[name]") }

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. &YUFOEJOH7'- Idea VFL (Apple) Extended VFL (EVFL) autolayout("H:|[header]|") autolayout("H:||[icon]… single vertical bar | = superview bounds double vertical bars || = layout margin bounds

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. 8IZ-BZPVU.BSHJOT Layout Margins follow Safe Area Layout Margins are active on all devices not only devices with home indicator test layout constraints in any devices

Slide 25

Slide 25 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. -BZPVU.BSHJOT4BGF"SFB Example Constraining to Layout Margins No constraints ref to Safe Area Layout Margins reflects Safe Area Copyright © ZOZO Technologies, Inc. All Rights Reserved.

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. &7'-"CTUSBDU4ZOUBY5SFF struct VFL { let orientation: Orientation let firstBound: (Bound, Connection)? let firstView: View let views: [(Connection, View)] var lastView: View {return views.last?.1 ?? firstView} let lastBound: (Connection, Bound)?

Slide 32

Slide 32 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. &7'-"CTUSBDU4ZOUBY5SFF enum Orientation {case h, v} struct View { let name: String let predicateListWithParens: [Predicate] } enum Bound: String { case superview = "|" case layoutMargin = "||" }

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. 1BSTJOH&7'- static var parser: Parser { let metricName = identifier let positiveNumber: Parser = numberPa let simplePredicate: Parser (char("(") *> ({[$0]} <^> VFL.Predicate.parser)) <*> zeroOrMore(char(",") *> VFL.Predicate.parser) <* let predicateList: Parser = <|> {.predicateListWithParens($0)} <^> predicateListW let bound: Parser = {_ in VFL.Bound <|> {_ in .superview} <^> string(VFL.Bound.superview. let connection = (VFL.Connection.init) <^> (char("-") *> <|> {_ in VFL.PredicateList.simplePredicate(.positive

Slide 35

Slide 35 text

Copyright © ZOZO Technologies, Inc. All Rights Reserved. 1BSTJOH&7'- <|> {_ in VFL.PredicateList.simplePredicate(.positiveN <|> {_ in VFL.PredicateList.simplePredicate(.positiveN let view = curry(VFL.View.init) <^> (char("[") *> identifier) <*> optional(predicateListWithParens, otherwise: []) < let views = zeroOrMore({a in {(a, $0)}} <^> connection <*> let orientation: Parser = {_ i <|> {_ in .h} <^> (string("H:") <|> string("")) return curry(VFL.init) <^> orientation <*> optional(tuple <^> bound <*> connection) <*> view <*> views <*> optional(tuple <^> connection <*> bound) }