SnapKit

http://kanmoba.connpass.com/event/28416/

Transcript

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