Save 37% off PRO during our Black Friday Sale! »

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

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

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

9bda8755a689204677a198ee85c0eb07?s=128

banjun
PRO

March 28, 2018
Tweet

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. ʮ/PSUINFUIPEʯ͕ऩ࿥͞Ε͍ͯΔ$% 7'-ͷബ͍ϥούʔ ॳظWFSMJOFT  ಠࣗͷϨΠΞ΢τख๏Λಋೖ͠ͳ͍ Ͱ͖Δ͚ͩ  ͋͘·Ͱඪ४ػೳΛ࠷୹Ͱ࢖͏ͨΊ ଞͷ੍໿ͱ૊Έ߹ΘͤͰ͖Δ ໋໊͸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Λߟྀ͢Δ ͞ΒʹJ1IPOF9Ҏ֎Ͱ΋༗ޮ

  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ͯ͠ΈΔͱָ͍͠ ը໘΍΢Πϯυ΢͕ઈରͰ͸ͳ͍ੈք ΢Πϯυ΢ϦαΠζΑΓڧ͍Ϗϡʔ͔ऑ͍Ϗϡʔ͔ .BJO4UPSZCPBSE͸࢒͢ͷ͕Φεεϝ
 /4.FOVͷͨΊ  ࠷ॳ͸*OUFSGBDF#VJMEFSͷϚʔδϯͷΨΠυͰײ ֮௫Ήͷ͕ྑ͍͔΋ /PSUI-BZPVU͸J04NBD04ରԠͰ͢

  33. autolayout("H:||[AKIBA][eureka]||")