position a view in storyboard at 1/3 of screen size

Question

I'm trying to position a view in storyboard to always have it top edge at 1/3 of screen size. I have currently set a constraint to Top Layout Guide, but the constraint's constant is...well it is constant no matter which screen size it is used in, but I want it to be 1/3 of screen size. Can this be done entirely in storyboard? Thanks for answers

Screenshot of current state:

Check out this question: http://stackoverflow.com/questions/30924523/how-to-proportinally-size-the-image-based-on-the-iphone-is-using/30924813#30924813 — Dan Loughney, Aug 19 '15 at 16:31
FYI, DanLoughney's linked question adjusts SIZE of a view relative to screen; this question is about POSITION of a view on the screen. — ToolmakerSteve, Mar 04 '17 at 05:15

score 28 · Accepted Answer · answered Aug 19 '15 at 16:34

28

Create a constraint between the view's top edge and the superview's bottom edge. Set the constraint's constant to zero, and set its multiplier to 1:3. Like this:

answered Aug 19 '15 at 16:34

Tamás Zahola

9,271
4
34
46

This doesn't work for me, when I set the constant to 0, it hugs the view to the bottom of the screen. Also, I can't seem to create a constraint that goes to "Superview.Bottom", it always creates it to go to "Superview.Bottom Margin" – TheJeff Aug 30 '16 at 18:18

score 4 · Answer 2 · answered Aug 19 '15 at 16:40

4

You can setup it against center or bottom. Here is an example constraints related to center: (1/3 from top = 1.66 from center)

answered Aug 19 '15 at 16:40

Danil

2,497
2
19
27

Use a proper rational number for the multiplier like `5:3` :P – Tamás Zahola Aug 19 '15 at 16:42

score 4 · Answer 3 · answered Jun 24 '18 at 08:33

For anyone trying to make this work programatically I was not able to handle that by 'anchors' style but old NSLayoutConstraint initializer worked:

let constraint = NSLayoutConstraint(item: floatingBtn,
                                    attribute: .centerY,
                                    relatedBy: .equal,
                                    toItem: view,
                                    attribute: .bottom,
                                    multiplier: 1/3,
                                    constant: 0)
constraint.isActive = true

Credits to accepted answer.

score 3 · Answer 4 · answered Aug 19 '15 at 16:32

3

You can add empty (clear color) UIView, pin it to the top, and set it's height to be equal to 1/3 of the superview. Then you can pin the top of your yellow view to the bottom of your empty UIView.

answered Aug 19 '15 at 16:32

almas

7,090
7
33
49

position a view in storyboard at 1/3 of screen size

4 Answers4

Linked