Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

ばんじゅん🍓

March 28, 2018
Tweet

More Decks by ばんじゅん🍓

Other Decks in Programming

Transcript

  1. ΧδϡΞϧʹ͸͡ΊΔ7'-
    CBOKVO
    ",*#"TXJGUʷΤ΢ϨΧίʔυϨΠΞ΢τษڧձ
    7JTVBM'PSNBU-BOHVBHF
    autolayout("H:|-[AKIBA][eureka]-|")

    View full-size slide

  2. ͹Μ͡ΎΜ!CBOKVO
    ࣗݾ঺հ
    'MJDL4,,4,,ΩʔϘʔυ J04

    -PWF-JWFSϥΠϒϑΥτੜ੒ NBD04

    1IPUP4UVEJP1MBZFS

    ϥΠτχϯάΫϩϚΩʔΩϟϓνϟ NBD04

    ࠷ۙࢀՃͨ͠ϋοΧιϯ

    ΞΠϚεϋοΧιϯɾϓϦύϥϋοΧιϯ

    View full-size slide

  3. ίʔυϨΠΞ΢τ͍ͯ͠Δ
    !"

    View full-size slide

  4. 7'-Λ࢖͍ͬͯΔ
    !"
    "H:|-[AKIBA][eureka]-|"
    ˞7JTVBM'PSNBU-BOHVBHFŠ͜Μͳײ͡ͷ

    View full-size slide

  5. 7JTVBM'PSNBU-BOHVBHF
    "H:|-[AKIBA][eureka]-|"
    "QQMFͷ

    "VUP-BZPVU(VJEF

    ʹ΋ग़ͯ͘Δ

    View full-size slide

  6. Α͘ݟ͔͚Δ7'-
    Will attempt to recover by breaking constraint
    0x7fa08ef0b820]-(8)-[UILabel:0x7fa08ef0bba0'Name']
    (active)>
    ੍໿͕ίϯϑϦΫτͨ͠ͱ͖ͷίϯιʔϧϩά
    ςΩετίϛϡχέʔγϣϯ

    View full-size slide

  7. J04͕࠷௿λʔήοτ࣌୅ʹBVUPMBZPVUಋೖ
    *#͸όʔδϣϯ؅ཧɾνʔϜ։ൃͭΒ͍
    ίʔυϨΠΞ΢τΛࢼߦࡨޡͯ͠7'-࠾༻
    7'-पลͷϘΠϥʔϓϨʔτΛӅ͢ϥΠϒϥϦ࡞੒
    7'-Λ࢖͏͖͔͚ͬ

    View full-size slide

  8. ʮ/PSUINFUIPEʯ͕ऩ࿥͞Ε͍ͯΔ$%
    7'-ͷബ͍ϥούʔ ॳظWFSMJOFT

    ಠࣗͷϨΠΞ΢τख๏Λಋೖ͠ͳ͍ Ͱ͖Δ͚ͩ

    ͋͘·Ͱඪ४ػೳΛ࠷୹Ͱ࢖͏ͨΊ
    ଞͷ੍໿ͱ૊Έ߹ΘͤͰ͖Δ
    ໋໊͸QPEԽͨ͠ͱ͖ͷ

    ։ൃ߹॓ఱମͷϝιου੟஍८ྱ

    ʹ༝དྷ
    /PSUI-BZPVU

    View full-size slide

  9. αϯϓϧ
    ˞࠷ۙ4BGF"SFBΛؾʹ͍ͯͨ͠ͷͰͦ͏͍͏
    αϯϓϧΞχϝ
    ˞੍໿ࣗମ͸੩త

    View full-size slide

  10. αϯϓϧ
    ˞࠷ۙ4BGF"SFBΛؾʹ͍ͯͨ͠ͷͰͦ͏͍͏
    αϯϓϧΞχϝ
    ˞੍໿ࣗମ͸੩త

    View full-size slide

  11. /PSUI-BZPVUͰॻ͘

    View full-size slide

  12. pod "NorthLayout"
    window = UIWindow()
    window?.rootViewController = UINavigationController(
    rootViewController: ViewController(
    nibName: nil, bundle: nil))
    window?.makeKeyAndVisible()
    didFinishLaunching

    View full-size slide

  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

    View full-size slide

  14. (ϝτϦΫε, Ϗϡʔ໊ࣙॻ) -> (VFLจࣈྻ) -> Void
    northLayoutFormat:
    autolayout(…)

    View full-size slide

  15. ϨΠΞ΢τ͸࣠Ͱॻ͘

    View full-size slide

  16. ϨΠΞ΢τ͸࣠Ͱॻ͘

    View full-size slide

  17. ϨΠΞ΢τ͸࣠Ͱॻ͘

    View full-size slide

  18. ϨΠΞ΢τ͸࣠Ͱॻ͘
    autolayout("H:|-[icon]-[name]-[date]-|")
    autolayout("H:|-[body]-|")
    autolayout("H:|-[nav]-[fav(==nav)]—|")

    View full-size slide

  19. ϨΠΞ΢τ͸࣠Ͱॻ͘
    autolayout("V:|-[icon]-[body]-[nav]")
    autolayout("V:|-[name(==icon)]-[body]-[fav(==nav)]")
    autolayout("V:|-[date]")

    View full-size slide

  20. autolayout("H:|-[icon]-[name]-[date]-|")
    ඞཁͳ࣠ͷݸ਺7'-ͷจࣈྻͷ਺
    ಡΈ΍͢͞Ͱ෼ׂͯ͠΋Α͍
    ࣠ʹରͯ͠Ұ؏ੑͷ͋Δෳ਺ͷ੍໿Λੜ੒
    MFGU SJHIUϛε΍ൈ͚͕ൃੜ͠ʹ͍͘
    ϏϡʔೖΕସ͑΋؆୯ɺEJ⒎΋Θ͔Γ΍͍͢
    ͜ͷྫͰ͸ྡ઀Ϗϡʔؒͷ੍໿ੜ੒

    View full-size slide

  21. จࣈྻͷฐ֐ͷͱΒ͔͑ͨ
    "H:|-[ࣙॻʹͳ͍Ϗϡʔ໊]-|"
    "H:[ϋΠϑϯͷӈଆ͕ͳ͍]-"
    "H:[[͍Ζ͍Ζจ๏͕͓͔͍͠]]"
    ˠ࣮֬ʹΫϥογϡ
    ˠ
    Ұ౓ಈ͚͹0,
    7'-Ҏ֎Ͱ΋ࠔ೉ͳ໋୊
    ίϯύΠϧ͕௨ΔͳΒ͹੍໿͕ڝ߹͠ͳ͍
    ίϯύΠϧ͕௨ΔͳΒ͹ϨΠΞ΢τ͕ҙਤ௨Γ

    View full-size slide

  22. 7'-ͱ4BGF"SFB
    7'-͸4BGF"SFBهड़ෆՄೳ
    Ͱ΋7'-ͬΆ͘؆୯ʹॻ͖͍ͨ

    View full-size slide

  23. autolayout("H:|[header]|")
    autolayout("H:||[icon]…
    ֦ு7'-
    ॎ๮ຊTVQFSWJFXڥք
    ॎ๮ຊϨΠΞ΢τϚʔδϯڥք
    7'-
    ֦ு /&8

    ϨΠΞ΢τϚʔδϯ͸4BGF"SFBΛߟྀ͢Δ
    ͞ΒʹJ1IPOF9Ҏ֎Ͱ΋༗ޮ

    View full-size slide

  24. autolayout("H:|[header]|")
    autolayout("H:||[icon]…
    ֦ு7'-
    ॎ๮ຊ
    ॎ๮ຊ
    7'-
    ֦ு /&8

    View full-size slide

  25. https://github.com/kareman/FootlessParser/pull/10
    https://github.com/kareman/FootlessParser/pull/11
    ֦ு7'-ͷύʔεʹΉ͚ͯ
    kareman/FootlessParser

    View full-size slide

  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)?

    View full-size slide

  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
    }

    View full-size slide

  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)
    }

    View full-size slide

  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?
    }
    }

    View full-size slide

  30. autolayout("H:||[icon]…
    autolayout("H:[icon]…
    ڥք੍໿ͷ͢Γ͔͑
    ϨΠΞ΢τϚʔδϯ΁ͷ੍໿

    View full-size slide

  31. ͖ͭͮ͸8FCͰ
    https://github.com/banjun/NorthLayout/pull/11

    View full-size slide

  32. NBD04ΞϓϦͷϨΠΞ΢τ
    NBD04Ͱ΋BVUPMBZPVUͯ͠ΈΔͱָ͍͠
    ը໘΍΢Πϯυ΢͕ઈରͰ͸ͳ͍ੈք
    ΢Πϯυ΢ϦαΠζΑΓڧ͍Ϗϡʔ͔ऑ͍Ϗϡʔ͔
    .BJO4UPSZCPBSE͸࢒͢ͷ͕Φεεϝ

    /4.FOVͷͨΊ

    ࠷ॳ͸*OUFSGBDF#VJMEFSͷϚʔδϯͷΨΠυͰײ
    ֮௫Ήͷ͕ྑ͍͔΋
    /PSUI-BZPVU͸J04NBD04ରԠͰ͢

    View full-size slide

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

    View full-size slide