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.5k
ユーザーに受け入れられ、問題を起こしづらい大規模リニューアルの進め方
shoby
60
13k
ReactiveCocoaで作る快適な登録フォーム
shoby
0
330
フリルの商品を色で検索できるようにした話
shoby
5
4.2k
Search fashion items by colors
shoby
0
160
iOS 7をサポート対象外にして開発を健全化する
shoby
3
3.9k
Apple Watch Tips
shoby
0
4k
WWDC 2015で 発表された新機能と サービスへの活かし方
shoby
2
7.4k
Other Decks in Programming
See All in Programming
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
410
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
19
3.5k
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
5つのアンチパターンから学ぶLT設計
narihara
1
110
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
180
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
Benchmark
sysong
0
270
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
200
Featured
See All Featured
Code Review Best Practice
trishagee
68
18k
Six Lessons from altMBA
skipperchong
28
3.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Why Our Code Smells
bkeepers
PRO
337
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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*Λ៉ྷʹ
͓͠·͍