How can I set aspect ratio constraints programmatically in iOS? [duplicate]

Question

I have used auto layout for my view controllers. I have set the V and H positions in constraints, but I want to know how can I increase my button size when it changes to 5s, 6 and 6 Plus. This is the way I added constraints for the login button:

NSArray *btncon_V=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[btnLogin(40)]" options:0 metrics:nil views:viewsDictionary];
[btnLogin addConstraints:btncon_V];

NSArray *btncon_POS_H=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[btnLogin]-100-|" options:0 metrics:nil views:viewsDictionary];
[self.view addConstraints:btncon_POS_H];


NSArray *btncon_POS_V=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[Title]-130-[lblFirst]-0-[lblSecond]-20-[textusername]-10-[txtpassword]-10-[btnLogin]" options:0 metrics:nil views:viewsDictionary];

[self.view addConstraints:btncon_POS_V];

But my problem is that while it manages the left and right side gap, it's getting stretched in iPhone 6 and 6 Plus since the height is fixed. How can I increase the size according to the screen size? I think this might be the aspect ratio, but how can I set the aspect ratio constraint in code?

Check this answer : stackoverflow.com/a/12526630/3202193

Ashish Kakkad
– Ashish Kakkad

2015-07-10 06:50:51 +00:00
Commented Jul 10, 2015 at 6:50 — Ashish Kakkad
– Ashish Kakkad, Commented Jul 10, 2015 at 6:50
NOW TRIVIAL: stackoverflow.com/a/71935174/294884

Fattie
– Fattie

2023-02-15 15:53:43 +00:00
Commented Feb 15, 2023 at 15:53 — Fattie
– Fattie, Commented Feb 15, 2023 at 15:53

Eugene Brusov · Accepted Answer · 2017-12-25 22:10:36Z

127

Layout Anchors is the most convenient way to set constraints programmatically.

Say you want to set 5:1 aspect ratio for your button then you should use:

button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1.0/5.0).isActive = true

Here's the full code:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let button = UIButton(type: .custom)
        button.setTitle("Login", for: .normal)
        button.backgroundColor = UIColor.darkGray

        self.view.addSubview(button)

        button.translatesAutoresizingMaskIntoConstraints = false

        let margins = view.layoutMarginsGuide

        button.leadingAnchor.constraint(equalTo: margins.leadingAnchor, constant: 20.0).isActive = true
        button.trailingAnchor.constraint(equalTo: margins.trailingAnchor, constant: -20.0).isActive = true
        button.bottomAnchor.constraint(equalTo: margins.bottomAnchor, constant: -20.0).isActive = true
        button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1.0/5.0).isActive = true
    }

}

Here're results achieved with code written above. You can see that button keeps its 5:1 aspect ratio across various devices:

answered Dec 25, 2017 at 22:10

Eugene Brusov

17.9k6 gold badges56 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

javaxian Over a year ago

Great answer. This is actually not 5:1, but 1:5 aspect ratio :)

Mahesh Agrawal · Accepted Answer · 2017-10-03 11:50:15Z

90

Like this. Try once.

[self.yourview setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.yourview addConstraint:[NSLayoutConstraint
                                  constraintWithItem:self.yourview
                                  attribute:NSLayoutAttributeHeight
                                  relatedBy:NSLayoutRelationEqual
                                  toItem:self.yourview
                                  attribute:NSLayoutAttributeWidth
                                  multiplier:(self.yourview.frame.size.height / self.yourview.frame.size.width)
                                  constant:0]];

or in the place of (self.yourview.frame.size.height / self.yourview.frame.size.width) you can use any float value. Thanks.

Swift 3.0 -

self.yourview!.translatesAutoresizingMaskIntoConstraints = false
self.yourview!.addConstraint(NSLayoutConstraint(item: self.yourview!,
                                          attribute: NSLayoutAttribute.height,
                                          relatedBy: NSLayoutRelation.equal,
                                          toItem: self.yourview!,
                                          attribute: NSLayoutAttribute.width,
                                          multiplier: self.yourview.frame.size.height / self.yourview.frame.size.width,
                                          constant: 0))

edited Oct 3, 2017 at 11:50

answered Jul 10, 2015 at 6:42

Mahesh Agrawal

3,36823 silver badges36 bronze badges

10 Comments

IRD Over a year ago

Its giving me this error Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Multiplier is not finite! That's illegal. multiplier:nan'

Mahesh Agrawal Over a year ago

it means in the scenario like if height is 100 and width is 200 and you given multiplier 0.5 with my code, then if your height will increase to 150 by changing any other constraint then width will automatically increase to 300. But to do this you need to increase one constraint of the view like width or height.

Mahesh Agrawal Over a year ago

it will take height:width = 1:2 that is 0.5.

atulkhatri Over a year ago

Don't forget to add this line before setting any constraints programatically: [self.yourview setTranslatesAutoresizingMaskIntoConstraints:NO];

Phlippie Bosman Over a year ago

