UIViewのレイアウト更新メソッドを整理する

10.25 and factory BeerBash#4 での@2takaanthony85さんのスライドです。

Transcript

1. UIViewͷϨΠΞ΢τߋ৽ϝιουΛ੔ཧ͢Δ 2018/10/26 @2takaanthony85
2. who am I ? • ٢઒߉޿ʢTakahiro Yoshikawaʣ • @2takaanthony85 • 2೥໨ Swift, Go, JS… infrastructure
3. UIViewController΍UIViewͷϨΠΞ΢τʹ ؔΘΔॲཧͬͯͨ͘͞Μ͋Γ·͢ΑͶʁ
6. ಄ͷத͍ͬͺ͍ ͍ͭɺͲ͏࢖͏ͷ͔ࠞཚɻɻɻ
8. ࠓ೔࿩͢͜ͱ
9. UIViewͷϨΠΞ΢τͷϝιουΛ੔ཧ͢Δ
10. ΞδΣϯμ • ϝιουΛ੔ཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙ໰఺ͷղফ • ·ͱΊ
11. ΞδΣϯμ • ϝιουΛ੔ཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙ໰఺ͷղফ • ·ͱΊ
12. ࠓ೔ϑΥʔΧε͢Δ΋ͷ • updateConsraints() • setNeedsUpdateConstraints() • updateConstraintsIfNeeded() • layoutSubviews() • setNeedsLayout() • layoutIfNeeded()
13. 1. ੍໿ͱϨΠΞ΢τͰ੔ཧ
14. ੍໿ͱϨΠΞ΢τͰ੔ཧ ੍໿ ϨΠΞ΢τ updateConstraints() layoutSubviews() setNeedsUpdateConstraits() setNeedsLayout() updateConstraintsIfNeeded() layoutIfNeeded()
15. 2. ໾ׂͰ੔ཧ
16. ໾ׂͰ੔ཧ ੍໿ ϨΠΞ΢τ ߋ৽͢Δ΋ͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢ ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
17. ΞδΣϯμ • ϝιουΛ੔ཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙ໰఺ͷղফ • ·ͱΊ
18. ΞδΣϯμ • ϝιουΛ੔ཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙ໰఺ͷղফ • ·ͱΊ
19. ੍໿ ϨΠΞ΢τ ߋ৽͢Δ΋ͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢ ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
20. ੍໿ ϨΠΞ΢τ ߋ৽͢Δ΋ͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢ ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
21. updateConstraints() layoutSubviews() • UIComponentΛߋ৽͢Δͱ͜Ζ • ViewDidLoad()΍ ViewDidLayoutSubviews()ʹࣅͯΔ • ݺͼग़͢΋ͷͰ͸ͳ͍
22. ੍໿ ϨΠΞ΢τ ߋ৽͢Δ΋ͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢ ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
23. ੍໿ ϨΠΞ΢τ ߋ৽͢Δ΋ͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢ ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
24. setNeedsConstraints() setNeedsLayout() • updateConstraints(),layoutSubviews()͕ ࣮ߦ͞ΕΔΑ͏ʹεέδϡʔϦϯά͢Δ • ࣮ߦ͞ΕΔλΠϛϯά͸iOS͕ ϨΠΞ΢τΤϯδϯΛ࣮ߦ͢Δͷʹ͓೚ͤ • ViewControllerͳͲͰݺͼग़ͨΓ͢Δ
25. ੍໿ ϨΠΞ΢τ ߋ৽͢Δ΋ͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢ ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
26. ੍໿ ϨΠΞ΢τ ߋ৽͢Δ΋ͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢ ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
27. updateConstraintsIfNeeded() layoutIfNeeded() • updateConstraints(),layoutSubviews()͕͢ ͙ʹ࣮ߦ͞ΕΔΑ͏ʹݺͼग़͢ • setNeedsConstraints()΍setNeedsLayout() ΑΓύϑΥʔϚϯεѱ • ࣮ߦޙʹผͷॲཧΛ૸Β͍ͤͨͱ͖༻
28. ಈ͔ͯ͠੔ཧͯ͠ΈΔ
29. ߏ੒ ਌View(VC) ࢠView Component
30. Layout
31. Layout wࢠ7JFX $VTUPN7JFX ͷ MBZPVU4VC7JFXT͕ݺͼग़͞ΕΔ
    ʢ਌ 7$ ͷํ͸ݺͼग़͞Εͳ͍ʣ
