Layout System Improvements in iOS 9

Slide 1

Slide 1 text

J04 ଁ ీ ࠺ ࢮ ࡦ ࡤ ࡨ ࢊ ࡹ ࡻ ࢈ ࢢ

Slide 2

Slide 2 text

cockscomb

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Layout System Improvements in iOS 9

Slide 5

Slide 5 text

New Classes • NSLayoutAnchor • UILayoutGuide • UIStackView

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

topAnchor │ ▼ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ▲ ┃ ┃ │ ┃ leadingAnchor ┃heightAnchor ┃ trailingAnchor ──▶┃ │ ┃◀── leftAnchor ┃◀────┼──────widthAnchor────▶┃ rightAnchor ┃ │ ┃ ┃ ▼ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ▲ │ bottomAnchor

Slide 9

Slide 9 text

let imageView = UIImageView() let label = UILabel() NSLayoutConstraint.activateConstraints([ imageView.leadingAnchor .constraintEqualToAnchor(label.leadingAnchor), imageView.bottomAnchor .constraintEqualToAnchor(label.topAnchor, constant: 8.0), ]) │╔══════════════════╗ ║ ║ │║ UIImageView ║ ║ ║ │╚══════════════════╝ — │ │8 — │┌─────────────┐ │ UILabel │ │└─────────────┘

Slide 10

Slide 10 text

UILayoutGuide • Auto Layout༻ʹۣܗΛදݱ͢Δ • μϛʔͷUIViewΛஔ͖׵͑Δ • UIViewΑΓܰྔ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 ┃ ┗━━━━━━━━━━━━━┻─────────────┻━━━━━━━━━━━━━┛ | ─ ─ ─ ─ ─ ─ | ─ ─ ─ ─ ─ ─ | ─ ─ ─ ─ ─ ─ |

Slide 13

Slide 13 text

UIStackView • ॎԣʹsubviewΛฒ΂Δίϯςφ • ಺෦ͰAuto LayoutΛ࢖͏ • subviewͷ૿ݮΛ͏·͘ϋϯυϦϯάͯ͘͠ΕΔ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

─────────────────────────────axis────────────────────────────▶ ╔══════════════════════════════════════════════════════════════╗ ║ ┏━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━┓ ║ ║ ┃ — ┃ ┃ ┃ ┃ ┃ ║ ║ ┃ │ ┃ ┃ spacing ┃ ║ ║ ┃ │ ┃ ┃ ┃|──|┃ ┃ ║ ║ ┃ │ ┃ ┃ ┃ ┃ ┃ ║ ║ ┃ alignment ┃ ┃ ┃ ┗━━━━━━━━━━━━━━┛ ║ ║ ┃ │ ┃ ┃ ┃ ║ ║ ┃ │ ┃ ┃|──distribution──|┃ ║ ║ ┃ │ ┃ ┃ ┃ ║ ║ ┃ — ┃ ┃ ┃ ║ ║ ┗━━━━━━━━━━━━━━┛ ┃ ┃ ║ ║ ┃ ┃ ║ ║ ┃ ┃ ║ ║ ┗━━━━━━━━━━━━━━━━━━┛ ║ ╚══════════════════════════════════════════════════════════════╝

Slide 16

Slide 16 text

New Layout Systems • New classes • NSLayoutAnchor • UILayoutGuide • UIStackView • Great improvements for iOS (OS X)