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
SnapKit
Search
USAMI Kosuke
April 26, 2016
Programming
0
750
SnapKit
http://kanmoba.connpass.com/event/28416/
USAMI Kosuke
April 26, 2016
Tweet
Share
More Decks by USAMI Kosuke
See All by USAMI Kosuke
Onsager代数とその周辺 / Onsager algebra tsudoi
usamik26
0
470
Apple HIG 正式名称クイズ結果発表 / HIG Quiz Result
usamik26
0
80
ゆめみ大技林製作委員会の立ち上げの話 / daigirin project
usamik26
0
260
@ViewLoadingプロパティラッパの紹介と自前で実装する方法 / @ViewLoading property wrapper implementation
usamik26
0
400
これからUICollectionViewを実践活用する人のためのガイド / Guide to UICollectionView
usamik26
1
650
Xcodeとの最近の付き合い方のはなし / Approach To Xcode
usamik26
2
560
UICollectionView Compositional Layout
usamik26
0
610
Coding Swift with Visual Studio Code and Docker
usamik26
0
400
Swift Extension for Visual Studio Code
usamik26
2
810
Other Decks in Programming
See All in Programming
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
CSC307 Lecture 10
javiergs
PRO
0
310
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Temporalを取り巻く仕様を整理する
sajikix
0
120
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
CSC307 Lecture 13
javiergs
PRO
0
150
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
307
41k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
In The Pink: A Labor of Love
frogandcode
139
22k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
4 Signs Your Business is Dying
shpigford
178
21k
BBQ
matthewcrist
82
9k
Infographics Made Easy
chrislema
238
18k
Agile that works and the tools we love
rasmusluckow
325
20k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Designing with Data
zakiwarfel
96
5k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Transcript
SnapKit Auto Layout Library USAMI Kosuke Fenrir Inc.
View Layout for iOS & OS X » Auto Layout
Λ͏ » Auto Layout ΛΘͳ͍ » ͪͳΈʹʮAuto Layout ʯͰ͢
Auto Layout » Storyboard ্Ͱઃఆ » Source Code ্Ͱهड़ »
ͪͳΈʹʮStoryboard ʯͰ͢ » ͱ͍͑ɺݻࣥͤͣʹॊೈʹߟ͍͑ͨ
How to code Auto Layout ? » View Λ Storyboard
Ͱͳ͘ίʔυͰ࣮͍ͨ͜͠ͱ͕͋Δ » ͦͷͱ͖ Auto Lauout ίʔυͰ࣮͍ͨ͠ » ͦΜͳͱ͖ʹͲ͏͢Δʁ » ɾɾɾͱ͍͏ͷ͕ࠓճͷຊͰ͢ɻ
Auto Layout Coding
How to code Constraint ? Auto Layout ΛίʔυͰॻ͘ͱͭ·Γɾɾɾ » Constraintʢ੍ʣΛίʔυͰॻ͘ʹʁ
ͱ͍͏͜ͱ
iOS & OS X SDK » NSLayoutConstraint class » Visual
Format Language » NSLayoutAnchor class
NSLayoutConstraint NSLayoutConstraint( item: myView, attribute: .Left, relatedBy: .Equal, toItem: view,
attribute: . Left, multiplier: 1.0, constant: 0.0).active = true » ͬͱ Basic ͳํ๏ » ͻͱͭͷ؆୯ͳ੍ͷͨΊʹ͜Ε͚ͩॻ͔ͳ͍ͱ͍͚ͳ͍
Visual Format Language let constraints = NSLayoutConstraint.constraintsWithVisualFormat( "|-[myView]-|", options:.AlignAllTop ,
metrics: nil, views: ["myView" : myView]) NSLayoutConstraint.activateConstraints(constraints) » "|-[myView]-|" : ΤϥʔϩάͰΑ͘ݟ͔͚ΔΞϨ » ੍ͷจ๏ΛίϯύΠϥ͕νΣοΫͯ͘͠Εͳ͍
NSLayoutAnchor myView.leftAnchor .constraintEqualToAnchor(view.layoutGuides.leftAnchor) .active = true » iOS 9 and
later / OS X 10.11 and later » ͕݅߹͏ͳΒɺΘΓͱΞϦͩͱࢥ͏ͷͰݕ౼͍ͨ͠
ͬͱ͍͍खஈ͕ͳ͍͔ʁ » ඪ४ͷํ๏Ͱॻ͖ʹ͍͘ͷ͕ݱঢ় » Auto Layout ΛίʔυͰॻ͘ͳɺͱݴΘΕͯෆࢥٞͰͳ͍
SnapKit
SnapKit » http://snapkit.io/ » Auto Layout Library » For Swift
2 » ެࣜͰ Auto Layout DSL ͱݴ͍ͬͯΔ͕ɺSwift ͷจ๏ͦͷͷ
ิ : Masonry » Ҏલ Masonry ͱ͍͏ Objective-C ϥΠϒϥϦͩͬͨ »
SnapKit = Masonry ͷ Swift ൛ » Masonry ࣌ Objective-C ͬΆ͘ͳͯ͘ DSL ײ͕ڧ͔ͬͨ
SnapKit myView.snp_makeConstraints { (make) in make.left.equalTo(view) } » NSLayoutAnchor ʹ͍͚ۙͲɺΑΓγϯϓϧ
» ඇ Auto Layout Ͱ frame Λૢ࡞͢Δײ֮ʹҊ֎͍ۙ
Exapmle 1 : Basics myView.snp_makeConstraints { (make) in make.top.equalTo(view).offset(20) make.left.equalTo(view).offset(20)
make.bottom.equalTo(view).offset(-20) make.right.equalTo(view).offset(-20) } » top / left / bottom / right / width / height / centerX / centerY
More simplify myView.snp_makeConstraints { (make) in make.edges.equalTo(view).inset(UIEdgeInsetsMake(20, 20, 20, 20))
} » edges / size / center
Exapmle 2 : ViewAttribute subview1.snp_makeConstraints { (make) in make.top.equalTo(snp_topLayoutGuideBottom) make.left.right.equalTo(view)
make.height.equalTo(40) } subview2.snp_makeConstraints { (make) in make.top.equalTo(subview1.snp_bottom) make.left.right.equalTo(view) make.bottom.equalTo(snp_bottomLayoutGuideTop) }
Exapmle 3 : References var heightConstraint: Constraint! subview.snp_makeConstraints { (make)
in heightConstraint = make.height.equalTo(0).constraint } heightConstraint.updateOffset(60)
❤ SnapKit » Swift Ͱࣗવʹॻ͚Δ » Auto Layout ͷ੍ΛίʔυͰॻ͘ͷ͕ۤʹͳΒͳ͍ »
ʮͲ͏ॻ͔͘ʯͰͳ͘ʮͲΜͳ੍ΛΉ͔ʯͱ͍͏ϩδοΫʹूத Ͱ͖Δ
❤ SnapKit