36

Is there a way to divide the screen by percentage (not equal percentage) I need to split the screen to two parts 1/3 and 2/3. I know how to split to equal parts but cant figure out how to split to non equal.

Thanks

Massimo Polimeni
  • 4,826
  • 4
  • 27
  • 54
ilan
  • 4,402
  • 6
  • 40
  • 76

4 Answers4

61

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.

Stefan
  • 1,496
  • 1
  • 13
  • 26
27

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

17

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!

Massimo Polimeni
  • 4,826
  • 4
  • 27
  • 54
  • hi , thanks for shared you knowledge , but i try to use your answer but there is conflict between the 2 views .. what the problem here !! thanks – Mosa Apr 25 '18 at 13:28
  • You probably have other constraints, open a new question on stackoverflow maybe I could help – Massimo Polimeni Apr 26 '18 at 07:25
  • you missed 1 constraint. i.e horizontal space between 2 views. it should be 0. if you have to divide screen in 3 equal parts then add horizontal space from 1st to 2nd and 2nd to 3rd – Shrikant Phadke May 17 '20 at 17:20
2

You can use the Equal Widths constraint as in the accepted answer, however, if what you're trying to constrain is not two sizes but rather one point to another, such as constraining one view's horizontal center to the 1/3 or 2/3's point on the screen, then it won't work because you can't constrain a point in space to a size.

But if you know say, view1, in your xib is going to be the full width of the screen, then, for example with the horizontal center point, you can constrain it to that view's trailing edge, and if you want the view to be centered at 1/3 or 2/3's the screen's width then set the multiplier to 1:3 or 2:3, respectively.

shoe
  • 952
  • 1
  • 20
  • 44