32. Layout
33. Layout wࢠ7JFX $VTUPN7JFX ͸εέδϡʔ Ϧϯά͞Ε͍ͯͳ͍ͷͰɺݺͼग़͞Ε ͳ͍
34. Layout
35. Layout w਌ɺࢠͲͪΒ΋εέδϡʔϦϯά
    ͞ΕΔͯΔͷͰɺݺͼग़͞ΕΔ
    w਌͔Βࢠͷॱ൪Ͱॲཧ
36. Layout
37. Layout wεέδϡʔϦϯά͞Ε͍ͯΔ΋ͷͳ͍ ͷͰɺԿ΋ى͜Βͳ͍
38. Constraints
39. Constraints wࢠ7JFX $VTUPN7JFX ͷ VQEBUF$POTUSBJOUT͕ݺͼग़͞ΕΔ
    ʢ਌ 7$ ͷํ͸ݺͼग़͞Εͳ͍ʣ
40. Constraints
41. Constraints wࢠ7JFX $VTUPN7JFX ͸εέδϡʔ Ϧϯά͞Ε͍ͯͳ͍ͷͰɺݺͼग़͞Ε ͳ͍
42. Constraints
43. Constraints w਌ɺࢠͲͪΒ΋εέδϡʔϦϯά͞Ε ΔͯΔͷͰɺݺͼग़͞ΕΔ
    wࢠ͔Β਌ͷॱ൪Ͱॲཧ
44. Constraints
45. Constraints wεέδϡʔϦϯά͞Ε͍ͯΔ΋ͷͳ͍ ͷͰɺԿ΋ى͜Βͳ͍
46. ΞδΣϯμ • ϝιουΛ੔ཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙ໰఺ͷղফ • ·ͱΊ
47. ΞδΣϯμ • ϝιουΛ੔ཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙ໰఺ͷղফ • ·ͱΊ
48. ٙ໰ʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦ΋ͦ΋͜Ε࢖Θͳͯ͘΋͍͍ͷͰ͸ʁ
49. ٙ໰ʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦ΋ͦ΋͜Ε࢖Θͳͯ͘΋͍͍ͷͰ͸ʁ
50. 1 A.ηοτͰ࢖༻͠ͳ͍͍ͯ͘ setNeedsLayout()ͷ৔߹ͷ࣮ߦλΠϛϯά͸ γεςϜʹґଘ͢Δ΋ͷ͕ͩɺ λΠϛϯάͷࠩ͸΄΅ͳ͔ͬͨɻ
51. ٙ໰ʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦ΋ͦ΋͜Ε࢖Θͳͯ͘΋͍͍ͷͰ͸ʁ
52. ٙ໰ʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦ΋ͦ΋͜Ε࢖Θͳͯ͘΋͍͍ͷͰ͸ʁ
53. 2 A.ݺͼग़͞Εͳ͍ ͨͩ͠ɺviewDidLayoutSubviews()͸ ݺͼग़͞ΕΔͷͰɺ஫ҙ
54. ٙ໰ʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦ΋ͦ΋͜Ε࢖Θͳͯ͘΋͍͍ͷͰ͸ʁ
55. ٙ໰ʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦ΋ͦ΋͜Ε࢖Θͳͯ͘΋͍͍ͷͰ͸ʁ
56. 2 A.ͦ͏͔΋͠Εͳ͍ ୯ҰͷίϯϙʔωϯτΛૢ࡞͢Δ͚ͩΈ͍ͨͳ ঢ়گͳΒ࢖Θͳͯ͘΋͍͍ ςΩετͷ௕͞ʹΑͬͯUILabelΛม͑Δ Ͱ͋ͬͨΓɺෳࡶͳUIͷߏ੒ͷ৔߹͕࢖͍ॴ
57. ΞδΣϯμ • ϝιουΛ੔ཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙ໰఺ͷղফ • ·ͱΊ
58. ΞδΣϯμ • ϝιουΛ੔ཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙ໰఺ͷղফ • ·ͱΊ
59. ·ͱΊʢ݁ہͲͷ৔໘Ͱ࢖͏͔ʣ 1. ಈతʹUIͷมߋ͕͋Δͱ͖ →ඞཁ࠷௿ݶͰ͋ͱ͸iOSʹ೚ͤΔ 2. ෳࡶͳUIߏ੒ͷͱ͖ →VCͱ੾Γ෼͚ͨΓͯ͠ίʔυΛεοΩϦ
60. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