カジュアルにはじめるVFL / Let's start VFL

AKIBA.swift × エウレカ コードレイアウト勉強会
2018-03-28
https://classmethod.connpass.com/event/81032/

Transcript

1. ΧδϡΞϧʹ͸͡ΊΔ7'- CBOKVO
   ",*#"TXJGU
   ʷ
   Τ΢ϨΧ
   ίʔυϨΠΞ΢τษڧձ 7JTVBM
   'PSNBU
   -BOHVBHF autolayout("H:|-[AKIBA][eureka]-|")
2. ͹Μ͡ΎΜ
   
   !CBOKVO ࣗݾ঺հ 'MJDL4,,
   
   4,,ΩʔϘʔυ
   J04 -PWF-JWFS
   
   ϥΠϒϑΥτੜ੒
   NBD04 1IPUP4UVEJP1MBZFS

   
   ϥΠτχϯάΫϩϚΩʔΩϟϓνϟ
   NBD04 ࠷ۙࢀՃͨ͠ϋοΧιϯ

   
   
   
   
   
   ΞΠϚεϋοΧιϯɾϓϦύϥϋοΧιϯ
3. ίʔυϨΠΞ΢τ͍ͯ͠Δ
   !"
4. 7'-Λ࢖͍ͬͯΔ
   !" "H:|-[AKIBA][eureka]-|" ˞7JTVBM
   'PSNBU
   -BOHVBHF
   Š
   ͜Μͳײ͡ͷ
5. 7JTVBM
   'PSNBU
   -BOHVBHF "H:|-[AKIBA][eureka]-|" "QQMFͷ
 "VUP
   -BZPVU
   (VJEF
 ʹ΋ग़ͯ͘Δ
6. Α͘ݟ͔͚Δ7'- Will attempt to recover by breaking constraint <NSLayoutConstraint:0x60400009f630 H:[UIImageView: 0x7fa08ef0b820]-(8)-[UILabel:0x7fa08ef0bba0'Name'] (active)> ੍໿͕ίϯϑϦΫτͨ͠ͱ͖ͷίϯιʔϧϩά ςΩετίϛϡχέʔγϣϯ
7. J04
   ͕࠷௿λʔήοτ࣌୅ʹBVUPMBZPVUಋೖ
   *#͸όʔδϣϯ؅ཧɾνʔϜ։ൃͭΒ͍
   ίʔυϨΠΞ΢τΛࢼߦࡨޡͯ͠7'-࠾༻
   7'-पลͷϘΠϥʔϓϨʔτΛӅ͢ϥΠϒϥϦ࡞੒ 7'-Λ࢖͏͖͔͚ͬ
8. ʮ/PSUI
   NFUIPEʯ͕ऩ࿥͞Ε͍ͯΔ$% 7'-ͷബ͍ϥούʔ
   ॳظWFS
   
   MJOFT
   ಠࣗͷϨΠΞ΢τख๏Λಋೖ͠ͳ͍ Ͱ͖Δ͚ͩ
   ͋͘·Ͱඪ४ػೳΛ࠷୹Ͱ࢖͏ͨΊ
   ଞͷ੍໿ͱ૊Έ߹ΘͤͰ͖Δ
   ໋໊͸QPEԽͨ͠ͱ͖ͷ
 ։ൃ߹॓ఱମͷϝιου੟஍८ྱ
 ʹ༝དྷ /PSUI-BZPVU
9. αϯϓϧ ˞࠷ۙ4BGF
   "SFBΛؾʹ͍ͯͨ͠ͷͰͦ͏͍͏ αϯϓϧΞχϝ
   ˞੍໿ࣗମ͸੩త
10. αϯϓϧ ˞࠷ۙ4BGF
    "SFBΛؾʹ͍ͯͨ͠ͷͰͦ͏͍͏ αϯϓϧΞχϝ
    ˞੍໿ࣗମ͸੩త
11. /PSUI-BZPVUͰॻ͘
12. pod "NorthLayout" window = UIWindow() window?.rootViewController = UINavigationController( rootViewController: ViewController( nibName: nil, bundle: nil)) window?.makeKeyAndVisible() didFinishLaunching
13. 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]") } iconView nameLabel
14. (ϝτϦΫε, Ϗϡʔ໊ࣙॻ) -> (VFLจࣈྻ) -> Void northLayoutFormat: autolayout(…)
15. ϨΠΞ΢τ͸࣠Ͱॻ͘
16. ϨΠΞ΢τ͸࣠Ͱॻ͘
17. ϨΠΞ΢τ͸࣠Ͱॻ͘
18. ϨΠΞ΢τ͸࣠Ͱॻ͘ autolayout("H:|-[icon]-[name]-[date]-|") autolayout("H:|-[body]-|") autolayout("H:|-[nav]-[fav(==nav)]—|")
19. ϨΠΞ΢τ͸࣠Ͱॻ͘ autolayout("V:|-[icon]-[body]-[nav]") autolayout("V:|-[name(==icon)]-[body]-[fav(==nav)]") autolayout("V:|-[date]")
20. autolayout("H:|-[icon]-[name]-[date]-|") ඞཁͳ࣠ͷݸ਺
    
    7'-ͷจࣈྻͷ਺
    ಡΈ΍͢͞Ͱ෼ׂͯ͠΋Α͍
    ࣠ʹରͯ͠Ұ؏ੑͷ͋Δෳ਺ͷ੍໿Λੜ੒
    MFGU SJHIUϛε΍ൈ͚͕ൃੜ͠ʹ͍͘
    ϏϡʔೖΕସ͑΋؆୯ɺEJ⒎΋Θ͔Γ΍͍͢
    ͜ͷྫͰ͸ྡ઀Ϗϡʔؒͷ੍໿ੜ੒
