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

IBとUIの適度な階層化の提案

naru-jpn
March 28, 2018

 IBとUIの適度な階層化の提案

IB上でUIの適度な階層化をすることによって、標準の仕組みでより簡単に扱えるような設計を目指しました。

naru-jpn

March 28, 2018
Tweet

More Decks by naru-jpn

Other Decks in Technology

Transcript

  1. IBͱUIͷద౓ͳ֊૚ԽͷఏҊ
    2018.3.28 AKIBA.swift × Τ΢ϨΧ ίʔυϨΠΞ΢τษڧձ
    Naruki Chigira @timers-inc.

    View full-size slide

  2. Lib arXiv
    arxiv.org ʹ౤ߘ͞ΕΔ࿦จΛӾཡɾอଘɾڞ༗͢ΔͨΊͷΞϓϦ

    View full-size slide

  3. No Interface Builder
    No Auto Layout
    iPhone & iPad (& iPhoneX)
    Portrait & Landscape

    View full-size slide

  4. class ApplicationStyle {
    static let isiPhone = UIDevice.current.userInterfaceIdiom == .phone
    class Category {
    static func TableViewCellRowHeight() -> CGFloat {
    if isiPhone {
    return 50.0
    } else {
    return 60.0
    }
    }

    View full-size slide

  5. https://github.com/naru-jpn/LayoutXML
    LayoutXML
    Android styled XML template engine for iOS written in Swift.

    View full-size slide

  6. https://github.com/naru-jpn/LayoutXML

    View full-size slide

  7. https://github.com/naru-jpn/LayoutXML

    View full-size slide

  8. https://github.com/naru-jpn/LayoutXML

    View full-size slide

  9. https://github.com/naru-jpn/LayoutXML
    $ pod try LayoutXML

    View full-size slide

  10. XML͔Βੜ੒͞ΕΔϏϡʔͷ֊૚ߏ଄

    View full-size slide

  11. http://grepcode.com/.../LinearLayout.java
    grepcode.com
    LinearLayout ͸ View Λܧঝ͍ͯ͠Δ

    View full-size slide

  12. ֊૚ߏ଄͕෼͔Ε͍ͯΔͷͰ
    ֤ʑͷ಺෦ͷϨΠΞ΢τ͸ಠཱʹܭࢉ͕Ͱ͖Δ



    View full-size slide

  13. લఏ͓ΘΓ

    View full-size slide

  14. ϏϡʔίϯτϩʔϥʹԿΛ͍͔ͤͨ͞ʁ

    View full-size slide

  15. ϏϡʔͷίϯτϩʔϧΛ͍ͤͨ͞

    View full-size slide

  16. Ͱ͖Ε͹Ϗϡʔͷίϯτϩʔϧʮ͚ͩʯ͍ͤͨ͞

    View full-size slide

  17. ͖ͬ͞ͷxmlͷྫΛࢥ͍ग़ͯ͠ΈΔ

    View full-size slide

  18. https://github.com/naru-jpn/LayoutXML

    View full-size slide

  19. https://github.com/naru-jpn/LayoutXML

    View full-size slide

  20. ಡΈࠐΈ3ߦɺ಺෦৘ใͷߋ৽4ߦʂ

    View full-size slide

  21. Ͱ΋ո͍͠ϥΠϒϥϦ͸࢖͍ͨ͘ͳ͍

    View full-size slide

  22. ʮ֊૚ߏ଄ʯ͕ΩʔʹͳΔͷͰ͸…!

    View full-size slide

  23. Ծʹɺ࣍ͷΑ͏ͳ࣮૷Λߟ͑ͯΈ·͠ΐ͏

    View full-size slide

  24. ίʔυϨΠΞ΢τ
    ҎԼͷจষΛ֬͝ೝ͍ͩ͘͞
    ͋ͳͨ͸Interface BuilderΛ
    ࢖ͬͯ͸͍͚·ͤΜ
    ͸͍ɺΘ͔Γ·ͨ͠
    ஫ҙࣄ߲

    View full-size slide

  25. ίʔυϨΠΞ΢τ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ஫ҙࣄ߲

    View full-size slide

  26. ίʔυϨΠΞ΢τ
    ҎԼͷจষΛ֬͝ೝ͍ͩ͘͞
    ͋ͳͨ͸Interface BuilderΛ
    ࢖ͬͯ͸͍͚·ͤΜ
    ͸͍ɺΘ͔Γ·ͨ͠
    ஫ҙࣄ߲
    ίʔυϨΠΞ΢τ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ஫ҙࣄ߲

    View full-size slide

  27. Ͳ͏࡞Γ·͔͢ʁ

    View full-size slide

  28. ·ͣ͸ϑϥοτʹ࡞ͬͯΈ·͠ΐ͏

    View full-size slide

  29. FlattenViewController

    View full-size slide

  30. class FlattenViewController: UIViewController, Instantiatable {
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var messageLabel: UILabel!
    @IBOutlet weak var confirmLabel: UILabel!
    @IBOutlet weak var confirmButton: UIButton!
    @IBOutlet weak var notesButton: UIButton!
    @IBAction func onAcceptButtonClicked(sender: Any) {
    messageLabel.text = "͋Γ͕ͱ͏͍͟͝·ͨ͠"
    // ϨΠΞ΢τͷߋ৽...
    }
    }

    View full-size slide

  31. ϨΠΞ΢τͷߋ৽͕େม

    View full-size slide

  32. ಈతͳ࢓༷͕͞Βʹ૿͑ͨΒ…?

    View full-size slide

  33. ֊૚ԽΛͯ͠ΈΑ͏

    View full-size slide

  34. LayeredViewController

    View full-size slide

  35. LayeredViewController
    LayeredHeaderView
    LayeredBodyView
    LayeredFooterView

    View full-size slide

  36. class LayeredViewController: UIViewController, Instantiatable {
    @IBOutlet weak var header: LayeredHeaderView!
    @IBOutlet weak var body: LayeredBodyView!
    @IBOutlet weak var footer: LayeredFooterView!
    }
    ֤ΧελϜϏϡʔͷ࡞Γํɺ࢖͍ํΛΈ͍͖ͯ·͠ΐ͏

    View full-size slide

  37. class LayeredHeaderView: UIView {
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var messageLabel: UILabel!
    /// ঝ୚͞Εͨ
    func accept() {
    messageLabel.text = "͋Γ͕ͱ͏͍͟͝·ͨ͠"
    }
    }

    View full-size slide

  38. UIViewΛ௥ՃɺCustom Class ʹఆٛͨ͠ϏϡʔͷΫϥεΛࢦఆ͢Δ
    Tips1 ΧελϜϏϡʔͷࢦఆ

    View full-size slide

  39. Outlets ʹΧελϜϏϡʔͷϓϩύςΟ͕ݟ͑ΔͷͰɺܨ͙
    Tips1 ΧελϜϏϡʔͷࢦఆ

    View full-size slide

  40. class LayeredBodyView: UIView {
    @IBOutlet weak var messageLabel: UILabel!
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var zeroHeightConstraint: NSLayoutConstraint!
    /// ։ด
    var isOpen: Bool = true {
    didSet {
    zeroHeightConstraint.isActive = !isOpen
    }
    }
    }

    View full-size slide

  41. 0
    A
    B
    C
    Priority: A, B < C
    ੍໿CͷΞΫςΟϒɾඇΞΫςΟϒͷ੾Γସ͑ʹΑͬͯදࣔɾඇද͕ࣔͰ͖Δ
    100
    100
    Tips2 ੍໿ͷߏ଄Խ

    View full-size slide

  42. class LayeredFooterView: UIView {
    @IBOutlet weak var notesButon: UIButton!
    }

    View full-size slide

  43. class LayeredViewController: UIViewController, Instantiatable {
    @IBOutlet weak var header: LayeredHeaderView!
    @IBOutlet weak var body: LayeredBodyView!
    @IBOutlet weak var footer: LayeredFooterView!
    @IBAction func onAcceptButtonClicked(sender: Any) {
    header.accept()
    body.isOpen = false
    }
    }
    13ߦʂ

    View full-size slide

  44. ಈతͳ࢓༷͕૿͑ͯ΋ฏؾͳؾ͕͠·ͤΜ͔ʁ

    View full-size slide

  45. ·ͱΊ
    ʮద౓ͳ֊૚ԽʯʹΑͬͯ
    ɾ໌֬ͳػೳΛ࣋ͬͨΧελϜϏϡʔ͕࡞੒͠΍͘͢ͳΔ
    ɾ੍໿͕ߏ଄Խ͞Εͯར༻͠΍͘͢ͳΔ
    ɾϏϡʔίϯτϩʔϥͰͷॲཧΛந৅Խ͠΍͘͢ͳΔ

    View full-size slide

  46. IBͱUIͷద౓ͳ֊૚ԽͷఏҊ
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !

    View full-size slide