iOSDC2018.pdf

Transcript

1. Good Practices for a Robust View Layout 2018.9.2

2. 1. ϨΠΞ΢τ͸ͳͥյΕΔͷ͔ 2. ໰୊ʹରॲ͢ΔͨΊͷಓ۩ 2.1.Auto Layout 2.2.Storyboard 2.3.ϥΠϒϨϯμϦϯά 3. UIίϯϙʔωϯτΛςετ͢Δ

   Agenda

3. What is a broken layout?

4. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

5. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

6. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

7. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

8. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

9. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

10. ϨΠΞ΢τ͕յΕ͍ͯΔ ͜ͱʹؾͮ͘͜ͱ͸೉͍͠

11. - ಛఆͷঢ়ଶͷͱ͖͚ͩى͜Δ - ϩάΠϯɾະϩάΠϯͰදࣔ಺༰͕มΘΔ - λοϓ΍εϫΠϓͷΞΫγϣϯͰը໘͕มΘΔ - σʔλͷྔʹΑΔ - ͞·͟·ͳΤϥʔ

    - ਖ਼͠͞ͷఆ͕ٛ೉͍͠ - Ϋϥογϡ͢ΔΘ͚Ͱ͸ͳ͍ - ίϯϐϡʔλ͕ؒҧ͍Λ൑அͰ͖ͳ͍ ͳͥյΕ͍ͯΔ͜ͱʹؾ͚ͮͳ͍͔

12. ؾͮ͘͜ͱ͕Ͱ͖ͯ΋ ๷͙͜ͱ͸͞Βʹ೉͍͠

13. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

14. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

15. What is the problem?

16. - ঢ়ଶ͕ଟ͍ - μΠφϛοΫʹมԽ͢Δ - ࣮ߦ͢Δ·ͰΘ͔Βͳ͍ What is the problem

17. - ঢ়ଶΛݮΒ͠ - ੩తʹఆٛ͠ - ࣮ߦͤͣʹ֬ೝ͢Δ ໰୊Λখ͘͢͞Δ

18. ಉ͡΋ͷΛ࡞Δํ๏͕ ৗʹෳ਺ଘࡏ͢Δ ѱ͍΍ΓํΛݮΒ͠ɺྑ͍΍ΓํΛ૿΍͢

