When using AutoLayout in building iOS applications, use container views and temporarily set their background color to something visiible. Here is an example of laying out two "sections" of the screen proportionally without using vertical stack views. First screenshot below is the view hierarchy:
Next screenshot shows the Main storyboard:
Next up are the superview constraints:
The explanation of some constraints follows:
- ButtonsView.top = PictureView.bottom+2
 gives a gap of 2 points between the ButtonsView top and PictureView bottom
- bottom = ButtonsView.bottomconstrains the bottom of the ButtonsView to "hug" the bottom of the topmost view
Here are the ButtonsView constraints:
- The height of the ButtonsViewis constrained to 100 so that thePictureViewcan take up the remaining space.
- The buttons stackview is constrained to be centered vertically and horizontally within the ButtonsView.
Here are the PictureView constraints:
- Image top is set 10 points away from the "Guess the Animal" label
- bottom of the containing PictureViewis pinned to the bottom of the image view.
- "Guess the animal" label is 10 points from the top of the PictureView
- "Guess the animal" label is centered horizontally within the PictureView
Here are the StackView constraints:
- Stack View is constrained to height 100
- Stack View is horizontally and vertically centered inside its containing view.
 
Comments
Post a Comment