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
420
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
150
iOS 7をサポート対象外にして開発を健全化する
shoby
3
3.9k
Apple Watch Tips
shoby
0
4k
WWDC 2015で 発表された新機能と サービスへの活かし方
shoby
2
7.3k
Other Decks in Programming
See All in Programming
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
240
Unlock the Potential of Swift Code Generation
rockname
0
250
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
750
SEAL - Dive into the sea of search engines - Symfony Live Berlin 2025
alexanderschranz
1
140
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
3
950
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
0
700
DataStoreをテストする
mkeeda
0
290
エンジニア未経験が最短で戦力になるためのTips
gokana
0
280
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
140
The Evolution of the CRuby Build System
kateinoigakukun
0
700
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
290
Being an ethical software engineer
xgouchet
PRO
0
210
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
A designer walks into a library…
pauljervisheath
205
24k
How STYLIGHT went responsive
nonsquared
99
5.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Writing Fast Ruby
sferik
628
61k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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*Λ៉ྷʹ
͓͠·͍