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
770
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
580
Apple HIG 正式名称クイズ結果発表 / HIG Quiz Result
usamik26
0
140
ゆめみ大技林製作委員会の立ち上げの話 / daigirin project
usamik26
0
300
@ViewLoadingプロパティラッパの紹介と自前で実装する方法 / @ViewLoading property wrapper implementation
usamik26
0
450
これからUICollectionViewを実践活用する人のためのガイド / Guide to UICollectionView
usamik26
1
710
Xcodeとの最近の付き合い方のはなし / Approach To Xcode
usamik26
2
640
UICollectionView Compositional Layout
usamik26
0
720
Coding Swift with Visual Studio Code and Docker
usamik26
0
480
Swift Extension for Visual Studio Code
usamik26
2
970
Other Decks in Programming
See All in Programming
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Grafana Cloudとソラカメ
devoc
0
140
SwiftUI Viewの責務分離
elmetal
PRO
0
140
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Open source software: how to live long and go far
gaelvaroquaux
0
620
テストをしないQAエンジニアは何をしているか?
nealle
0
130
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
GAEログのコスト削減
mot_techtalk
0
110
DROBEの生成AI活用事例 with AWS
ippey
0
130
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
RailsConf 2023
tenderlove
29
1k
YesSQL, Process and Tooling at Scale
rocio
171
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Designing for humans not robots
tammielis
250
25k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
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