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.6k
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
210
Enhancing Applications with Accessibility API
kishikawakatsumi
3
3.7k
Mastering SwiftSyntax
kishikawakatsumi
4
5.8k
My SwiftData Review
kishikawakatsumi
7
1.4k
Swift Expression Macros: a practical introduction
kishikawakatsumi
3
1.9k
Xcode Cloudの評価
kishikawakatsumi
2
1.3k
Regular expressions basics/正規表現の基本
kishikawakatsumi
7
750
家のいろいろな数値を計測する
kishikawakatsumi
4
2.2k
GitHub Actionsでテストの結果をわかりやすく表示する
kishikawakatsumi
1
1.1k
Other Decks in Programming
See All in Programming
AI Agent系IDEを使って 開発生産性を爆アゲする
ouchi2501
1
100
CI改善もDatadogとともに
taumu
0
180
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
240
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
890
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
Domain-Driven Transformation
hschwentner
2
1.9k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
470
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.5k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
250
AIプログラミング雑キャッチアップ
yuheinakasaka
7
1k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Music & Morning Musume
bryan
46
6.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Why Our Code Smells
bkeepers
PRO
336
57k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
For a Future-Friendly Web
brad_frost
176
9.5k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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