Farewell SnapKit

Transcript

1. Farewell SnapKit さようなら、ありがとうSnapkit! pixiv Inc. kameike 亀田 彗 2018.6.5

2. - パルシィというアプリを書いているもの です - 10月に福岡から上京 2 だれ @kameike

3. 宣伝

4. • SnapKitよりもAnchorがDXが良いと思うよという話 • 最近わりと pod SnapKitを見かけたので... • 13,000スターのスーパースター。ありがとうの気持ち、大切！ 4 今日の話の要約

5. 5 前提

6. 6 AutoLayout(viewに制約を追加するやつ) をコードで作りたい!

7. let constraints = NSLayoutConstraint( item: subview, attribute: .left, relatedBy: .equal,

   toItem: view, attribute: .left, multiplier: 1.0, constant: 0.0) 普通に作る 10

8. let constraints = NSLayoutConstraint.constraints( withVisualFormat: "H:|-15-[view]-15-|", metrics: nil, views: ["view":

   subView]) 例のアレ(VisualFormatLanguage) 10

9. 10

10. 10

11. // SnapKit subview.snp.makeConstraints { constraintMaker in constraintMaker.top.equalTo(view) constraintMaker.bottom.equalTo(view) constraintMaker.left.equalTo(view) constraintMaker.right.equalTo(view)

    } SnapKit 10

12. // Anchor NSLayoutConstraint.activate([ subview.topAnchor.constraint(equalTo: view.topAnchor), subview.bottomAnchor.constraint(equalTo: view.bottomAnchor), subview.trailingAnchor.constraint(equalTo: view.trailingAnchor), subview.leadingAnchor.constraint(equalTo:

    view.leadingAnchor) ]) Anchor(iOS9~) 10

13. 13 書き方こそ似ているけども、 Anchorの方がDXが良いぞ〜！ (あとUIKitだし...寿命も長いはず...)

14. 14 Anchorのよさ

15. // SnapKit subview.snp.makeConstraints { constraintMaker in constraintMaker.top.equalTo(_ other: ConstraintRelatableTarget) }

    // ConstraintRelatableTargetとして使える型 // Int UInt Float Double CGFloat CGSize CGPoint // UIEdgeInsets, UIView SnapKit 10

16. 16 暗黙的...

17. SnapKit 10

18. // Anchor subview.topAnchor.constraint(_ equalTo: NSLayoutAnchor<NSLayoutYAxisAnchor>) Anchor 10

19. Anchor 10

20. 20 よさ２ ありえない組み合わせが 型によって排除されている

21. 　　// SnapKit subview.top.equalTo(superView.snp.right) このようなコード 10

22. 期待される挙動 10

23. 23 実行時エラー:sob:

24. 　　// Anchor view.topAnchor.constraint(equalTo: superView.leadingAnchor) Anchorだと...! 10

25. 　　// Anchor view.topAnchor.constraint(equalTo: superView.leadingAnchor) このようなコード 10 NSLayoutXAxisAnchor

26. 26 コンパイルエラーになる:joy:

27. 　　// SnapKit subview.top.bottom.equalTo(view).offset(10).offset(20) ちなみにSnapKitはこんなコードを コンパイルできてしまう 10

28. 28 Anchor便利...!

29. 29 SnapKit->Anchorで 移行Tips

30. 30 基本的にはすんなり行くはず！

31. // SnapKit let offset = UIEdgeInsets(top: 10, left: 10, bottom:

    10, right: 10) make.edges.equalTo(view).offset(offset) Edgeがほしい！ 10

32. extension UIView { func edges(equalTo view: UIView, offset: UIEdgeInsets =

    UIEdgeInsets()) { NSLayoutConstraint.activate([ topAnchor.constraint(equalTo: view.topAnchor, constant: offset.top), bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -offset.bottom), leftAnchor.constraint(equalTo: view.leftAnchor, constant: offset.left), rightAnchor.constraint(equalTo: view.rightAnchor, constant: -offset.right) ]) } } extensionでなんとかなる！10行ぐらい！ 10

33. // SnapKit view.edges.equalTo(view).offset(UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))

    // Anchor+Extension view.edges(equalTo: view, offset: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)) なんとかなった...! 10

34. // leading, trailing extension UIView { func edges(equalTo view: UIView,

    offset: NSDirectionalEdgeInset) { NSLayoutConstraint.activate([ topAnchor.constraint(equalTo: view.topAnchor, constant: offset.top), bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -offset.bottom), leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: offset.leadingAnchor), trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -offset.trailingAnchor) ]) } } 余談 leading trailingを使いたいなら 10

35. let offset = 3 * 5 // SnapKit だと大丈夫だけど make.top.equalTo(view).offset(offset)

    // Anchor だとコンパイルエラー subview.topAnchor.constraint(equalTo: view.topAnchor, constant: offset) ConstraintXXXTarget的なものを CGFloatにする必要がある 10

36. 36 余談の余談

37. @available(iOS 6.0, *) open func addConstraint(_ constraint: NSLayoutConstraint) // This

    method will be deprecated in a future release and should be avoided. // Instead, set NSLayoutConstraint's active property to YES. 10 addConstraintは 使わない方がいい

38. let constraint = view.bottomAnchor.constraint(equalTo: bottomAnchor) constraint.isActive = true // もしくは

    NSLayoutConstraint.activate([constraint]) // でconstraintを有効に...! こういう感じで 10

39. 39 SnapKit余談

40. • 7/17にSwift4対応！（そろそろ保守されなくなってきてるって言おうとおもっていたのに） • ので、まだ慌てる時間じゃない...!? 40 まだしっかり保守されている...!

41. • 3000行の本体コード(RxCocoaの1/3ぐらいコードがある...!) • 大体全ての型にMapperを書いてDSL上では独自型だけで表現できる世界を実現してい る（その分よしなであり、上述の問題もあり ...） 41 整ったコード（整いすぎでは...?!)

42. 42 Priorityに若干のカスタマイズ public static var medium: ConstraintPriority { #if os(OSX)

    return 501.0 #else return 500.0 #endif }

43. • 時々example作ったからマージしてよ！という PRがきていた • 苦労をかんじる最適化 43 13000スターつくと何が起こるか

44. • SnapKit→Anchor • ありがとうSnapKit！さようなら！(?) 44 まとめ