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.7k
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
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
240
Enhancing Applications with Accessibility API
kishikawakatsumi
3
4.2k
Mastering SwiftSyntax
kishikawakatsumi
4
6.4k
My SwiftData Review
kishikawakatsumi
7
1.5k
Swift Expression Macros: a practical introduction
kishikawakatsumi
3
2k
Xcode Cloudの評価
kishikawakatsumi
2
1.4k
Regular expressions basics/正規表現の基本
kishikawakatsumi
7
780
家のいろいろな数値を計測する
kishikawakatsumi
4
2.3k
GitHub Actionsでテストの結果をわかりやすく表示する
kishikawakatsumi
1
1.2k
Other Decks in Programming
See All in Programming
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
110
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
Passkeys for Java Developers
ynojima
3
870
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
800
FormFlow - Build Stunning Multistep Forms
yceruto
1
180
KotlinConf 2025 現地参加の土産話
n_takehata
0
100
Java on Azure で LangGraph!
kohei3110
0
150
SODA - FACT BOOK
sodainc
1
1.1k
Benchmark
sysong
0
210
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
41
27k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
540
C++20 射影変換
faithandbrave
0
490
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.6k
Raft: Consensus for Rubyists
vanstee
140
7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Designing for Performance
lara
609
69k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How STYLIGHT went responsive
nonsquared
100
5.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Rails Girls Zürich Keynote
gr2m
94
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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