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

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

2bfb16e53b154afc9f141f831b4aaaf2?s=47 naru-jpn
March 28, 2018

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

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

2bfb16e53b154afc9f141f831b4aaaf2?s=128

naru-jpn

March 28, 2018
Tweet

Transcript

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

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

  3. No Interface Builder No Auto Layout iPhone & iPad (&

    iPhoneX) Portrait & Landscape
  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 } } …
  5. https://github.com/naru-jpn/LayoutXML LayoutXML Android styled XML template engine for iOS written

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

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

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

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

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

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

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

  14. લఏ͓ΘΓ

  15. ຊ୊

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

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

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

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

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

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

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

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

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

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

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

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

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

  29. Ͳ͏࡞Γ·͔͢ʁ

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

  31. FlattenViewController

  32. 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 = "͋Γ͕ͱ͏͍͟͝·ͨ͠" // ϨΠΞ΢τͷߋ৽... } }
  33. ϨΠΞ΢τͷߋ৽͕େม

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

  35. ֊૚ԽΛͯ͠ΈΑ͏

  36. LayeredViewController

  37. LayeredViewController LayeredHeaderView LayeredBodyView LayeredFooterView

  38. class LayeredViewController: UIViewController, Instantiatable { @IBOutlet weak var header: LayeredHeaderView!

    @IBOutlet weak var body: LayeredBodyView! @IBOutlet weak var footer: LayeredFooterView! } ֤ΧελϜϏϡʔͷ࡞Γํɺ࢖͍ํΛΈ͍͖ͯ·͠ΐ͏
  39. class LayeredHeaderView: UIView { @IBOutlet weak var titleLabel: UILabel! @IBOutlet

    weak var messageLabel: UILabel! /// ঝ୚͞Εͨ func accept() { messageLabel.text = "͋Γ͕ͱ͏͍͟͝·ͨ͠" } }
  40. UIViewΛ௥ՃɺCustom Class ʹఆٛͨ͠ϏϡʔͷΫϥεΛࢦఆ͢Δ Tips1 ΧελϜϏϡʔͷࢦఆ

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

  42. 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 } } }
  43. 0 A B C Priority: A, B < C ੍໿CͷΞΫςΟϒɾඇΞΫςΟϒͷ੾Γସ͑ʹΑͬͯදࣔɾඇද͕ࣔͰ͖Δ

    100 100 Tips2 ੍໿ͷߏ଄Խ
  44. class LayeredFooterView: UIView { @IBOutlet weak var notesButon: UIButton! }

  45. 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ߦʂ
  46. ಈతͳ࢓༷͕૿͑ͯ΋ฏؾͳؾ͕͠·ͤΜ͔ʁ

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

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