Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Farewell SnapKit

79d8818c9cb52a0e297f44b9ff4aa8c2?s=47 kameike
July 26, 2018

Farewell SnapKit

ありがとう!!!!さようなら!(?)

79d8818c9cb52a0e297f44b9ff4aa8c2?s=128

kameike

July 26, 2018
Tweet

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 よさ2 ありえない組み合わせが 型によって排除されている

  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 まとめ