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
StoryBoard+AutoLayout Bad Knowhow
Search
shoby
April 22, 2014
Programming
14
3.8k
StoryBoard+AutoLayout Bad Knowhow
iphone_dev_jp 東京 feat. Ben Zottoの発表資料です
shoby
April 22, 2014
Tweet
Share
More Decks by shoby
See All by shoby
フリルのCMを支える分析 (メディアバイイング編)
shoby
0
440
FirebaseとBigQueryによるアプリのKPI分析(CMの効果検証編)
shoby
2
2.6k
ユーザーに受け入れられ、問題を起こしづらい大規模リニューアルの進め方
shoby
60
13k
ReactiveCocoaで作る快適な登録フォーム
shoby
0
340
フリルの商品を色で検索できるようにした話
shoby
5
4.2k
Search fashion items by colors
shoby
0
160
iOS 7をサポート対象外にして開発を健全化する
shoby
3
4k
Apple Watch Tips
shoby
0
4k
WWDC 2015で 発表された新機能と サービスへの活かし方
shoby
2
7.4k
Other Decks in Programming
See All in Programming
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
530
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
NPOでのDevinの活用
codeforeveryone
0
910
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Model Pollution
hschwentner
1
160
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
910
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
150
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
190
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
600
AIともっと楽するE2Eテスト
myohei
9
3k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
630
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
710
The Language of Interfaces
destraynor
158
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Speed Design
sergeychernyshev
32
1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Practical Orchestrator
shlominoach
189
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing Experiences People Love
moore
142
24k
Making Projects Easy
brettharned
116
6.3k
Faster Mobile Websites
deanohume
308
31k
Transcript
4UPSZ#PBSE ʴ"VUP-BZPVU όουϊϋ @shobyshoby
ࣗݾհ pixivͰΞϓϦͭͬͯ͘·͢
ຊ
Έͳ͞Μ ίʔυ ៉ྷʹอͬͯ·͔͢ʁ
ʮʔ͍ʂ ɹςετॻ͍ͯΔ͠ ɹϦϑΝΫλϦϯά ɹͯ͠·ʔ͢ʂʯ
StoryBoard…ʁ
※࣮ࡏͨ͠StoryBoard
Ͳ͏ͯ͜͠͏ͳͬͨ…
ࣄͷܦҢ
pixivͷΞϓϦͰ StoryBoardΛ ͍͕ͬͯͨഁͨ͠
UI͕ݪҼͷ ɹΫϥογϡ͕සൃ Ұཡੑ͕ѱԽ ɹભҠͷѲ͕ࠔʹ GitͰConflict͠·͘Γ
ݪҼ
UIʹؔ͢Δ ϝϯςφϯεҙࣝͷ͞ iPhoneͱiPadͰͷ UI͍ճ͠ ରԠόʔδϣϯiOS 5ʙ
StoryBoardͭΒ͍… ! ͔ͱ͍ͬͯ ॻ͖͢ͷͭΒ͍…
;ͱݟͨυΩϡϝϯτ https://developer.apple.com/jp/devcenter/ios/library/ documentation/AutolayoutPG.pdf
Auto LayoutΛಋೖ͢Εɺը໘ͷେ ͖͖͞ɺ ҬઃఆʢݴޠͳͲʣͷҧ͍ʹԠͯ͡ ಈతʹมԽ͢Δɺ൚༻తͳը໘ϨΠΞ τΛ࡞Γग़͢͜ͱ͕Ͱ͖·͢ɻ
͜Εʂ
Auto Layout͓͏ ͍ͭͰʹ ϦϑΝΫλϦϯά͠Α͏
త
StoryBoardΛ ៉ྷʹอͪͭͭ Auto LayoutΛ ͏·͍͜ͱ͍͍ͨʂ
4UPSZ#PBSE ʴ"VUP-BZPVU όουϊϋ
֓ཁ
αϙʔτ04ΛΔ ػೳΛΔ 4UPSZ#PBSEΛׂ͢Δ 7JFX$POUSPMMFSΛׂ͢Δ ίʔυͰԿͱ͔͢Δ
αϙʔτ04ΛΔ
iOS 6ҎԼΛ ΓࣺͯΔ https://developer.apple.com/support/appstore/
ػೳΛΔ
ػೳΛΔ͜ͱͰ ը໘ߏΛ γϯϓϧʹอͭ
ػೳ͕ݮΔͱ…
ViewController͕ݮΔ Segue͕ݮΔ ಠࣗContainer͕ݮΔ ΧελϜView͕ݮΔ
Happy !
ͱ͍͑… ϦϦʔεࡁΈͷΞϓϦͰ ػೳΛΔͷࠔ
σʔλΛͬͯ આಘ͠Α͏
4UPSZ#PBSEΛ ׂ͢Δ
ViewControllerͷ ґଘؔΛݮΒ͢ Git࡞ۀͰͷ ConflictΛ͙
ׂํ
TabBarͷதΛΓग़͢ ModalΛΓग़͢ ଟͷSegue͕ுΒΕͨ ViewControllerΛΓग़͢
7JFX$POUSPMMFSΛ ׂ͢Δ
Viewͷ֊ߏΛ γϯϓϧʹ͢Δ AutoLayoutͷ ConstraintΛ ཧղՄೳͳϨϕϧʹ͢Δ
Auto Layout ਓྨʹૣ͗͢Δ ! ʢଞਓͷConstraint ɹཧղͰ͖ͳ͍ʣ
ཧղͰ͖ͳ͍Ϩϕϧ ෳͷࢠViewಉ͕࢜ґଘؔΛ࣋ͬͯΔ
ཧղͰ͖ͳ͍Ϩϕϧ ֊ߏ͕ෳࡶ
ཧղͰ͖ΔϨϕϧ 2ͭͷViewಉ࢜ͷ੍…͙Β͍
Γग़ͤΔ෦Λ ผͷViewControllerʹ childViewControllerʹ͢Δ
Γग़ͤͦ͏ͳॴ
Place Holder PlaceHolderͱͳΔViewΛஔ͍ͯ addSubView + addChildViewController
2ͭͷViewಉ࢜ͷ ੍ʹͰ͖ͨʂ
ίʔυͰԿͱ͔͢Δ
Ͳ͏ͯ͠ ͍͠෦͚ͩ ίʔυͰԿͱ͔͢Δ
ConstraintʹIBOutletΛ ܨ͍ͯมߋ͢Δ ConstraintΛ ίʔυͰॻ͘
ConstraintΛ ίʔυͰॻ͘߹ MasonryΛ͏ͱศར https://github.com/cloudkite/Masonry
Masonryͷ͍ํ // Ճ [view makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view); }]; !
// ߋ৽ [view updateConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view); }];
݁Ռ
Before
After
Happy !
݁ہ"VUP-BZPVU ͬͯͲ͏ͳͷʁ
ྑ͍ॴ
UIʹΑΔ Ϋϥογϡόά͕ ݮͬͨ
σβΠφʔ͞Μ͕ Pull RequestΛ ૹͬͯ͘ΕΔΑ͏ʹͳͬͨ
merge࣌ ඞ࣮ͣߦͯ͠ ֬ೝ͢ΔΑ͏ʹͳͬͨ ʢGitHub্ͩͱ͔Βͳ͍ͷͰ…ʣ
ѱ͍ॴ
৬ਓٕΛΒΕΔͱ ·ͬͨ͘ཧղͰ͖ͳ͍
ϨΠΞτ่Εͷ ݪҼ͕௫ΈͮΒ͘ͳͬͨ
ܧଓͯ͠ ϝϯςφϯεͰ͖Δ ؾ͕͠ͳ͍…
"VUP-BZPVU ͏͖ʁ
https://twitter.com/k_katsumi/status/455340572820000768
ۜͷؙͰͳ͍ ศརʹ͑ศར
·ͱΊ
ػೳΛͬͯγϯϓϧʹ͢Δ 4UPSZ#PBSEΛׂ͢Δ 7JFX$POUSPMMFSΛׂ͢Δ ࠷ޙʹίʔυͰԿͱ͔͢Δ ศརʹͬͯɺ6*Λ៉ྷʹ
͓͠·͍