19. (00% #"% 5FTUBCMF %FDMBSBUJWF 4UBUJD %ZOBNJD 4NBMM4JNQMF -BSHF$PNQMFY 'SBNF
    -BZPVU "VUP
    -BZPVU

    9*#4UPSZCPBSE *OUFSGBDF
    #VJMEFS .BOVBM
    5FTU 6*4UBDL7JFX

20. Ξϯνύλʔϯ

21. - σόΠεΛ൑ఆ͢Δ - ඪ४UIͷαΠζΛԾఆ͢Δ Ξϯνύλʔϯ

22. σόΠεΛ൑ఆ͢Δ

23. σόΠεΛ൑ఆ͢Δ !

24. - ৚݅Λ૿΍ͯ͠͸͍͚ͳ͍ - if isIPhoneX { ͱॻ͍ͨͳΒɺiPhone Xͱͦ ΕҎ֎ͷσόΠεͰඞͣ֬ೝ͠ͳ͚Ε͹ͳΒͳ ͘ͳΔ

    - ৽͍͠σόΠε͕ൃച͞ΕͨΒʁ - ܧଓՄೳͳ࢓૊ΈͰ͸ͳ͍ σόΠεΛ൑ఆͯ͠͸͍͚ͳ͍!

25. ඪ४UIͷαΠζΛԾఆ͢Δ

26. ඪ४UIͷαΠζΛԾఆ͢Δ !

27. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

28. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

29. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

30. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

31. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

32. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

33. - ඪ४UIͷαΠζ͸ݻఆͰ͸ͳ͍ - ࣮ߦ࣌ʹมΘΔ - มΘΒͳ͍ͱࢥ͍ͬͯΔ΋ͷ΋ҙ֎ͱมΘΔ - έʔεΛ໢ཏ͢Δ͜ͱ͕ࠔ೉ ඪ४UIͷαΠζΛԾఆͯ͠͸͍͚ͳ͍!

34. Safe Area (Top/Bottom Layout Guide)͔Β૬ରతʹߟ͑Δ

35. Safe Area (Top/Bottom Layout Guide)͔Β૬ରతʹߟ͑Δ

36. Safe Area (Top/Bottom Layout Guide)͔Β૬ରతʹߟ͑Δ - Safe Areaʹ෇͚Δ͔ͦ͏Ͱͳ͍ͷ͔ - جຊతʹ͜Ε͚ͩ

    - ͜ΕΛͦΕͧΕͷϏϡʔͰ൑அ͢Δ

37. Good/Bad Practice

38. - AutoLayout - Storyboard ໰୊ʹରॲ͢ΔͨΊͷπʔϧ

39. Frame LayoutΑΓ Auto Layout

40. - Auto Layout GOOD - Frame Layout BAD

41. - Auto Layout (or Alt-Auto Layout) GOOD - Frame Layout

    BAD

42. Storyboard (Interface Builder)Λ ׆༻͢Δ

43. Good

44. None
45. None
46. None

47. - Interface BuilderΛ׆༻͢Δ - Auto LayoutͷΤϥʔΛڭ͑ͯ͘ΕΔ - ࣮ߦͤͣʹ͞·͟·ͳঢ়ଶΛ֬ೝͰ͖Δ - @IBDesignable/@IBInspectable͕ศར

    Good Practice

48. Auto Layoutͷ੍໿Λ Storyboard/XIBͰ࡞੒͢Δ

49. Auto Layoutͷ੍໿Λ Storyboard/XIBͰ࡞੒͢Δ

50. ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

51. Q. Auto Layoutͷ੍໿Λ ίʔυͰॻ͘͜ͱͷԿ͕೉͍͠ͷ͔

52. A. ੍໿͕૬ޓʹӨڹ͢ΔͨΊ

53. None
54. None
55. None
56. None
57. None
58. None
59. None
60. None
61. None
62. None
63. None
64. None
65. None

66. 4T

67. None
68. None
69. None

70. - ೴಺ϝϞϦ͕଍Γͳ͘ͳΔ ίʔυͰॻ͘ΑΓStoryboard

71. એݴతʹهड़͢Δ

72. None
73. None
74. None

75. Use UIStackView

76. Use UIStackView

77. None
78. None

79. τϧπϝ͸UIStackView - ͢΂ͯͷϏϡʔΛUIStackViewʹ٧Ίͯɺ isHiddenΛ੾Γସ͑Δ͚ͩ - Ϛʔδϯ͕ҰఆͰͳ͍৔߹͸ϚʔδϯΛ࣋ͭϏϡʔ Λ֎ଆʹ࣋ͭ

80. ࣅͨΑ͏ͳϏϡʔͰ߲໨ͷ૿ݮ͕͋Δͱ͖

81. ࣅͨΑ͏ͳϏϡʔͰ߲໨ͷ૿ݮ͕͋Δͱ͖

82. Paging /w UIScrollView ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

83. UICollection/TableView vs UIStackView ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

84. Animation ը૾ɾσʔλ౳͸ٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ

85. ΞχϝʔγϣϯʹΑΔϨΠΞ΢τ΁ͷӨڹ - ΞχϝʔγϣϯʹΑͬͯผͷϏϡʔͷҐஔΛม͑ Δ͔Ͳ͏͔ʢྫ: ԡ͠ग़͢ʣ - ผͷϏϡʔΛԡ͠ग़ͨ͠Γ͠ͳ͍ͳΒɺ CGAffineTransform͕࢖͑Δ

86. CGAffineTransformʹΑΔΞχϝʔγϣϯ

87. CGAffineTransformʹΑΔΞχϝʔγϣϯ

88. ಈతͳ಺༰Λ੩తʹఆٛ͢Δ - UIStackViewΛ׆༻͢Δ - τϧπϝ - ߲໨ͷ૿ݮ - εΫϩʔϧ/ϖʔδϯά -

    CGAffineTransformʹΑΔΞχϝʔγϣϯ

89. - Auto Layout͸ίʔυͰॻ͘ΑΓStoryboard/XIB - ঢ়ଶΛݮΒ͢ - ੩తʹఆٛ͢Δ - ಈతʹ੍໿Λมߋ͠ͳ͍ Good

    Practice

90. Grouping

91. άϧʔϐϯά͢Δͱ੍໿ͷؔ܎͕؆୯ʹͳΔ

92. άϧʔϐϯά͢Δͱ੍໿ͷؔ܎͕؆୯ʹͳΔ

93. άϧʔϐϯά͢Δͱ੍໿ͷؔ܎͕؆୯ʹͳΔ

94. άϧʔϐϯά͢Δͱ੍໿ͷؔ܎͕؆୯ʹͳΔ

95. άϧʔϐϯά͢Δͱ੍໿ͷؔ܎͕؆୯ʹͳΔ

96. άϧʔϐϯά͢Δͱ੍໿ͷؔ܎͕؆୯ʹͳΔ

97. άϧʔϐϯά͢Δͱ੍໿ͷؔ܎͕؆୯ʹͳΔ

98. - ෼ׂ౷࣏ - ৗʹ̎ͭͷϏϡʔͱSuper Viewͷؔ܎ͱͯ͠ߟ͑ ΒΕΔ - ΍Γ͗͢͸ې෺ʢ೴಺ϝϞϦ͕଍Γͳ͘ͳΔʣ άϧʔϐϯά͢Δͱ੍໿ͷؔ܎͕؆୯ʹͳΔ

99. ύϑΥʔϚϯε͕ؾʹͳΔʁ

100. - ྆ํΛ༏ઌ͢Δ͜ͱ͸Ͱ͖ͳ͍ - ઈରతͳਖ਼ղ͸ͳ͍ - ৗʹܭଌ͢΂͠ - ຊ౰ʹ໰୊ʹͳΔͱ͜Ζ͚ͩ - ηΦϦʔͱͯ͠ɺಡΈ΍͢͞Λ༏ઌ͢Δ

     ύϑΥʔϚϯεͷ໰୊͸ৗʹτϨʔυΦϑ

101. - Best Practice!! - ςελϒϧʹ͢Δʹґଘ͕গͳ͘ͳΔɺ໰୊͕খ ͘͞ͳΔɺetc - ݸʑͷίϯϙʔωϯτ͕ਖ਼͚͠Ε͹શମ͕ਖ਼͍͠ ֬཰͕ߴ͍ ςελϒϧʹ͢Δ

102. Folio UI Collection https://github.com/folio-sec/Folio-UI-Collection

103. Folio UI Collection $POUBJOFE#VUUPO 0VUMJOFE#VUUPO 5FYU
     #VUUPO 5BH-BCFM $POUBJOFS
     
     -BCFM 4VCNJTTJPO4UBUVT#VUUPO

     https://github.com/folio-sec/Folio-UI-Collection

104. - ঢ়ଶΛݮΒ͢ - ੩తʹఆٛ͢Δ - ࣮ߦͤͣʹ֬ೝ͢ΔखஈΛ૿΍͢ - ςελϒϧΛ໨ࢦ͢ Summary

105. None