Slide 1
Slide 1 text
SnapKit
Auto Layout Library
USAMI Kosuke
Fenrir Inc.
Slide 2
Slide 2 text
View Layout for iOS & OS X
» Auto Layout Λ͏
» Auto Layout ΛΘͳ͍
» ͪͳΈʹʮAuto Layout ʯͰ͢
Slide 3
Slide 3 text
Auto Layout
» Storyboard ্Ͱઃఆ
» Source Code ্Ͱهड़
» ͪͳΈʹʮStoryboard ʯͰ͢
» ͱ͍͑ɺݻࣥͤͣʹॊೈʹߟ͍͑ͨ
Slide 4
Slide 4 text
How to code Auto Layout ?
» View Λ Storyboard Ͱͳ͘ίʔυͰ࣮͍ͨ͜͠ͱ͕͋Δ
» ͦͷͱ͖ Auto Lauout ίʔυͰ࣮͍ͨ͠
» ͦΜͳͱ͖ʹͲ͏͢Δʁ
» ɾɾɾͱ͍͏ͷ͕ࠓճͷຊͰ͢ɻ
Slide 5
Slide 5 text
Auto Layout Coding
Slide 6
Slide 6 text
How to code Constraint ?
Auto Layout ΛίʔυͰॻ͘ͱͭ·Γɾɾɾ
» Constraintʢ੍ʣΛίʔυͰॻ͘ʹʁ
ͱ͍͏͜ͱ
Slide 7
Slide 7 text
iOS & OS X SDK
» NSLayoutConstraint class
» Visual Format Language
» NSLayoutAnchor class
Slide 8
Slide 8 text
NSLayoutConstraint
NSLayoutConstraint(
item: myView, attribute: .Left,
relatedBy: .Equal,
toItem: view, attribute: . Left,
multiplier: 1.0, constant: 0.0).active = true
» ͬͱ Basic ͳํ๏
» ͻͱͭͷ؆୯ͳ੍ͷͨΊʹ͜Ε͚ͩॻ͔ͳ͍ͱ͍͚ͳ͍
Slide 9
Slide 9 text
Visual Format Language
let constraints = NSLayoutConstraint.constraintsWithVisualFormat(
"|-[myView]-|",
options:.AlignAllTop , metrics: nil,
views: ["myView" : myView])
NSLayoutConstraint.activateConstraints(constraints)
» "|-[myView]-|" : ΤϥʔϩάͰΑ͘ݟ͔͚ΔΞϨ
» ੍ͷจ๏ΛίϯύΠϥ͕νΣοΫͯ͘͠Εͳ͍
Slide 10
Slide 10 text
NSLayoutAnchor
myView.leftAnchor
.constraintEqualToAnchor(view.layoutGuides.leftAnchor)
.active = true
» iOS 9 and later / OS X 10.11 and later
» ͕݅߹͏ͳΒɺΘΓͱΞϦͩͱࢥ͏ͷͰݕ౼͍ͨ͠
Slide 11
Slide 11 text
ͬͱ͍͍खஈ͕ͳ͍͔ʁ
» ඪ४ͷํ๏Ͱॻ͖ʹ͍͘ͷ͕ݱঢ়
» Auto Layout ΛίʔυͰॻ͘ͳɺͱݴΘΕͯෆࢥٞͰͳ͍
Slide 12
Slide 12 text
SnapKit
Slide 13
Slide 13 text
SnapKit
» http://snapkit.io/
» Auto Layout Library
» For Swift 2
» ެࣜͰ Auto Layout DSL ͱݴ͍ͬͯΔ͕ɺSwift ͷจ๏ͦͷͷ
Slide 14
Slide 14 text
ิ : Masonry
» Ҏલ Masonry ͱ͍͏ Objective-C ϥΠϒϥϦͩͬͨ
» SnapKit = Masonry ͷ Swift ൛
» Masonry ࣌ Objective-C ͬΆ͘ͳͯ͘ DSL ײ͕ڧ͔ͬͨ
Slide 15
Slide 15 text
SnapKit
myView.snp_makeConstraints { (make) in
make.left.equalTo(view)
}
» NSLayoutAnchor ʹ͍͚ۙͲɺΑΓγϯϓϧ
» ඇ Auto Layout Ͱ frame Λૢ࡞͢Δײ֮ʹҊ֎͍ۙ
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
More simplify
myView.snp_makeConstraints { (make) in
make.edges.equalTo(view).inset(UIEdgeInsetsMake(20, 20, 20, 20))
}
» edges / size / center
Slide 18
Slide 18 text
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)
}
Slide 19
Slide 19 text
Exapmle 3 : References
var heightConstraint: Constraint!
subview.snp_makeConstraints { (make) in
heightConstraint = make.height.equalTo(0).constraint
}
heightConstraint.updateOffset(60)
Slide 20
Slide 20 text
❤ SnapKit
» Swift Ͱࣗવʹॻ͚Δ
» Auto Layout ͷ੍ΛίʔυͰॻ͘ͷ͕ۤʹͳΒͳ͍
» ʮͲ͏ॻ͔͘ʯͰͳ͘ʮͲΜͳ੍ΛΉ͔ʯͱ͍͏ϩδοΫʹूத
Ͱ͖Δ
Slide 21
Slide 21 text
❤ SnapKit