StoryBoard+AutoLayout Bad Knowhow

iphone_dev_jp 東京 feat. Ben Zottoの発表資料です

Transcript

1. 4UPSZ#PBSE
   ʴ
   "VUP-BZPVU
   όουϊ΢ϋ΢ @shobyshoby
2. ࣗݾ঺հ pixivͰΞϓϦͭͬͯ͘·͢
3. ຊ୊
4. Έͳ͞Μ ίʔυ͸ ៉ྷʹอͬͯ·͔͢ʁ
5. ʮ͸ʔ͍ʂ ɹςετ͸ॻ͍ͯΔ͠ ɹϦϑΝΫλϦϯά΋ ɹͯ͠·ʔ͢ʂʯ
6. StoryBoard͸…ʁ
7. ※࣮ࡏͨ͠StoryBoard
8. Ͳ͏ͯ͜͠͏ͳͬͨ…
9. ࣄͷܦҢ
10. pixivͷΞϓϦͰ StoryBoardΛ ࢖͍͕ͬͯͨഁ୼ͨ͠
11. UI͕ݪҼͷ ɹΫϥογϡ͕සൃ Ұཡੑ͕ѱԽ ɹભҠͷ೺Ѳ͕ࠔ೉ʹ GitͰConflict͠·͘Γ
12. ݪҼ
13. UIʹؔ͢Δ ϝϯςφϯεҙࣝͷ௿͞ iPhoneͱiPadͰͷ UI࢖͍ճ͠ ରԠόʔδϣϯiOS 5ʙ
14. StoryBoardͭΒ͍… ! ͔ͱ͍ͬͯ ॻ͖௚͢ͷ΋ͭΒ͍…
15. ;ͱݟͨυΩϡϝϯτ https://developer.apple.com/jp/devcenter/ios/library/ documentation/AutolayoutPG.pdf
16. Auto LayoutΛಋೖ͢Ε͹ɺը໘ͷେ ͖͞΍޲͖ɺ ஍ҬઃఆʢݴޠͳͲʣͷҧ͍ʹԠͯ͡ ಈతʹมԽ͢Δɺ൚༻తͳը໘ϨΠΞ ΢τΛ࡞Γग़͢͜ͱ͕Ͱ͖·͢ɻ
17. ͜Ε΍ʂ
18. Auto Layout࢖͓͏ ͍ͭͰʹ ϦϑΝΫλϦϯά͠Α͏
19. ໨త
20. StoryBoardΛ ៉ྷʹอͪͭͭ Auto LayoutΛ ͏·͍͜ͱ࢖͍͍ͨʂ
21. 4UPSZ#PBSE
    ʴ
    "VUP-BZPVU
    όουϊ΢ϋ΢
22. ֓ཁ
23.  αϙʔτ04Λ࡟Δ
     ػೳΛ࡟Δ
     4UPSZ#PBSEΛ෼ׂ͢Δ
     7JFX$POUSPMMFSΛ෼ׂ͢Δ
     ίʔυͰԿͱ͔͢Δ
24. αϙʔτ04Λ࡟Δ
25. iOS 6ҎԼΛ ੾ΓࣺͯΔ https://developer.apple.com/support/appstore/
26. ػೳΛ࡟Δ
27. ػೳΛ࡟Δ͜ͱͰ ը໘ߏ੒Λ γϯϓϧʹอͭ
28. ػೳ͕ݮΔͱ…
29. ViewController͕ݮΔ Segue͕ݮΔ ಠࣗContainer͕ݮΔ ΧελϜView͕ݮΔ
30. Happy !
31. ͱ͸͍͑… ϦϦʔεࡁΈͷΞϓϦͰ ػೳΛ࡟Δͷ͸ࠔ೉
32. σʔλΛ࢖ͬͯ આಘ͠Α͏
33. 4UPSZ#PBSEΛ
    ෼ׂ͢Δ
