Auto Layout with an extended Visual Format Language

AltConf19 on Thursday 11:00-11:10 (LT) at San Jose Marriott
http://altconf.com

Video Archive: https://www.youtube.com/watch?v=3n3AeUuWavw

Transcript

1. Copyright © ZOZO Technologies, Inc. All Rights Reserved. ;0;0
   5FDIOPMPHJFT
   *OD
   #"/
   +VO
   
   !CBOKVO "VUP
   -BZPVU
   XJUI
   BO
   FYUFOEFE
   7JTVBM
   'PSNBU
   -BOHVBHF "MU$POG
   
2. Copyright © ZOZO Technologies, Inc. All Rights Reserved. 4QFBLFS
   1SPGJMF ;0;0
   5FDIOPMPHJFT
   *OD
   %FWFMPQNFOU
   %JWJTJPO #"/
   +VO
   
   !CBOKVO -PWF-JWFS
   NBD04
   
   $SFBUF
   -JWF
   1IPUPT
   GSPN
   .PWJFT 'MJDL4,,
   J04 

   
   +BQBOFTF
   $VTUPN
   ,FZCPBSE
   &YUFOTJPO 4JEF
   1SPKFDUT
3. Copyright © ZOZO Technologies, Inc. All Rights Reserved. w 5IF
   MBSHFTU
   GBTIJPO
   POMJOF
   TIPQQJOH
   XFCTJUF
   JO
   +BQBO
   w 0WFS
    
   TUPSFT
   P⒎FSJOH
   NPSF
   UIBO
    
   CSBOET
   "T
   PG
   %FD
   TU
   
   w "U
   BOZ
   HJWFO
   UJNF
   NPSF
   UIBO
    
   JUFNT
   BSF
   BWBJMBCMF
   GPS
   QVSDIBTF
   JO
   BEEJUJPO
   PG
   NPSF
   UIBO
    
   OFX
   JUFNT
   BWFSBHF
   QFS
   EBZ
   w 4BNF
   EBZ
   EFMJWFSZ
   TFSWJDFT
   BSF
   BWBJMBCMF
   JO
   MJNJUFE
   BSFBT
   XJUIJO
   +BQBO
   
   
   IUUQT[P[PKQ
   
4. Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP
   -BZPVU
5. Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP
   -BZPVU $PEF *OUFSGBDF
   #VJMEFS
6. Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP
   -BZPVU
   XJUI
   $PEF 7JTVBM
   'PSNBU
   -BOHVBHF -BZPVU
   "ODIPST %4-
   -JCSBSZ
7. Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP
   -BZPVU
   XJUI
   
 7JTVBM
   'PSNBU
   -BOHVBHF
8. Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP
   -BZPVU
   XJUI
   
 7'-
9. Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP
   -BZPVU
   XJUI
   7'- Pros Multiple constraints at once, using a compact expression ASCII-art like, readable diff Create only valid constraints "H:|-[icon(==32)]-[label]-(>=8)—|"
10. Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP
    -BZPVU
    XJUI
    7'- Cons VFL itself is not validated at compile time Needs some boilerplates to use No explicit support for neither Layout Margins or Safe Area
11. Copyright © ZOZO Technologies, Inc. All Rights Reserved. /PSUI-BZPVU banjun/NorthLayout
12. 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
    -BZPVU
    Š
    XJUIPVU
    /PSUI-BZPVU
13. 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
14. Copyright © ZOZO Technologies, Inc. All Rights Reserved. /PSUI-BZPVU
    6TBHF 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]") }
15. Copyright © ZOZO Technologies, Inc. All Rights Reserved. 3FBEBCMF
    
    3FWJFXBCMF
16. Copyright © ZOZO Technologies, Inc. All Rights Reserved. 3FBEBCMF
    
    3FWJFXBCMF
17. Copyright © ZOZO Technologies, Inc. All Rights Reserved. 7'-
    
    4BGF
    "SFB
18. Copyright © ZOZO Technologies, Inc. All Rights Reserved. 7'-
    
    4BGF
    "SFB VFL does not support Safe Area But I want to write constraints as easy as VFL
19. Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP
    -BZPVU
    XJUI
    
 7'-
20. Copyright © ZOZO Technologies, Inc. All Rights Reserved. "VUP
    -BZPVU
    XJUI
    
 BO
    FYUFOEFE
    7'-
    !
21. Copyright © ZOZO Technologies, Inc. All Rights Reserved. &YUFOEJOH
    7'- Idea VFL (Apple) Extended VFL (EVFL) autolayout("H:|[header]|") autolayout("H:||[icon]… single vertical bar | = superview bounds double vertical bars || = layout margin bounds
22. Copyright © ZOZO Technologies, Inc. All Rights Reserved. &YUFOEJOH
    7'- Idea VFL (Apple) Extended VFL (EVFL) autolayout("H:|[header]|") autolayout("H:||[icon]… single vertical bar | double vertical bars ||
23. Copyright © ZOZO Technologies, Inc. All Rights Reserved. 8IZ
    -BZPVU
    .BSHJOT
24. 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
25. Copyright © ZOZO Technologies, Inc. All Rights Reserved. -BZPVU
    .BSHJOT
    
    4BGF
    "SFB Example Constraining to Layout Margins No constraints ref to Safe Area Layout Margins reflects Safe Area Copyright © ZOZO Technologies, Inc. All Rights Reserved.
26. Copyright © ZOZO Technologies, Inc. All Rights Reserved. *NQMFNFOUJOH
    &7'- "H:||[icon]…
27. Copyright © ZOZO Technologies, Inc. All Rights Reserved. *NQMFNFOUJOH
    &7'- VFL "H:|[icon]… Auto Layout
28. Copyright © ZOZO Technologies, Inc. All Rights Reserved. *NQMFNFOUJOH
    &7'- EVFL "H:||[icon]… VFL "H:|[icon]… Auto Layout ?
29. Copyright © ZOZO Technologies, Inc. All Rights Reserved. *NQMFNFOUJOH
    &7'- EVFL Parser AST "H:||[icon]… struct VFL Edge Constraints "H:[icon]… Auto Layout Decomposer +
30. Copyright © ZOZO Technologies, Inc. All Rights Reserved. 1BSTJOH
    &7'- EVFL Parser AST "H:||[icon]… struct parser combinator (kareman/FootlessParser)
31. Copyright © ZOZO Technologies, Inc. All Rights Reserved. &7'-
    "CTUSBDU
    4ZOUBY
    5SFF 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)?
