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

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

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 Λܧঝ͍ͯ͠Δ
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ͷద౓ͳ֊૚ԽͷఏҊ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !