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

SnapKit

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

 SnapKit

Avatar for USAMI Kosuke

USAMI Kosuke

April 26, 2016
Tweet

More Decks by USAMI Kosuke

Other Decks in Programming

Transcript

  1. View Layout for iOS & OS X » Auto Layout

    Λ࢖͏ » Auto Layout Λ࢖Θͳ͍ » ͪͳΈʹ๻͸ʮAuto Layout ೿ʯͰ͢
  2. Auto Layout » Storyboard ্Ͱઃఆ » Source Code ্Ͱهड़ »

    ͪͳΈʹ๻͸ʮStoryboard ೿ʯͰ͢ » ͱ͸͍͑ɺݻࣥͤͣʹॊೈʹߟ͍͑ͨ
  3. How to code Auto Layout ? » View Λ Storyboard

    Ͱͳ͘ίʔυͰ࣮૷͍ͨ͜͠ͱ͕͋Δ » ͦͷͱ͖ Auto Lauout ΋ίʔυͰ࣮૷͍ͨ͠ » ͦΜͳͱ͖ʹͲ͏͢Δʁ » ɾɾɾͱ͍͏ͷ͕ࠓճͷຊ୊Ͱ͢ɻ
  4. iOS & OS X SDK » NSLayoutConstraint class » Visual

    Format Language » NSLayoutAnchor class
  5. NSLayoutConstraint NSLayoutConstraint( item: myView, attribute: .Left, relatedBy: .Equal, toItem: view,

    attribute: . Left, multiplier: 1.0, constant: 0.0).active = true » ΋ͬͱ΋ Basic ͳํ๏ » ͻͱͭͷ؆୯ͳ੍໿ͷͨΊʹ͜Ε͚ͩॻ͔ͳ͍ͱ͍͚ͳ͍
  6. Visual Format Language let constraints = NSLayoutConstraint.constraintsWithVisualFormat( "|-[myView]-|", options:.AlignAllTop ,

    metrics: nil, views: ["myView" : myView]) NSLayoutConstraint.activateConstraints(constraints) » "|-[myView]-|" : ΤϥʔϩάͰΑ͘ݟ͔͚ΔΞϨ » ੍໿ͷจ๏ΛίϯύΠϥ͕νΣοΫͯ͘͠Εͳ͍
  7. NSLayoutAnchor myView.leftAnchor .constraintEqualToAnchor(view.layoutGuides.leftAnchor) .active = true » iOS 9 and

    later / OS X 10.11 and later » ৚͕݅߹͏ͳΒɺΘΓͱΞϦͩͱࢥ͏ͷͰݕ౼͍ͨ͠
  8. SnapKit » http://snapkit.io/ » Auto Layout Library » For Swift

    2 » ެࣜͰ͸ Auto Layout DSL ͱݴ͍ͬͯΔ͕ɺSwift ͷจ๏ͦͷ΋ͷ
  9. ิ଍ : Masonry » Ҏલ͸ Masonry ͱ͍͏ Objective-C ϥΠϒϥϦͩͬͨ »

    SnapKit = Masonry ͷ Swift ൛ » Masonry ࣌୅͸ Objective-C ͬΆ͘ͳͯ͘ DSL ײ͕ڧ͔ͬͨ
  10. 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
  11. 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) }
  12. Exapmle 3 : References var heightConstraint: Constraint! subview.snp_makeConstraints { (make)

    in heightConstraint = make.height.equalTo(0).constraint } heightConstraint.updateOffset(60)
  13. ❤ SnapKit » Swift Ͱࣗવʹॻ͚Δ » Auto Layout ͷ੍໿ΛίʔυͰॻ͘ͷ͕ۤʹͳΒͳ͍ »

    ʮͲ͏ॻ͔͘ʯͰͳ͘ʮͲΜͳ੍໿Λ૊Ή͔ʯͱ͍͏ϩδοΫʹूத Ͱ͖Δ