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
450
FirebaseとBigQueryによるアプリのKPI分析(CMの効果検証編)
shoby
2
2.6k
ユーザーに受け入れられ、問題を起こしづらい大規模リニューアルの進め方
shoby
60
13k
ReactiveCocoaで作る快適な登録フォーム
shoby
0
340
フリルの商品を色で検索できるようにした話
shoby
5
4.3k
Search fashion items by colors
shoby
0
170
iOS 7をサポート対象外にして開発を健全化する
shoby
3
4k
Apple Watch Tips
shoby
0
4.1k
WWDC 2015で 発表された新機能と サービスへの活かし方
shoby
2
7.4k
Other Decks in Programming
See All in Programming
Pythonに漸進的に型をつける
nealle
1
110
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.4k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
520
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
260
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.7k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
12k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
Developer Joy - The New Paradigm
hollycummins
1
340
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.1k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Why Our Code Smells
bkeepers
PRO
340
57k
Code Reviewing Like a Champion
maltzj
526
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Music & Morning Musume
bryan
46
6.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
GitHub's CSS Performance
jonrohan
1032
470k
GraphQLとの向き合い方2022年版
quramy
49
14k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
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*Λ៉ྷʹ
͓͠·͍