Download - About SnapKit - Open source lab -
![Page 1: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/1.jpg)
SnapKitについてオープンソース勉強会
山下大輔
![Page 2: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/2.jpg)
• 自己紹介 https://github.com/daisuke0131
• ビズリーチのiOSエンジニア
• https://github.com/daisuke0131/ViewMonitor を作っています。星ください。PR下さい。
![Page 3: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/3.jpg)
use_frameworks!
pod 'Bond' pod 'SwiftTask' pod 'Alamofire' pod 'SwiftyJSON' pod 'SwiftCop' pod 'Async'
pod 'SDWebImage'
ライブラリ的には
![Page 4: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/4.jpg)
What’s ViewMonitor
![Page 5: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/5.jpg)
• Masonry(objective-C)のswift版ライブラリ
• 独自記述で簡単に書けそう->autoLayoutはコードから書こうと思うとかなり辛い
• シンプルに書けそうなのでちょっとしたときに制約を追加したりに便利そう
SnapKitについて
https://github.com/SnapKit/SnapKit
![Page 6: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/6.jpg)
• iOS6から導入されたviewの配置を決める仕組み
• view同士の位置を制約を使って設定
• IB上からポチポチするのがデフォ。
• 画面サイズが変わったときに動的に配置が調整される
• viewの書き換え時に動的にviewの配置換えするのはつらい。-> iOS9から導入されたUIStackViewがこの辺の課題解決をしてくれそう。
Autolayoutについて
![Page 7: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/7.jpg)
上右左のself.viewに対して 距離0を設定 高さ50を設定
![Page 8: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/8.jpg)
autolayoutで書くとlet redView = UIView() redView.backgroundColor = UIColor.redColor() self.view.addSubview(redView) view.translatesAutoresizingMaskIntoConstraints = false redView.translatesAutoresizingMaskIntoConstraints = false
redView.addConstraint( NSLayoutConstraint(item: redView, attribute: .Height, relatedBy: .Equal,toItem: nil, attribute: .Height, multiplier: 1.0, constant: 50.0)
)
self.view.addConstraints([ NSLayoutConstraint(item: redView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1.0, constant: 0.0), NSLayoutConstraint(item: redView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1.0, constant: 0.0), NSLayoutConstraint(item: redView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1.0, constant: 0.0), ])
![Page 9: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/9.jpg)
SnapKitで書くと
let redView = UIView() redView.backgroundColor = UIColor.redColor() self.view.addSubview(redView)
redView.snp_makeConstraints { (make) -> Void in make.height.equalTo(50) make.top.equalTo(view).offset(0) make.left.equalTo(view).offset(0) make.right.equalTo(view).offset(0)
}
![Page 10: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/10.jpg)
IBに配置したviewの制約をいじる
IBに配置して コードから autolayout設定
制約通りに配置
例えば以下の様なことがしたい
![Page 11: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/11.jpg)
試すと
エラーめっちゃでる。。。
![Page 12: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/12.jpg)
• IBにおいたviewにはいい感じに勝手にautolayoutが設定されるっぽい。
• IB上からuse autolayoutをoffにしてやるとうまくいく。
• 配置からコードでやる場合は問題ないです。
http://stackoverflow.com/questions/30534850/prevent-interface-builder-from-auto-creating-constraints
参考)
なんで?
![Page 13: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/13.jpg)
UIStackViewを使うと便利になるよ
実行時に要素1 を消す
要素1 を詰めて表示
![Page 14: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/14.jpg)
まとめ
• SnapKitはすごく書きやすい
• コードで完結させるときには使いやすい
• IBとかと中途半端に連携させるとつらいかも。(制約をOutletとかで接続するとかの方がよさそう)
• ちょっとしたところで使うのはおすすめできない。
• ちょっとしたところはUIStackViewが解決してくれるとおもうので期待。
![Page 15: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/15.jpg)
Autolayout制約でのエラー
![Page 16: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/16.jpg)
Autolayoutの制約エラー ->発生してもなんとなくいい感じに表示はされます。
![Page 17: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/17.jpg)
ここでシンボリックブレイクポイントを仕込む
![Page 18: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/18.jpg)
expr -l objc++ -O -- [[UIWindow keyWindow] _autolayoutTrace]
![Page 19: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/19.jpg)
Autolayoutの制約矛盾が発生した段階でブレイク
![Page 20: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/20.jpg)
Viewの階層表示
![Page 21: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/21.jpg)
別プロジェクトへの反映方法
![Page 22: About SnapKit - Open source lab -](https://reader034.vdocuments.pub/reader034/viewer/2022050902/589ccd101a28ab43388b4a55/html5/thumbnails/22.jpg)
http://www.slideshare.net/daisukeyamashita180/21-potatotips-yamashita
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
http://qiita.com/daisuke0131/items/82e85e75e766cf08745f
Xcodeに関すること