iOSDC2018.pdf

Good Practices for a Robust View Layout
iOSDC 2018

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
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. ੍໿͕૬ޓʹӨڹ͢ΔͨΊ
66. 4T
70. - ೴಺ϝϞϦ͕଍Γͳ͘ͳΔ ίʔυͰॻ͘ΑΓStoryboard
71. એݴతʹهड़͢Δ
75. Use UIStackView
76. Use UIStackView
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