Layout System Improvements in iOS 9

Presented at potato tips #18

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