iOSDC2018.pdf

 iOSDC2018.pdf

Good Practices for a Robust View Layout
iOSDC 2018

9bf923e39671cde83584e3e926296c13?s=128

Kishikawa Katsumi

September 02, 2018
Tweet

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 .BOVBM5FTU 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