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

Layout System Improvements in iOS 9

Layout System Improvements in iOS 9

Presented at potato tips #18

58b40ae3b0db6cf0202a3802e9dd70fe?s=128

cockscomb

June 16, 2015
Tweet

Transcript

  1. J04 ଁ ీ ࠺  ࢮ ࡦ ࡤ ࡨ ࢊ

    ࡹ ࡻ ࢈ ࢢ
  2. cockscomb

  3. None
  4. Layout System Improvements in iOS 9

  5. New Classes • NSLayoutAnchor • UILayoutGuide • UIStackView

  6. NSLayoutAnchor • UIViewͷ৽͍͠ϓϩύςΟ • NSLayoutConstraintΛ࡞੒Ͱ͖Δ • fluentͳΠϯλʔϑΣʔε

  7. NSLayoutAnchor var leadingAnchor: NSLayoutXAxisAnchor var leftAnchor: NSLayoutXAxisAnchor var centerXAnchor: NSLayoutXAxisAnchor

    var rightAnchor: NSLayoutXAxisAnchor var trailingAnchor: NSLayoutXAxisAnchor var topAnchor: NSLayoutYAxisAnchor var centerYAnchor: NSLayoutYAxisAnchor var bottomAnchor: NSLayoutYAxisAnchor var firstBaselineAnchor: NSLayoutYAxisAnchor var lastBaselineAnchor: NSLayoutYAxisAnchor var widthAnchor: NSLayoutDimension var heightAnchor: NSLayoutDimension
  8. topAnchor │ ▼ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ▲ ┃ ┃ │ ┃

    leadingAnchor ┃heightAnchor ┃ trailingAnchor ──▶┃ │ ┃◀── leftAnchor ┃◀────┼──────widthAnchor────▶┃ rightAnchor ┃ │ ┃ ┃ ▼ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ▲ │ bottomAnchor
  9. let imageView = UIImageView() let label = UILabel() NSLayoutConstraint.activateConstraints([ imageView.leadingAnchor

    .constraintEqualToAnchor(label.leadingAnchor), imageView.bottomAnchor .constraintEqualToAnchor(label.topAnchor, constant: 8.0), ]) │╔══════════════════╗ ║ ║ │║ UIImageView ║ ║ ║ │╚══════════════════╝ — │ │8 — │┌─────────────┐ │ UILabel │ │└─────────────┘
  10. UILayoutGuide • Auto Layout༻ʹۣܗΛදݱ͢Δ • μϛʔͷUIViewΛஔ͖׵͑Δ • UIViewΑΓܰྔ

  11. UILayoutGuide var leadingAnchor: NSLayoutXAxisAnchor var leftAnchor: NSLayoutXAxisAnchor var centerXAnchor: NSLayoutXAxisAnchor

    var rightAnchor: NSLayoutXAxisAnchor var trailingAnchor: NSLayoutXAxisAnchor var topAnchor: NSLayoutYAxisAnchor var centerYAnchor: NSLayoutYAxisAnchor var bottomAnchor: NSLayoutYAxisAnchor var widthAnchor: NSLayoutDimension var heightAnchor: NSLayoutDimension
  12. let leftLabel = UILabel() let rightLabel = UILabel() let spacer

    = UILayoutGuide() view.addLayoutGuide(spacer) NSLayoutConstraint.activateConstraints([ leftLabel.trailingAnchor .constraintEqualToAnchor(spacer.leadingAnchor), rightLabel.leadingAnchor .constraintEqualToAnchor(spacer.trailingAnchor), leftLabel.widthAnchor .constraintEqualToAnchor(spacer.widthAnchor), leftLabel.widthAnchor .constraintEqualToAnchor(rightLabel.widthAnchor), ]) ┏━━━━━━━━━━━━━┳─────────────┳━━━━━━━━━━━━━┓ ┃ UILabel ┃ Guide ┃ UILabel ┃ ┗━━━━━━━━━━━━━┻─────────────┻━━━━━━━━━━━━━┛ | ─ ─ ─ ─ ─ ─ | ─ ─ ─ ─ ─ ─ | ─ ─ ─ ─ ─ ─ |
  13. UIStackView • ॎԣʹsubviewΛฒ΂Δίϯςφ • ಺෦ͰAuto LayoutΛ࢖͏ • subviewͷ૿ݮΛ͏·͘ϋϯυϦϯάͯ͘͠ΕΔ

  14. UIStackView var axis: UILayoutConstraintAxis // .Horizontal, .Vertical var distribution: UIStackViewDistribution

    // .Fill, .FillEqually, .FillProportionally // .EqualSpacing, .EqualCentering var alignment: UIStackViewAlignment // .Fill, .Leading, .Top, .FirstBaseline // .Center, .Trailing, .Bottom, .LastBaseline var spacing: CGFloat
  15. ─────────────────────────────axis────────────────────────────▶ ╔══════════════════════════════════════════════════════════════╗ ║ ┏━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━┓ ║ ║ ┃ —

    ┃ ┃ ┃ ┃ ┃ ║ ║ ┃ │ ┃ ┃ spacing ┃ ║ ║ ┃ │ ┃ ┃ ┃|──|┃ ┃ ║ ║ ┃ │ ┃ ┃ ┃ ┃ ┃ ║ ║ ┃ alignment ┃ ┃ ┃ ┗━━━━━━━━━━━━━━┛ ║ ║ ┃ │ ┃ ┃ ┃ ║ ║ ┃ │ ┃ ┃|──distribution──|┃ ║ ║ ┃ │ ┃ ┃ ┃ ║ ║ ┃ — ┃ ┃ ┃ ║ ║ ┗━━━━━━━━━━━━━━┛ ┃ ┃ ║ ║ ┃ ┃ ║ ║ ┃ ┃ ║ ║ ┗━━━━━━━━━━━━━━━━━━┛ ║ ╚══════════════════════════════════════════════════════════════╝
  16. New Layout Systems • New classes • NSLayoutAnchor • UILayoutGuide

    • UIStackView • Great improvements for iOS (OS X)
  17. !

  18. htn.to/intern2015