How can I set aspect ratio constraints programmatically in iOS?

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?

Answer 1

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: