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
iOSDC2018.pdf
Search
Kishikawa Katsumi
September 02, 2018
Programming
18
7.3k
iOSDC2018.pdf
Good Practices for a Robust View Layout
iOSDC 2018
Kishikawa Katsumi
September 02, 2018
Tweet
Share
More Decks by Kishikawa Katsumi
See All by Kishikawa Katsumi
Enhancing Applications with Accessibility API
kishikawakatsumi
3
2.1k
Mastering SwiftSyntax
kishikawakatsumi
3
4.3k
My SwiftData Review
kishikawakatsumi
7
1.2k
Swift Expression Macros: a practical introduction
kishikawakatsumi
3
1.7k
Xcode Cloudの評価
kishikawakatsumi
2
1.1k
Regular expressions basics/正規表現の基本
kishikawakatsumi
6
650
家のいろいろな数値を計測する
kishikawakatsumi
4
2k
GitHub Actionsでテストの結果をわかりやすく表示する
kishikawakatsumi
1
740
GitHub Actionsでテストの結果をわかりやすく表示する
kishikawakatsumi
1
1.6k
Other Decks in Programming
See All in Programming
Implementing Design Systems in Swift
seyfoyun
2
530
RaaP
ksss
0
160
HonoのRPCで真の型安全が欲しかった
kosei28
1
160
Unlocking Potential of Property Based Testing with Ractor
ohbarye
2
140
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
520
株式会社ゼネテック
genetec
0
130
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
2.2k
Productivity is Messing Around and Having Fun
hollycummins
1
180
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
1.1k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
69
8.6k
Statistics for Hackers
jakevdp
790
220k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
A Tale of Four Properties
chriscoyier
153
22k
The Cult of Friendly URLs
andyhume
74
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Ruby is Unlike a Banana
tanoku
96
10k
Side Projects
sachag
451
41k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Transcript
Good Practices for a Robust View Layout 2018.9.2
1. ϨΠΞτͳͥյΕΔͷ͔ 2. ʹରॲ͢ΔͨΊͷಓ۩ 2.1.Auto Layout 2.2.Storyboard 2.3.ϥΠϒϨϯμϦϯά 3. UIίϯϙʔωϯτΛςετ͢Δ
Agenda
What is a broken layout?
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ϨΠΞτ͕յΕ͍ͯΔ ͜ͱʹؾͮ͘͜ͱ͍͠
- ಛఆͷঢ়ଶͷͱ͖͚ͩى͜Δ - ϩάΠϯɾະϩάΠϯͰදࣔ༰͕มΘΔ - λοϓεϫΠϓͷΞΫγϣϯͰը໘͕มΘΔ - σʔλͷྔʹΑΔ - ͞·͟·ͳΤϥʔ
- ਖ਼͠͞ͷఆ͕͍ٛ͠ - Ϋϥογϡ͢ΔΘ͚Ͱͳ͍ - ίϯϐϡʔλ͕ؒҧ͍ΛஅͰ͖ͳ͍ ͳͥյΕ͍ͯΔ͜ͱʹؾ͚ͮͳ͍͔
ؾͮ͘͜ͱ͕Ͱ͖ͯ ͙͜ͱ͞Βʹ͍͠
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
What is the problem?
- ঢ়ଶ͕ଟ͍ - μΠφϛοΫʹมԽ͢Δ - ࣮ߦ͢Δ·ͰΘ͔Βͳ͍ What is the problem
- ঢ়ଶΛݮΒ͠ - ੩తʹఆٛ͠ - ࣮ߦͤͣʹ֬ೝ͢Δ Λখ͘͢͞Δ
ಉ͡ͷΛ࡞Δํ๏͕ ৗʹෳଘࡏ͢Δ ѱ͍ΓํΛݮΒ͠ɺྑ͍ΓํΛ૿͢
(00% #"% 5FTUBCMF %FDMBSBUJWF 4UBUJD %ZOBNJD 4NBMM4JNQMF -BSHF$PNQMFY 'SBNF-BZPVU "VUP-BZPVU
9*#4UPSZCPBSE *OUFSGBDF#VJMEFS .BOVBM5FTU 6*4UBDL7JFX
Ξϯνύλʔϯ
- σόΠεΛఆ͢Δ - ඪ४UIͷαΠζΛԾఆ͢Δ Ξϯνύλʔϯ
σόΠεΛఆ͢Δ
σόΠεΛఆ͢Δ !
- ݅Λ૿͍͚ͯ͠ͳ͍ - if isIPhoneX { ͱॻ͍ͨͳΒɺiPhone Xͱͦ ΕҎ֎ͷσόΠεͰඞͣ֬ೝ͠ͳ͚ΕͳΒͳ ͘ͳΔ
- ৽͍͠σόΠε͕ൃച͞ΕͨΒʁ - ܧଓՄೳͳΈͰͳ͍ σόΠεΛఆ͍͚ͯ͠ͳ͍!
ඪ४UIͷαΠζΛԾఆ͢Δ
ඪ४UIͷαΠζΛԾఆ͢Δ !
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
- ඪ४UIͷαΠζݻఆͰͳ͍ - ࣮ߦ࣌ʹมΘΔ - มΘΒͳ͍ͱࢥ͍ͬͯΔͷҙ֎ͱมΘΔ - έʔεΛཏ͢Δ͜ͱ͕ࠔ ඪ४UIͷαΠζΛԾఆ͍͚ͯ͠ͳ͍!
Safe Area (Top/Bottom Layout Guide)͔Β૬ରతʹߟ͑Δ
Safe Area (Top/Bottom Layout Guide)͔Β૬ରతʹߟ͑Δ
Safe Area (Top/Bottom Layout Guide)͔Β૬ରతʹߟ͑Δ - Safe Areaʹ͚Δ͔ͦ͏Ͱͳ͍ͷ͔ - جຊతʹ͜Ε͚ͩ
- ͜ΕΛͦΕͧΕͷϏϡʔͰஅ͢Δ
Good/Bad Practice
- AutoLayout - Storyboard ʹରॲ͢ΔͨΊͷπʔϧ
Frame LayoutΑΓ Auto Layout
- Auto Layout GOOD - Frame Layout BAD
- Auto Layout (or Alt-Auto Layout) GOOD - Frame Layout
BAD
Storyboard (Interface Builder)Λ ׆༻͢Δ
Good
None
None
None
- Interface BuilderΛ׆༻͢Δ - Auto LayoutͷΤϥʔΛڭ͑ͯ͘ΕΔ - ࣮ߦͤͣʹ͞·͟·ͳঢ়ଶΛ֬ೝͰ͖Δ - @IBDesignable/@IBInspectable͕ศར
Good Practice
Auto Layoutͷ੍Λ Storyboard/XIBͰ࡞͢Δ
Auto Layoutͷ੍Λ Storyboard/XIBͰ࡞͢Δ
ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
Q. Auto Layoutͷ੍Λ ίʔυͰॻ͘͜ͱͷԿ͕͍͠ͷ͔
A. ੍͕૬ޓʹӨڹ͢ΔͨΊ
None
None
None
None
None
None
None
None
None
None
None
None
None
4T
None
None
None
- ϝϞϦ͕Γͳ͘ͳΔ ίʔυͰॻ͘ΑΓStoryboard
એݴతʹهड़͢Δ
None
None
None
Use UIStackView
Use UIStackView
None
None
τϧπϝUIStackView - ͯ͢ͷϏϡʔΛUIStackViewʹ٧Ίͯɺ isHiddenΛΓସ͑Δ͚ͩ - Ϛʔδϯ͕ҰఆͰͳ͍߹ϚʔδϯΛ࣋ͭϏϡʔ Λ֎ଆʹ࣋ͭ
ࣅͨΑ͏ͳϏϡʔͰ߲ͷ૿ݮ͕͋Δͱ͖
ࣅͨΑ͏ͳϏϡʔͰ߲ͷ૿ݮ͕͋Δͱ͖
Paging /w UIScrollView ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
UICollection/TableView vs UIStackView ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
Animation ը૾ɾσʔλٕज़આ໌ͷͨΊͷαϯϓϧͰ͢ɻ
ΞχϝʔγϣϯʹΑΔϨΠΞτͷӨڹ - ΞχϝʔγϣϯʹΑͬͯผͷϏϡʔͷҐஔΛม͑ Δ͔Ͳ͏͔ʢྫ: ԡ͠ग़͢ʣ - ผͷϏϡʔΛԡ͠ग़ͨ͠Γ͠ͳ͍ͳΒɺ CGAffineTransform͕͑Δ
CGAffineTransformʹΑΔΞχϝʔγϣϯ
CGAffineTransformʹΑΔΞχϝʔγϣϯ
ಈతͳ༰Λ੩తʹఆٛ͢Δ - UIStackViewΛ׆༻͢Δ - τϧπϝ - ߲ͷ૿ݮ - εΫϩʔϧ/ϖʔδϯά -
CGAffineTransformʹΑΔΞχϝʔγϣϯ
- Auto LayoutίʔυͰॻ͘ΑΓStoryboard/XIB - ঢ়ଶΛݮΒ͢ - ੩తʹఆٛ͢Δ - ಈతʹ੍Λมߋ͠ͳ͍ Good
Practice
Grouping
άϧʔϐϯά͢Δͱ੍ͷ͕ؔ؆୯ʹͳΔ
άϧʔϐϯά͢Δͱ੍ͷ͕ؔ؆୯ʹͳΔ
άϧʔϐϯά͢Δͱ੍ͷ͕ؔ؆୯ʹͳΔ
άϧʔϐϯά͢Δͱ੍ͷ͕ؔ؆୯ʹͳΔ
άϧʔϐϯά͢Δͱ੍ͷ͕ؔ؆୯ʹͳΔ
άϧʔϐϯά͢Δͱ੍ͷ͕ؔ؆୯ʹͳΔ
άϧʔϐϯά͢Δͱ੍ͷ͕ؔ؆୯ʹͳΔ
- ׂ౷࣏ - ৗʹ̎ͭͷϏϡʔͱSuper Viewͷؔͱͯ͠ߟ͑ ΒΕΔ - Γ͗͢ېʢϝϞϦ͕Γͳ͘ͳΔʣ άϧʔϐϯά͢Δͱ੍ͷ͕ؔ؆୯ʹͳΔ
ύϑΥʔϚϯε͕ؾʹͳΔʁ
- ྆ํΛ༏ઌ͢Δ͜ͱͰ͖ͳ͍ - ઈରతͳਖ਼ղͳ͍ - ৗʹܭଌ͢͠ - ຊʹʹͳΔͱ͜Ζ͚ͩ - ηΦϦʔͱͯ͠ɺಡΈ͢͞Λ༏ઌ͢Δ
ύϑΥʔϚϯεͷৗʹτϨʔυΦϑ
- Best Practice!! - ςελϒϧʹ͢Δʹґଘ͕গͳ͘ͳΔɺ͕খ ͘͞ͳΔɺetc - ݸʑͷίϯϙʔωϯτ͕ਖ਼͚͠Εશମ͕ਖ਼͍͠ ͕֬ߴ͍ ςελϒϧʹ͢Δ
Folio UI Collection https://github.com/folio-sec/Folio-UI-Collection
Folio UI Collection $POUBJOFE#VUUPO 0VUMJOFE#VUUPO 5FYU#VUUPO 5BH-BCFM $POUBJOFS -BCFM 4VCNJTTJPO4UBUVT#VUUPO
https://github.com/folio-sec/Folio-UI-Collection
- ঢ়ଶΛݮΒ͢ - ੩తʹఆٛ͢Δ - ࣮ߦͤͣʹ֬ೝ͢ΔखஈΛ૿͢ - ςελϒϧΛࢦ͢ Summary
None