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.8k
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
250
Enhancing Applications with Accessibility API
kishikawakatsumi
3
4.4k
Mastering SwiftSyntax
kishikawakatsumi
4
6.6k
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
790
家のいろいろな数値を計測する
kishikawakatsumi
4
2.3k
GitHub Actionsでテストの結果をわかりやすく表示する
kishikawakatsumi
1
1.2k
Other Decks in Programming
See All in Programming
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.4k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
780
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
260
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
220
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
5
890
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
140
iOS開発スターターキットの作り方
akidon0000
0
230
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
660
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
450
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Become a Pro
speakerdeck
PRO
29
5.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Gamification - CAS2011
davidbonilla
81
5.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Facilitating Awesome Meetings
lara
54
6.5k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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