Reputation: 51
I have set pin to all view but i got continuously this alert ! I have seen that this is because of height and width constraints but i didn't add height and width still i got this error ! This alert should be avoidable or not.
Upvotes: 0
Views: 6663
Reputation: 4373
A UIView has no intrinsic size meaning none of your views know how large they should be and thus cannot be laid out the way you have them. You can set the height of each one to a fixed number but if you want them to scale I recommend using Equal Heights and Equal Widths and set the multiplier to the proportion of the view you want the little views to size to be. You could do this so many ways. I am going walk you through one way that I think is the quickest(using StackViews) for my own sanity but the same logic could work with more dragging from each view.
Step 1:
Drag a Vertical StackView to the top of the storyboard. Add the following constraints. pin leading, trailing, and top =20. Then drag from the vertical stack view to the main view and choose equal heights and change the multiplier to 0.6(60% of the main view height). See image
Step 2:
Add a single horizontal stackview as an arranged Subview to our vertical stack view. Now add 3 UIViews and change the colors to desired colors. Change stack view to Alignment-Fill and Distribution-Fill Proportionately. Also add spacing=20. See Image
Step 3:
Choose your horizontal stackview that you just created in step 2 and hit Command-C to copy it. Hit Command-V to paste it. Note- If it does not paste it into the vertical stackview drag it in to the vertical stack view. Not there yet but close. See image
Step 4: Go to the vertical stack view and change it to Alignment-Fill and Distribution-(Fill Equally). Add Spacing of 20. You should now be a point that looks like this. See image
Step 5. Add a horizontal stack view below the vertical stack view and the bottom layout guide. Pin to all four sides at 20. Add three views and change the color to desired color. Change Alignment-Fill, Distribution-Fill Equally, and spacing=20.
Step 6. Adjust verticalStackView equal heights multiplier to maybe a lower number(0.5) to make it look like your view.
The Big takeaway is that a UIView needs to know how big it is. UIStackView in this case tells the views how big they are. You could just have easily set the height and width of one of your views in your screenshot above to a percentage of the view. Then drag from that view to all of the like sized views and set equal heights/widths. That would have been more tedious and you can see why I used Stackviews for the example. Good luck.
Upvotes: 2