Autolayout

Examples

FlashChatWelcome.png

FlashChatLogin.png

FlatChatSend.png

Here the composeView height gives us everything we need in order to set the constraints of the textbox and button.

expanding-label.png

Theory

With Autolayout you always need to provide x4 pieces of information. And there are two ways you can do it – pinning or alignment.

Screen Shot 2018-05-19 at 7.19.56 AM.png

dicey.jpg

quizzler

Notes

  • Note that the top and bottom views both have fixed height constraints:
    • Top Height = 345
    • Bot Height = 50

    This enables the middle container to know it’s height

Nested StackView

nested-stack.png

Tips

  1. Layout your containers first and fix all but one of their heights
  2. Then layout your components roughly sized the way your want to see them
  3. Fix the width and heights to start, and pin or align
  4. Fix with usually causes warnings, so fix these to be great than or equals
  5. Work top to bottom, left to right
  6. When stuck start over
  7. Use stackViews for simple homogeneous stuff
  8. Backup and save your work often

the-one-view

Partial Containers

Another useful technique is to use fixed height container views to hold grouped elements and then establish constraints within there.

partial1.png

partial2.png

Changing constraints

Deferred Layout Pass

setsNeedsLayout

The Update Pass -> updateContraints()
The Layout Pass -> viewWillLAyoutSubviews() / layoutSubviews

Batch Layout Pass

setNeedsUpdateConstraints -> updateConstraints

Call superclasses implementation as last step of implementation
Dont call setNeedsUpdateConstraints again else feedback loop

Links that help

30 best practices

Advertisements
%d bloggers like this: