5. VIEW HIERARCHY
UIView
Views are placed relative to their
parents
View hierarchy is used to handle touch responses [1]:
lowest view in the hierarchy receives touch
if not handled, event gets passed to superview
recursively
Subview 1
Subview
1I
[1] Apple Docs: Event Delivery Responder Chain
7. 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
8. 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
11. 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
13. SIZE CLASSES
Size classes allow you to target different devices and device
orientations with specific constraints
Once you have selected a size class, constraints
will be added only for that specific size class
14. SIZE CLASSES
If 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
15. AUTO LAYOUT IN CODE
Most Auto Layout work should be done in Interface Builder,
some dynamic features require Auto Layout in code
16. AUTO LAYOUT IN CODE
Modify existing constraints by creating an IBOutlet that
references them:
@IBOutlet var heightConstraint: NSLayoutConstraint!
func moreButtonTapped() {
heightConstraint.constant = 300
}
17. AUTO LAYOUT IN CODE
You can only change the constant property of the
constraint, none of the other properties
18. 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
19. 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
20. 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
21. MANAGING LAYOUT CYCLES
setNeedsLayout: triggers update of layout constraint prior
to next rendering
layoutIfNeeded: triggers update of layout constraints
immediately
