Layout System Improvements in iOS 9

Presented at potato tips #18

1. J04
    ଁ ీ ࠺
   ࢮ ࡦ ࡤ ࡨ ࢊ ࡹ ࡻ ࢈ ࢢ
2. cockscomb
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