34. ViewControllerͷ ґଘؔ܎ΛݮΒ͢ Git࡞ۀͰͷ ConflictΛ๷͙
35. ෼ׂํ਑
36. TabBarͷத਎Λ੾Γग़͢ ModalΛ੾Γग़͢ ଟ਺ͷSegue͕ுΒΕͨ ViewControllerΛ੾Γग़͢
37. 7JFX$POUSPMMFSΛ
    ෼ׂ͢Δ
38. Viewͷ֊૚ߏ଄Λ γϯϓϧʹ͢Δ AutoLayoutͷ ConstraintΛ ཧղՄೳͳϨϕϧʹ͢Δ
39. Auto Layout͸ ਓྨʹ͸ૣ͗͢Δ ! ʢଞਓͷConstraint͸ ɹཧղͰ͖ͳ͍ʣ
40. ཧղͰ͖ͳ͍Ϩϕϧ ෳ਺ͷࢠViewಉ͕࢜ґଘؔ܎Λ࣋ͬͯΔ
41. ཧղͰ͖ͳ͍Ϩϕϧ ֊૚ߏ଄͕ෳࡶ
42. ཧղͰ͖ΔϨϕϧ 2ͭͷViewಉ࢜ͷ੍໿…͙Β͍
43. ੾Γग़ͤΔ෦෼Λ ผͷViewControllerʹ෼཭ childViewControllerʹ͢Δ
44. ੾Γग़ͤͦ͏ͳॴ
45. ෼཭
46. Place Holder PlaceHolderͱͳΔViewΛஔ͍ͯ addSubView + addChildViewController
47. 2ͭͷViewಉ࢜ͷ ੍໿ʹͰ͖ͨʂ
48. ίʔυͰԿͱ͔͢Δ
49. Ͳ͏ͯ͠΋ ೉͍͠෦෼͚ͩ ίʔυͰԿͱ͔͢Δ
50. ConstraintʹIBOutletΛ ܨ͍ͯมߋ͢Δ ConstraintΛ ίʔυͰॻ͘
51. ConstraintΛ ίʔυͰॻ͘৔߹͸ MasonryΛ࢖͏ͱศར https://github.com/cloudkite/Masonry
52. Masonryͷ࢖͍ํ // ௥Ճ [view makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view); }]; ! // ߋ৽ [view updateConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view); }];
53. ݁Ռ
54. Before
55. After
56. Happy !
57. ݁ہ"VUP
    -BZPVU
    ͬͯͲ͏ͳͷʁ
58. ྑ͍ॴ
59. UIʹΑΔ Ϋϥογϡόά͕
 ݮͬͨ
60. σβΠφʔ͞Μ͕ Pull RequestΛ ૹͬͯ͘ΕΔΑ͏ʹͳͬͨ
61. merge࣌ ඞ࣮ͣߦͯ͠ ֬ೝ͢ΔΑ͏ʹͳͬͨ ʢGitHub্ͩͱ෼͔Βͳ͍ͷͰ…ʣ
62. ѱ͍ॴ
63. ৬ਓٕΛ΍ΒΕΔͱ ·ͬͨ͘ཧղͰ͖ͳ͍
64. ϨΠΞ΢τ่Εͷ ݪҼ͕௫ΈͮΒ͘ͳͬͨ
65. ܧଓͯ͠ ϝϯςφϯεͰ͖Δ ؾ͕͠ͳ͍…
66. "VUP
    -BZPVU
    ࢖͏΂͖ʁ
67. https://twitter.com/k_katsumi/status/455340572820000768
68. ۜͷ஄ؙͰ͸ͳ͍ ศརʹ࢖͑͹ศར
69. ·ͱΊ
70. ػೳΛ࡟ͬͯγϯϓϧʹ͢Δ
    4UPSZ#PBSEΛ෼ׂ͢Δ
    7JFX$POUSPMMFSΛ෼ׂ͢Δ
    ࠷ޙʹίʔυͰԿͱ͔͢Δ
    ศརʹ࢖ͬͯɺ6*Λ៉ྷʹ
71. ͓͠·͍