Making a UIButton a % of the screen size

Question

I noticed certain button sizes look great on one the iPhone 5 simulator but do not look as good on the iPhone 6 simulator and this is because the heights or constraints that I place on the UIButtons end up leaving a lot of blank space down the bottom of my App Screen.

I would like to have a button that is 40% of the screen size regardless of what device I am simulating on.

Any ideas on how to make the size of the button stay 40% of the screen size regardless of the device?

There is one constrain called aspect ratio constraint, if you Ctrl click on the UIbutton and drag to the same UIbutton it would appear that constraint. This constraint makes your UIbutton keep the same proportion in all devices. — Victor, Jun 25 '15 at 08:05

score 10 · Accepted Answer · answered Jun 25 '15 at 07:46

10

Ctrl drag from button to superview and select Equal Widths
Open Size Inspector edit Equal Widths constraint and set multiplier to 0.4. And you will see something like this:
Add missing constraints and update frames.

enter image description here

answered Jun 25 '15 at 07:46

ChikabuZ

10,031
5
63
86

score 1 · Answer 2 · answered Jun 25 '15 at 07:40

You can't set a constraint to be 40% of the screen height. However, if the button always has a 20px leading and trailing to the superview you could use that width and set an aspect ratio height.

Another way could be to use UIScreen.mainScreen().bounds.size.height * 0.4 for your button height.

A third way is to use the button's superview to set the height. Assuming that your button is a direct child of a UIViewController's view: view.bounds.size.height * 0.4.

There's probably a bunch of other ways to do this as well but none of them will involve setting the height to an actual percentage as far as I'm aware.

score 0 · Answer 3 · answered Jun 25 '15 at 07:43

0

This function gives you the bounds of the screen

var bounds = UIScreen.mainScreen().bounds

And then you can set the button width multipliying 0.4 x bounds.size.width

Regards

answered Jun 25 '15 at 07:43

Juan

1

score 0 · Answer 4 · answered Feb 26 '19 at 05:34

Swift 4.2

In code it's really easy:

override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(button)
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

        button.widthAnchor.constraint(equalToConstant: 100).isActive = true
        button.heightAnchor.constraint(equalToConstant: UIScreen.main.bounds.height * 0.4).isActive = true
    }

or use this instead of current heightAnchor:

button.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.4).isActive = true

hope this help :)

Making a UIButton a % of the screen size

4 Answers4

Linked