When using constraints, my frame sizes were all zero. To get the aspect ratio, instead, I used self.yourview.intrinsicContentSize

|

Elijah · Accepted Answer · 2017-09-07 16:45:09Z

21

Swift 3:

yourView.addConstraint(NSLayoutConstraint(item: yourView,
                                          attribute: .height,
                                          relatedBy: .equal,
                                          toItem: yourView,
                                          attribute: .width,
                                          multiplier: 9.0 / 16.0,
                                          constant: 0))

edited Sep 7, 2017 at 16:45

Elijah

8,6502 gold badges59 silver badges51 bronze badges

answered Apr 14, 2017 at 15:16

RNHTTR

2,5252 gold badges19 silver badges32 bronze badges

2 Comments

dvdblk Over a year ago

For iOS 8 and above you should be using the isActive property of NSLayoutConstraint instead of calling addConstraint(:). aspectRatioConstraint.isActive = true

Kimi Chiu Over a year ago

Why don't you use .width as the first attribute? The result is attr2 * multiplier , the aspect ratio is width / height, so width = height * aspectRatio, if we put the .height to the first attribute and the aspectRatio to the multiplier then the result is totally reversed.

frouo · Accepted Answer · 2022-11-05 23:06:48Z

20

Helper Extension on UIView

extension UIView {
    
    func aspectRatio(_ ratio: CGFloat) -> NSLayoutConstraint {
        
        return NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: self, attribute: .width, multiplier: ratio, constant: 0)
    }
}

And usage is:

view.aspectRatio(1.0/1.0).isActive = true

edited Nov 5, 2022 at 23:06

frouo

5,2133 gold badges29 silver badges31 bronze badges

answered Mar 27, 2019 at 8:35

Michał Ziobro

12k16 gold badges97 silver badges165 bronze badges

2 Comments

Michał Ziobro Over a year ago

and usage: view.aspectRation(1.0/1.0)

Pankaj Kulkarni Over a year ago

This is indeed an elegant solution barring couple of types: 1. The toItem parameter is set to .self instead of self 2. And the usage in comment should be view.aspectRation(1.0/1.0).isActive = true I tested this in Xcode 10.2.1 Swift 5.

Zanael · Accepted Answer · 2016-01-06 21:55:09Z

You can set "Height constraint" at Design-time in Interface Builder. Just check '"Remove at build time", and it removes when App will running.

After that you can add "Aspect Ratio" constraint, for example, in viewDidLoad method.

In Xamain.iOS for "16:9" it's looks like this:

    this.ImageOfTheDay.AddConstraint(NSLayoutConstraint.Create(
            this.ImageOfTheDay,
            NSLayoutAttribute.Height,
            NSLayoutRelation.Equal,
            this.ImageOfTheDay,
            NSLayoutAttribute.Width,
            9.0f / 16.0f,
            0));

Or, as Mahesh Agrawal said:

    [self.ImageOfTheDay addConstraint:[NSLayoutConstraint
                              constraintWithItem:self.ImageOfTheDay
                              attribute:NSLayoutAttributeHeight
                              relatedBy:NSLayoutRelationEqual
                              toItem:self.ImageOfTheDay
                              attribute:NSLayoutAttributeWidth
                              multiplier:(9.0f / 16.0f)
                              constant:0]];

bandejapaisa · Accepted Answer · 2023-08-27 09:52:25Z

6

Swift 5 solution, Xcode 12.4. Requires ios 9.0+

Simply anchor your height constraint to a certain ratio:

let aspectRatio: CGFloat = 9 / 16 // Example of ratio you want to apply
yourView.heightAnchor.constraint(equalTo: imageView.widthAnchor,
                                 multiplier: aspectRatio).isActive = true

edited Aug 27, 2023 at 9:52

bandejapaisa

27.1k13 gold badges98 silver badges116 bronze badges

answered Apr 1, 2021 at 13:51

Alessandro Francucci

1,71019 silver badges26 bronze badges

Comments

tuandapen · Accepted Answer · 2017-09-25 09:12:49Z

5

I have try all answers above but didn't work, and this is my solution with swift 3:

let newConstraint = NSLayoutConstraint(item: yourView, attribute: .width, relatedBy: .equal, toItem: yourView, attribute: .height, multiplier: 560.0/315.0, constant: 0)
yourView.addConstraint(newConstraint)
NSLayoutConstraint.activate([newConstraint])  
NSLayoutConstraint.deactivate(yourView.constraints)
yourView.layoutIfNeeded()

edited Sep 25, 2017 at 9:12

answered Sep 25, 2017 at 8:40

tuandapen

2844 silver badges6 bronze badges

1 Comment

John Over a year ago

You should always deactivate (potentially conflicting) constraints before adding new ones to avoid autolayout errors

Collectives™ on Stack Overflow

How can I set aspect ratio constraints programmatically in iOS? [duplicate]

7 Answers 7

1 Comment

10 Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

10 Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Linked

Related