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.

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.

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.

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 .

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.

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

Answer 6

You can possibly do it all in IB using 2 helper views. A Top helper and a Left Helper . The rest is just setting it up so that each height and width is appropriately proportional to the size of the view. I setup an example. Here are a couple of screenshots and different view sizes.