32. Copyright © ZOZO Technologies, Inc. All Rights Reserved. &7'-
    "CTUSBDU
    4ZOUBY
    5SFF enum Orientation {case h, v} struct View { let name: String let predicateListWithParens: [Predicate] } enum Bound: String { case superview = "|" case layoutMargin = "||" }
33. Copyright © ZOZO Technologies, Inc. All Rights Reserved. &7'-
    "CTUSBDU
    4ZOUBY
    5SFF enum Orientation {case h, v} struct View { let name: String let predicateListWithParens: [Predicate] } enum Bound: String { case superview = "|" case layoutMargin = "||" }
34. Copyright © ZOZO Technologies, Inc. All Rights Reserved. 1BSTJOH
    &7'- static var parser: Parser<Character, VFL> { let metricName = identifier let positiveNumber: Parser<Character, CGFloat> = numberPa let simplePredicate: Parser<Character, VFL.SimplePredicat let predicateListWithParens: Parser<Character, [VFL.Predi <^> (char("(") *> ({[$0]} <^> VFL.Predicate.parser)) <*> zeroOrMore(char(",") *> VFL.Predicate.parser) <* let predicateList: Parser<Character, VFL.PredicateList> = <|> {.predicateListWithParens($0)} <^> predicateListW let bound: Parser<Character, VFL.Bound> = {_ in VFL.Bound <|> {_ in .superview} <^> string(VFL.Bound.superview. let connection = (VFL.Connection.init) <^> (char("-") *> <|> {_ in VFL.PredicateList.simplePredicate(.positive
35. 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<Character, VFL.Orientation> = {_ i <|> {_ in .h} <^> (string("H:") <|> string("")) return curry(VFL.init) <^> orientation <*> optional(tuple <^> bound <*> connection) <*> view <*> views <*> optional(tuple <^> connection <*> bound) }
36. Copyright © ZOZO Technologies, Inc. All Rights Reserved. .JOJNVN
    %JGG
    GPS
    4BGF
    "SFB
    4VQQPSU
37. Copyright © ZOZO Technologies, Inc. All Rights Reserved. .JOJNVN
    %JGG
    GPS
    4BGF
    "SFB
    4VQQPSU double vertical bars || = stick to layout margin single vertical bar |-p- = stick to superview with a space p
38. Copyright © ZOZO Technologies, Inc. All Rights Reserved. .JOJNVN
    %JGG
    GPS
    4BGF
    "SFB
    4VQQPSU double vertical bars || = stick to layout margin
39. Copyright © ZOZO Technologies, Inc. All Right Reserved. &OKPZ autolayout("H:||[WWDC][AltConf]||")