Constraints(Safe Area)

• Start in portrait mode
• Expand all sides to fit the model of the phone
• Set logos and other items in the proper position, getting ready to autolayout them.
• Select the item in the view controller scene (ex. background image)
• There is a button |-[]-| on the bottom, which brings up constraints options
  • Add values (0) and click on the dashed lines to turn them solid
  • Click Add # Constraints to set the constraints
  • Verify by transitioning to landscape orientation
    • Notice: The background may not stretch all the way to the left and right:
    • Click on the constraint that has this name: background.trailing = Safe Area.trailing
    • Need to use view.trailing, the parent of the safe area
    • In the inspector pane -> Trailing Alignment Constraint, there is a dropdown Second Item, select superview and relation set to equal
    • Verify by changing the orientation to landscape
  • Repeat above for the leading constraint, but make sure to be in portrait changing!

Alignments

• Align an element vertically or horizontally to the center
• For a logo to be centered, place the logo where it should be initially in upright position
• To the left of the Constraints icon is the align icon, click it to add: Horizontally in the container and Vertically in the container. Both should have value 0.

Pinning

• Place an item a certain amount of distance from the sides.
• When used in landscape mode, content may be hidden becuase it can't reach or pushes the content way to far down.

Containers

• Used when you have mulitple elements on the screen:
  • Which can't be aligned vertically or horizontally
  • Not enough vertical space when transitioned to landscape view.
• In the Dicee app, 3 containers were used to embed the elements within:
  • Then able to vertically and horizontally center each element
• In the image library: search for uiview: empty view
  • Next, move the view and add height and width
  • Move the element you want to embed within the container under the container in the ViewControllerScene tab.
  • Faster way: select the element(s), then go to Editor -> Embed in -> View
  • Alternatively: select the element(s), then above the debug panel, there is an icon for embed in, then click View
• Errors will occur when you try to add constraints to the elements imbedded in -> stack views
  • Xcode does not know where and how to position the container! This is where stack views come into play!
  • A way to stack the views (containers)

Stack-views

• Give all the views some equal height and width
• Hold down command and select all the views, then using one of the three methods above, embed them in a stack view.
• Give the stack view constraints relative to the superview (or view)
  • If when you are adding constraints and don't see options for a certain parent view, it means the height has spilled into that parent area, try decreasing the height.
• Next, select the stack view and give each view the distribution -> fill equally
• You can add a constraint for height and width (sometimes adding these constraints may shrink the size of the element)