ios layout overview
TRANSCRIPT
VIEWS AND LAYOUT ON IOS
AGENDA
Views
Auto Layout
Size Classes
Auto Layout in Code
VIEWS
VIEW HIERARCHY
UIView
Views are placed relative to theirparents
View hierarchy is used to handle touch responses [1]:
lowest view in the hierarchy receives touch
if not handled, event gets passed to superview
recursivelySubview 1
Subview 1I
[1] Apple Docs: Event Delivery Responder Chain
VIEW RENDERING
CALayer
UIViewUIKit
CoreAnimation
Each UIView is backed bya Core Animation object
UIView is main programminginterface
Animation code is delegated to CALayer
View can access layer throughlayer property
VIEW RENDERING
Views are rendered initially when first added to the view
hierarchy, only re-rendered when necessary
Can trigger manual re-render by calling setNeedsDisplay
UIKit components provide private rendering code, custom UI
components can override drawRect for custom rendering
code [2]
[2] Apple Docs: Implementing your drawing code
VIEW PROPERTIES
frame Frame rectangle in super view’s coordinate system
center Center point in super view’s coordinate system
bounds Frame of the view in its own coordinate system
transform Affine transform that is applied to rotate/scale/
etc. the view, invalidates the frame
VIEW PROPERTIES
Frame: (10, 15, 280, 370)
Bounds: (0, 0, 280, 370)Center (150, 200)150
200
Origin (10, 15)
Size (280, 370)
AUTO LAYOUT
AUTO LAYOUT
Typically don’t set any view properties (frame, center, etc.)
directly, instead use Auto Layout constraints to define view
positions
Make School has an extensive video tutorial series that
teaches you how to work with Auto Layout
SIZE CLASSESDefault Layout Regular Width, Any Height
SIZE CLASSESSize classes allow you to target different devices and device
orientations with specific constraints
Once you have selected a size class, constraintswill be added only for that specific size class
SIZE CLASSESIf you modify an existing constraint, it will only be modified for
this specific size class
0 is the value for size class Any x Any
20 is the value for size class Regular x Any
AUTO LAYOUT IN CODE
Most Auto Layout work should be done in Interface Builder,
some dynamic features require Auto Layout in code
AUTO LAYOUT IN CODE
Modify existing constraints by creating an IBOutlet that
references them:
@IBOutlet var heightConstraint: NSLayoutConstraint! func moreButtonTapped() { heightConstraint.constant = 300 }
AUTO LAYOUT IN CODE
You can only change the constant property of the
constraint, none of the other properties
AUTO LAYOUT IN CODE
For any other modification you need to deactivate
existing constraints and activate new constraints
newWidthConstraint = NSLayoutConstraint(item: orangeView, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Height, multiplier: 0.7, constant: 0)
heightProportionConstraint.active = false newWidthConstraint.active = true
Deactivate existing constraint before activating new one to avoid angry error messages
AUTO LAYOUT IN CODE
Auto Layout API is very verbose
You can use Visual Format Language instead [3]:
let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-200.0-[redView]-100.0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: ["targetWidth": 200], views: ["redView": redView])
[3] Apple Docs: Visual Format Language
AUTO LAYOUT IN CODE
Alternatively you can use third-party libraries, i.e.
Cartography [4]:
constrain(view1) { view1 in view1.width == 100 view1.height == 100 view1.center == view.superview!.center }
[4] Carthography on GitHub
MANAGING LAYOUT CYCLES
setNeedsLayout: triggers update of layout constraint prior
to next rendering
layoutIfNeeded: triggers update of layout constraints
immediately
CUSTOMIZING LAYOUT
layoutSubviews: Provides you with a hook to write custom
layout code in case Auto Layout cannot be used
ADDITIONAL RESOURCES
View Programming Guide
Make School Video Series on Auto Layout