autolayout DSL library

1. SnapKitについて
オープンソース勉強会
山下大輔

2. • 自己紹介 https://github.com/daisuke0131
• ビズリーチのiOSエンジニア
• https://github.com/daisuke0131/
ViewMonitor を作っています。星ください。PR
下さい。

3. use_frameworks!
pod 'Bond'
pod 'SwiftTask'
pod 'Alamofire'
pod 'SwiftyJSON'
pod 'SwiftCop'
pod 'Async'
pod 'SDWebImage'
ライブラリ的には

4. What s ViewMonitor

5. • Masonry(objective-C)のswift版ライブラリ
• 独自記述で簡単に書けそう->autoLayoutはコード
から書こうと思うとかなり辛い
• シンプルに書けそうなのでちょっとしたときに制
約を追加したりに便利そう
SnapKitについて
https://github.com/SnapKit/SnapKit

6. • iOS6から導入されたviewの配置を決める仕組み
• view同士の位置を制約を使って設定
• IB上からポチポチするのがデフォ。
• 画面サイズが変わったときに動的に配置が調整され
る
• viewの書き換え時に動的にviewの配置換えするのは
つらい。-> iOS9から導入されたUIStackViewがこの
辺の課題解決をしてくれそう。
Autolayoutについて

7. 上右左のself.viewに対して
距離0を設定
高さ50を設定

8. 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),
])

9. 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)
}

10. IBに配置したviewの制約をいじる
IBに配置して コードから
autolayout設定
制約通りに配置
例えば以下の様なことがしたい

11. 試すと
エラーめっちゃでる。。。

12. • IBにおいたviewにはいい感じに勝手に
autolayoutが設定されるっぽい。
• IB上からuse autolayoutをoffにしてやるとうま
くいく。
• 配置からコードでやる場合は問題ないです。
http://stackoverflow.com/questions/30534850/
prevent-interface-builder-from-auto-creating-
constraints
参考）
なんで？

13. UIStackViewを使うと便利になるよ
実行時に要素１
を消す
要素１
を詰めて表示

14. まとめ
• SnapKitはすごく書きやすい
• コードで完結させるときには使いやすい
• IBとかと中途半端に連携させるとつらいかも。（制
約をOutletとかで接続するとかの方がよさそう）
• ちょっとしたところで使うのはおすすめできない。
• ちょっとしたところはUIStackViewが解決してくれ
るとおもうので期待。

15. Autolayout制約でのエラー

16. Autolayoutの制約エラー
->発生してもなんとなくいい感じに表示はされます。

17. ここでシンボリックブレイクポイントを仕込む

18. expr -l objc++ -O -- [[UIWindow keyWindow] _autolayoutTrace]

19. Autolayoutの制約矛盾が発生した段階でブレイク

20. Viewの階層表示

21. 別プロジェクトへの反映方法

22. http://www.slideshare.net/daisukeyamashita180/21-
potatotips-yamashita
バグのことは嫌いになってもXcodeのことは嫌いにならないでく
ださい。
http://qiita.com/daisuke0131/items/
82e85e75e766cf08745f
Xcodeに関すること