StoryBoard+AutoLayout Bad Knowhow

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. ͓͠·͍