Reputation: 11

Button autosize with auto layout in Xcode 6 w/ swift

could anyone of you give me a hint, how to implement autosize of a button with auto-layout?

To be more specific: My button has 50x50px at iPhone 4s. How to implement this button, that its size increases on iPhone 6 plus screen resolution? Is there a kind of multiplier option?

Edit: I want, that the button w/ 50x50px on iPhone4s screen is increasing proportionally at iPhone5, iPhone6 display.

Thanks.

Upvotes: 1

Answers (2)

Natasha

Reputation: 6893

Use aspect Ratio. It's all about math. Before you jump into the action, let's figure out how we are calculating the proportion. So, if you want your button to be 50X50 on a 400X600 frame, how will you find the proportion. Easy- your button's width will be 1/8th of your frame and your button's height will be 1/12th of your frame's height. That's it. Now you have your calculation.

Step By Step Instruction:

First make sure, you have the size class as "wCompact hAny". We should see, something like-

enter image description here

Now we are ready-

Select you ViewController and then select "Stimulated Size" in the inspector. There you will see your Stimulator's width and height. In my case, it is 400X600. You can change it to anything, and calculate your proportionality value accordingly.

enter image description here

Now, we need to position our button. I am just setting it at the middle of the frame. So, hold the "Ctrl" button in the keyboard, click and drag the mouse pointer from the button to the immidiate parent view which will give you a list of options.

enter image description here

From there, when you select the centre horizontally and the centre vertically option your button in the frame should look like this-

enter image description here

Now you can see some orange dots, but ignore that for now.

This is the part, where you will have your answer. To set the button size proportionally, you can use aspect ratio.

Again, hold the "Ctrl" button in the keyboard, click and drag the mouse pointer from the button to the immidiate parent view. This time select aspect ratio from the list.

enter image description here

Select the aspect ratio constrain from the constrain list to edit. You need to make sure that your first Item is Button's width and your second item is superview's width or vice versa. Remember, you want to set the button's width's proportionality value(multiplier) in accordance to the frame's width NOT height.

Now, set the multiplier to 1:8 if your 1st item is your button's width, or 8:1 if your 1st item is superview's width.

Do the 3rd step again. Select aspect ratio again, and select this constrain to edit. However, this time set your first Item as Button's height and your second item as superview's height or vice versa and change the multiplier to 1:12 or 12:1 accordingly.

enter image description here