Dividing screen in to 1/3 and 2/3 views using autolayout Dividing screen in to 1/3 and 2/3 views using autolayout ios ios

Dividing screen in to 1/3 and 2/3 views using autolayout


Xcode contraints

Make an "Equal widths" constraints between your view and the super view with multiplier 2:3 for one view and 1:3 for the other. See picture. "Equal height" if you want to split in the other direction.


Steps :

  1. Drag a Two UIView objects on viewcontroller.
  2. Pin left-view to left, top and bottom of superview
  3. And Right-view to right, top and bottom of superview.
  4. Pin the horizontal spacing between two views(left and right). Make sure constant is zero since/if you want no spacing.
  5. Select left-view and superview and set width equally (hold your patience). Now go to size inspector and edit width equally constraint having left view selected. Now set the multiplier to 0.33 (now % width is set).

enter image description here

See the result :

enter image description here


Using storyboard & autolayout it's very easy: I suppose you need to split the screen vertically (but horizontally it's the same trick).

So using a single view controller, drag&drop two views and set them attached to top and bottom. For the the view 1:

view 2:

Now you need to set the constraint equal height for the view 1 among the main view and the same for the view 2. After that you can edit these constraints settings a value (between 0 and 1) as multiplier. Double click on the constraint:

and set the value that you want for proportion (the trick it's maintain the sum of these constraints as 1 or just put in "2:3" here and "1:3" in the other view):

So this is the result:

I hope this is what you need, tell me if you need more details!