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 Λܧঝ͍ͯ͠Δ

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