Create layouts in interface builder can be tricky sometimes, to me distributing views them proportionally was an example.
While this isn’t so obvious at the first time, you will notice that is quite simple to achieve.
What It’s done here is basically add a container view that hold the UIViews that need be distributed proportionally and make all subviews to have the same width of it’s parent with a multiplier which represents the percentage occupied in x axis.
As usual x and y layouts constraints are required to satisfy AutoLayout.
Source available to download here
This blog post assumes that you have a basic knowledge about layout constraints.
Add a UIView (We will call it container) to the ViewController and pin it to the edges of it’s parent.
Drag an UIImageView (image1) inside the container and pin the leading, top and bottom edges to it’s parent(container) with 0 constant value.
Don’t worry about Interface Builder complaining about width constraint for image1. We will solve this in a second.
Right click on the image1 on the component tree and drag to the container and select Equal Widths.
Edit the constraint that you just add double clicking on it on on Size Inspector Menu.
Change the value of Multiplier, from 1.0 to 0.3 (or whatever percentage that you want). Setting the multiplier to 0.3 will make image1 take 30% of it’s parent horizontally.
After setting the width, fix the misplacement as suggested in IB and you should have something like this. Notice that set an image in image1.
Drag an UIImageView (image2) inside the container and pin trailing, top and bottom edges to it’s parent with constant value 0.
IB will again complain about width constraint and we will solve as we did before, by now just ignore this warn.
Right click on image2 on component tree and drag into container, select Equal Widths. Like we did in step 5.
Edit the constraint that you just created for image2 double clicking on it.Change value of Multiplier, from 1.0 to 0.7 (or whatever percentage that you want). Similar as we did in step 6.
Here are all the constraints for the views.
After fix the misplacement in IB and define images for image views you will finally have a view controller like this: