Autolayout: origin and size should change according to width and height factor

Question

Here is a scenario what I needed.

I have put a UIButton on IB (size iPhone4 inch) whose initial frame on IB is x:100,y:100,w:100,h:100. I want the origins and height should change according to device size. for example the width and height of iPhone6 is 375X667, hence the width factor (375/320=1.1718) and height factor (667/568=1.1742). In this scene I want to change my buttons origin X and width with multiply by width factor (1.1718) and origin Y and height with multiply by height factor (1.1782). In this case my button should be shown on x:100X1.1718, y:100X1.1742, w:100X1.1718, h:100X1.1742 .

same thing is needed for iPhone6+.

I can easily achieve this by setting This autoresizing masks. How can I achieve the same by using autolayout? What step should I follow, what constraints should I apply?

My previous question on this

I am attaching some screenshots what i needed by using Autolayout (Achieved with autoresizing mask shown in above image).

My Try:-

Step1:- Take a button of size 100X100 on IB. set its X=100 and y=100. Step2:- applied this constraints.

Vaud

Hi, can you please add image of view how you wan't the button exactly. It would be better if you add screen shot for iPhone 5,6 and 6 Plus. Even if it is set using autoresizing mask. It would be helpful. – Shrug

@iOS_DK I have updated my question with attachments. Please have a look. – Vaud

Hi, as it seemed more clear than before. But my new question is that do you require the exact height and y position from top? – Shrug

Answer 1

As pre your question you can set this constraints to your UIButton.

---

You are not required to change the constraint which you have set for height and width of UIButton.

---

1.) You need to set horizontal space to Button.Leading and Superview.Trailing.

Set constant=0, Priority=1000 and Multiplier=100:320 as I've set in below image.

---

2.) You need to set horizontal space to Button.Top and Superview.Bottom.

Set constant=0, Priority=1000 and Multiplier=100:568 as I've set in below image.

---

Result

---

Hope this solves your problem.

Shrug

@Mayank Jain I've edited the answer it's the simplest solution without using spacer please have a look. – Shrug

Thank you. Any further query please let me know. Happy Coding. – Shrug

Thanks @DhaivatVyas, I was not sure how to access this problem and what should work (since it is not self explanatory) - but this is the simplest and probably better answer of all suggested here and elsewhere. – Harman

@EranMarom Thank you I'll try my level best to provide solution which is self explanatory and in the simplest way as possible. – Shrug

Answer 2

Use the multiplier of the constraints. So, set up a constraint that the button's width equals the top view's width with a multiplier of 100:320 (you can use this ratio form to express the multiplier). Set the constraint's constant to 0. Do the same for button's height proportional to top view's height (ratio 100:568). For the button's position, constrain the button's leading to the top view's width with a ratio of 100:320 and the button's top to the top view's height with a ratio of 100:568.

Ayn

your suggestion is perfect for height and width but origin is not changing accordingly. – Vaud

Edit the question to show what you tried. For example, select the constraint you made for the horizontal origin (button's Leading) in the document outline and then post a screenshot of the Size inspector, which will show its details. – Ayn

Can you really "constrain the button's leading to the top view's width"? I think definitely not in IB. Please provide examples if I'm wrong. – Cantor

Not directly in IB. However, if the top view has its origin at (0, 0), then its trailing attribute is the same as its width. So, in that case, you can constraint the button's leading to the top view's trailing with a multiplier for the same effect. – Ayn

Ah, constraint the button horizontal position by attaching it to the superview's trailing with a multiplier. (You said that, bolded because it's backwards--literally, backwards). Makes sense, could work entirely in IB but I can't verify that right now. Clever and definitely worth keeping in the toolbox, but I think spacer views, even though they feel like cheating, are still more intuitive and straightforward, especially if working in IB. – Cantor

@KenThomases I updated my question with the step I tried and a screenshot of iPhone6 simulator. – Vaud

You set the button's top and leading to the superview's top and leading (both of which are effectively 0). The multiplier is irrelevant because multiplying by 0 is 0. The constant is the only effective part of that. You should relate the button's leading to either the superview's width (if IB will let you) or its trailing. Set the constant to 0. The multiplier should do all of the work. Same for the button's top vis-à-vis the superview's height or trailing. – Ayn

Answer 3

If you want to do this entirely in your storyboard (or XIB), you need to use a spacer view.

First, put a spacer view in the upper left corner of the root view. Constrain its top and left edges to be distance zero from the superview. Constrain its width to be 100:320 to its superview width (and make sure the first item of the constraint is the spacer). Constrain its height to be 100:568 to its superview height. These width and height constraints will control the position of the button.

Now constrain the top edge of the button to the bottom edge of the spacer, and constrain the left edge of the button to the right edge of the spacer. Create the proportional width and height constraints between the button and the superview.

Set the spacer view to hidden. Hidden views aren't visible and don't receive touches, but still participate in layout.

…If you want to do it in code, just use the autoresizing mask and set translatesAutoresizingMaskIntoConstraints to YES.

Lobation

This is correct, I thought I could explain it better, questioner should judge for themselves, but I had to edit my answer a bunch of times and wouldn't have noticed if it weren't for this answer. Note you have a typo, it's translatesAutoresizingMaskIntoConstraints but that line wasn't even necessary. – Cantor

Answer 4

For height and width, create an "aspect ratio" constraint in Interface Builder linking the button to the superview. There is no property for aspect ratio; it will use the values at the time it was created to set the multiplier (If iPhone <= 5 width and linking superview to button widths, it will be 320:100) . Add a second constraint for aspect ratio linking the button height to superview height (if you didn't want the height to stretch with the iPhone 5, you could link the buttons aspect ratio to itself.).

For origin, I don't think there's a way to link origin of views and size of views. To set origin to an arbitrary height or width based on size of the screen, you do need to create a spacer view. Inelegant, but necessary. Add the view and set it hidden (and name it in the object outline to the left, which when working with autolayout in IB you probably want to do with everything to make the constraints readable, but definitely here so you can find it again easily). Set create constraints to zero linking it to the button and the top layout guide, and zero to the superview.leading and button leading.

To adjust the spacing you can create aspect ratio constraints, to both the superview width and to the superview height, or just set it equal to the button width and height.

Cantor

Answer 5

Try this solution

1. Set views top alignment to superviews centerY and set the multiplier 84:240
2. Set views left alignment to superviews center X and set the multiplier 100:160
3. set proportional width with multiplier 100:320 and proportional height 100:568

Hope this solves your problem

Corrupt

this is not what I am looking for. After setting these constraints, button is not showing even in iPhone5. – Vaud

@MayankJain I have added a sample code here take a look at it. it works fine for me – Corrupt