Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UIViewのレイアウト更新メソッドを整理する
Search
andfactory, inc.
October 25, 2018
Programming
0
380
UIViewのレイアウト更新メソッドを整理する
10.25 and factory BeerBash#4 での@2takaanthony85さんのスライドです。
andfactory, inc.
October 25, 2018
Tweet
Share
More Decks by andfactory, inc.
See All by andfactory, inc.
Android開発初心者にありがちなこと
andfactory
0
230
Codableあるある
andfactory
0
200
Androidエンジニアあるある
andfactory
0
210
Collectionの罠
andfactory
0
170
Cocoa Touch Frameworkあるある
andfactory
0
330
iOS開発に慣れてきた時にやりがちあるある
andfactory
0
180
社内勉強会資料 - スクラム・アジャイル開発
andfactory
0
570
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Try creating your own orderedmap
kazamori
1
160
"config" ってなんだ? / What is "config"?
okashoi
0
250
Code Reviews
bkuhlmann
4
890
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Hanami and htmx
bkuhlmann
0
220
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
Apache Hive 4 on Treasure Data
ryukobayashi
1
410
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Milestoner
bkuhlmann
1
410
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
33k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Gamification - CAS2011
davidbonilla
77
4.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
12
1.5k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
In The Pink: A Labor of Love
frogandcode
138
21k
Writing Fast Ruby
sferik
622
60k
Infographics Made Easy
chrislema
238
18k
Building Applications with DynamoDB
mza
88
5.6k
Teambox: Starting and Learning
jrom
128
8.4k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Transcript
UIViewͷϨΠΞτߋ৽ϝιουΛཧ͢Δ 2018/10/26 @2takaanthony85
who am I ? • ٢߉ʢTakahiro Yoshikawaʣ • @2takaanthony85 •
2 Swift, Go, JS… infrastructure
UIViewControllerUIViewͷϨΠΞτʹ ؔΘΔॲཧͬͯͨ͘͞Μ͋Γ·͢ΑͶʁ
None
None
಄ͷத͍ͬͺ͍ ͍ͭɺͲ͏͏ͷ͔ࠞཚɻɻɻ
None
ࠓ͢͜ͱ
UIViewͷϨΠΞτͷϝιουΛཧ͢Δ
ΞδΣϯμ • ϝιουΛཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙͷղফ • ·ͱΊ
ΞδΣϯμ • ϝιουΛཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙͷղফ • ·ͱΊ
ࠓϑΥʔΧε͢Δͷ • updateConsraints() • setNeedsUpdateConstraints() • updateConstraintsIfNeeded() • layoutSubviews() •
setNeedsLayout() • layoutIfNeeded()
1. ੍ͱϨΠΞτͰཧ
੍ͱϨΠΞτͰཧ ੍ ϨΠΞτ updateConstraints() layoutSubviews() setNeedsUpdateConstraits() setNeedsLayout() updateConstraintsIfNeeded() layoutIfNeeded()
2. ׂͰཧ
ׂͰཧ ੍ ϨΠΞτ ߋ৽͢Δͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout()
ߋ৽Λݺͼग़͢ ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
ΞδΣϯμ • ϝιουΛཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙͷղফ • ·ͱΊ
ΞδΣϯμ • ϝιουΛཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙͷղফ • ·ͱΊ
੍ ϨΠΞτ ߋ৽͢Δͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢
ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
੍ ϨΠΞτ ߋ৽͢Δͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢
ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
updateConstraints() layoutSubviews() • UIComponentΛߋ৽͢Δͱ͜Ζ • ViewDidLoad() ViewDidLayoutSubviews()ʹࣅͯΔ • ݺͼग़͢ͷͰͳ͍
੍ ϨΠΞτ ߋ৽͢Δͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢
ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
੍ ϨΠΞτ ߋ৽͢Δͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢
ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
setNeedsConstraints() setNeedsLayout() • updateConstraints(),layoutSubviews()͕ ࣮ߦ͞ΕΔΑ͏ʹεέδϡʔϦϯά͢Δ • ࣮ߦ͞ΕΔλΠϛϯάiOS͕ ϨΠΞτΤϯδϯΛ࣮ߦ͢Δͷʹ͓ͤ • ViewControllerͳͲͰݺͼग़ͨΓ͢Δ
੍ ϨΠΞτ ߋ৽͢Δͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢
ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
੍ ϨΠΞτ ߋ৽͢Δͷ updateConstraints() layoutSubviews() ߋ৽Λݺͼग़͢ ʢεέδϡʔϦϯάʣ setNeedsUpdateConstraits() setNeedsLayout() ߋ৽Λݺͼग़͢
ʢଈ࣌ʣ updateConstraintsIfNeeded() layoutIfNeeded()
updateConstraintsIfNeeded() layoutIfNeeded() • updateConstraints(),layoutSubviews()͕͢ ͙ʹ࣮ߦ͞ΕΔΑ͏ʹݺͼग़͢ • setNeedsConstraints()setNeedsLayout() ΑΓύϑΥʔϚϯεѱ • ࣮ߦޙʹผͷॲཧΛΒ͍ͤͨͱ͖༻
ಈ͔ͯ͠ཧͯ͠ΈΔ
ߏ View(VC) ࢠView Component
Layout
Layout wࢠ7JFX $VTUPN7JFX ͷ MBZPVU4VC7JFXT͕ݺͼग़͞ΕΔ ʢ 7$ ͷํݺͼग़͞Εͳ͍ʣ
Layout
Layout wࢠ7JFX $VTUPN7JFX εέδϡʔ Ϧϯά͞Ε͍ͯͳ͍ͷͰɺݺͼग़͞Ε ͳ͍
Layout
Layout wɺࢠͲͪΒεέδϡʔϦϯά ͞ΕΔͯΔͷͰɺݺͼग़͞ΕΔ w͔Βࢠͷॱ൪Ͱॲཧ
Layout
Layout wεέδϡʔϦϯά͞Ε͍ͯΔͷͳ͍ ͷͰɺԿى͜Βͳ͍
Constraints
Constraints wࢠ7JFX $VTUPN7JFX ͷ VQEBUF$POTUSBJOUT͕ݺͼग़͞ΕΔ ʢ 7$ ͷํݺͼग़͞Εͳ͍ʣ
Constraints
Constraints wࢠ7JFX $VTUPN7JFX εέδϡʔ Ϧϯά͞Ε͍ͯͳ͍ͷͰɺݺͼग़͞Ε ͳ͍
Constraints
Constraints wɺࢠͲͪΒεέδϡʔϦϯά͞Ε ΔͯΔͷͰɺݺͼग़͞ΕΔ wࢠ͔Βͷॱ൪Ͱॲཧ
Constraints
Constraints wεέδϡʔϦϯά͞Ε͍ͯΔͷͳ͍ ͷͰɺԿى͜Βͳ͍
ΞδΣϯμ • ϝιουΛཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙͷղফ • ·ͱΊ
ΞδΣϯμ • ϝιουΛཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙͷղফ • ·ͱΊ
ٙʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦͦ͜ΕΘͳ͍͍ͯ͘ͷͰʁ
ٙʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦͦ͜ΕΘͳ͍͍ͯ͘ͷͰʁ
1 A.ηοτͰ༻͠ͳ͍͍ͯ͘ setNeedsLayout()ͷ߹ͷ࣮ߦλΠϛϯά γεςϜʹґଘ͢Δͷ͕ͩɺ λΠϛϯάͷࠩ΄΅ͳ͔ͬͨɻ
ٙʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦͦ͜ΕΘͳ͍͍ͯ͘ͷͰʁ
ٙʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦͦ͜ΕΘͳ͍͍ͯ͘ͷͰʁ
2 A.ݺͼग़͞Εͳ͍ ͨͩ͠ɺviewDidLayoutSubviews() ݺͼग़͞ΕΔͷͰɺҙ
ٙʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦͦ͜ΕΘͳ͍͍ͯ͘ͷͰʁ
ٙʹࢥͬͨ͜ͱ 1. setNeedsLayout()Λݺͼग़ͨ͠Βɺ layoutIfNeeded()Λݺͼग़͞ͳ͍ͱ͍͚ ͳ͍ͷ͔ʁ 2. updateConstraints()ݺͼग़͞ΕͨΒɺ layoutSubviews()ݺͼग़͞ΕΔͷ͔ʁ 3. ͦͦ͜ΕΘͳ͍͍ͯ͘ͷͰʁ
2 A.ͦ͏͔͠Εͳ͍ ୯ҰͷίϯϙʔωϯτΛૢ࡞͢Δ͚ͩΈ͍ͨͳ ঢ়گͳΒΘͳ͍͍ͯ͘ ςΩετͷ͞ʹΑͬͯUILabelΛม͑Δ Ͱ͋ͬͨΓɺෳࡶͳUIͷߏͷ߹͕͍ॴ
ΞδΣϯμ • ϝιουΛཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙͷղফ • ·ͱΊ
ΞδΣϯμ • ϝιουΛཧͯ͠ΈΔ • ݸʑͷϝιουΛཧղ͢Δ • ٙͷղফ • ·ͱΊ
·ͱΊʢ݁ہͲͷ໘Ͱ͏͔ʣ 1. ಈతʹUIͷมߋ͕͋Δͱ͖ →ඞཁ࠷ݶͰ͋ͱiOSʹͤΔ 2. ෳࡶͳUIߏͷͱ͖ →VCͱΓ͚ͨΓͯ͠ίʔυΛεοΩϦ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