21. จࣈྻͷฐ֐ͷͱΒ͔͑ͨ "H:|-[ࣙॻʹͳ͍Ϗϡʔ໊]-|" "H:[ϋΠϑϯͷӈଆ͕ͳ͍]-" "H:[[͍Ζ͍Ζจ๏͕͓͔͍͠]]" ˠ
    ࣮֬ʹΫϥογϡ ˠ
    Ұ౓ಈ͚͹0, 7'-Ҏ֎Ͱ΋ࠔ೉ͳ໋୊ ίϯύΠϧ͕௨ΔͳΒ͹੍໿͕ڝ߹͠ͳ͍
    ίϯύΠϧ͕௨ΔͳΒ͹ϨΠΞ΢τ͕ҙਤ௨Γ
22. 7'-ͱ4BGF
    "SFB 7'-͸4BGF
    "SFBهड़ෆՄೳ
    Ͱ΋7'-ͬΆ͘؆୯ʹॻ͖͍ͨ
23. autolayout("H:|[header]|") autolayout("H:||[icon]… ֦ு7'- ॎ๮ຊ
    
    TVQFSWJFXڥք ॎ๮ຊ
    
    ϨΠΞ΢τϚʔδϯڥք 7'- ֦ு
    /&8 ϨΠΞ΢τϚʔδϯ͸4BGF
    "SFBΛߟྀ͢Δ
    ͞ΒʹJ1IPOF
    9Ҏ֎Ͱ΋༗ޮ
24. autolayout("H:|[header]|") autolayout("H:||[icon]… ֦ு7'- ॎ๮ຊ ॎ๮ຊ 7'- ֦ு
    /&8
25. https://github.com/kareman/FootlessParser/pull/10 https://github.com/kareman/FootlessParser/pull/11 ֦ு7'-ͷύʔεʹΉ͚ͯ kareman/FootlessParser
26. 7'-ύʔαʔΛͭ͘Δ 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)?
27. 7'-ύʔαʔΛͭ͘Δ enum Orientation {case h, v} struct View { let name: String let predicateListWithParens: [Predicate] } enum Bound: String { case superview = "|" case layoutMargin = "||" } struct Connection { let predicateList: PredicateList }
28. 7'-ύʔαʔΛͭ͘Δ enum PredicateList { case simplePredicate(SimplePredicate) case predicateListWithParens([Predicate]) } enum SimplePredicate { case metricName(MetricName) case positiveNumber(CGFloat) } enum Relation {case eq, le, ge} enum ObjectOfPredicate { case constant(Constant) case viewName(ViewName) }
29. 7'-ύʔαʔΛͭ͘Δ enum Constant { case metricName(MetricName) case number(CGFloat) } enum Priority { case metricName(MetricName) case number(CGFloat) } struct Predicate { let relation: Relation? let objectOfPredicate: ObjectOfPredicate let priority: Priority? } }
30. autolayout("H:||[icon]… autolayout("H:[icon]… ڥք੍໿ͷ͢Γ͔͑ ϨΠΞ΢τϚʔδϯ΁ͷ੍໿
31. ͖ͭͮ͸8FCͰ https://github.com/banjun/NorthLayout/pull/11
32. NBD04ΞϓϦͷϨΠΞ΢τ NBD04Ͱ΋BVUPMBZPVUͯ͠ΈΔͱָ͍͠
    ը໘΍΢Πϯυ΢͕ઈରͰ͸ͳ͍ੈք
    ΢Πϯυ΢ϦαΠζΑΓڧ͍Ϗϡʔ͔ऑ͍Ϗϡʔ͔
    .BJO
    4UPSZCPBSE͸࢒͢ͷ͕Φεεϝ
 /4.FOVͷͨΊ
    ࠷ॳ͸*OUFSGBDF
    #VJMEFSͷϚʔδϯͷΨΠυͰײ ֮௫Ήͷ͕ྑ͍͔΋
    /PSUI-BZPVU͸J04NBD04ରԠͰ͢
33. autolayout("H:||[AKIBA][eureka]||")