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

cockscomb

June 16, 2015
Tweet

More Decks by cockscomb

Other Decks in Programming

Transcript

  1. J04













    View Slide

  2. cockscomb

    View Slide

  3. View Slide

  4. Layout System Improvements
    in iOS 9

    View Slide

  5. New Classes
    • NSLayoutAnchor
    • UILayoutGuide
    • UIStackView

    View Slide

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

    View Slide

  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

    View Slide

  8. topAnchor


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


    bottomAnchor

    View Slide

  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 │
    │└─────────────┘

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  17. !

    View Slide

  18. htn.to/intern2015

    View Slide