Autolayout programmatic aspect ratio setting

Question

I am trying to add a subview to view and define autolayout constraints, including aspect ratio. But aspect ratio that I see at runtime is not what I defined in constraints. What am I doing wrong? As you can see in code, background view height should be 0.5 of background view width, but that's not the case here in the screenshot. Here is my code:

class ViewController: UIViewController {

private var backgroundView:UIView?

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    view.backgroundColor = UIColor.orange

    backgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
    backgroundView?.backgroundColor = UIColor.black.withAlphaComponent(1.0)
    backgroundView?.layer.borderColor = UIColor.white.cgColor
    backgroundView?.layer.borderWidth = 1.5
    backgroundView?.layer.cornerRadius = 4
    backgroundView?.clipsToBounds = true
    backgroundView?.translatesAutoresizingMaskIntoConstraints = false

    view.addSubview(backgroundView!)

    backgroundView?.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1.0).isActive = true
    backgroundView?.heightAnchor.constraint(equalTo: backgroundView!.widthAnchor, multiplier: 0.5).isActive = true
    backgroundView?.centerXAnchor.constraint(equalTo: view!.centerXAnchor, constant: 0).isActive = true
    backgroundView?.topAnchor.constraint(equalTo: view!.topAnchor, constant: 4).isActive = true
}


 }

Here is the screenshot:

Try- change height constraint to : `.heightAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5)` — Lal Krishna, Jan 21 '19 at 09:04
@LalKrishna heightAnchor takes an dimension, constant and multiplier as parameter **or** a constant. — Rakesha Shastri, Jan 21 '19 at 09:06
Actually what's problem you are facing? I didn't find any problem after running this code. — Lal Krishna, Jan 21 '19 at 09:16
Ok I have edited the question along with screenshot. Why is height of the black view not equal to height of view divided by 2? — Deepak Sharma, Jan 21 '19 at 09:18
because you are set to its width. `.heightAnchor.constraint(equalTo: backgroundView!.widthAnchor, multiplier: 0.5).isActive = true` change to `.heightAnchor.constraint(equalTo: view!.heightAnchor, multiplier: 0.5).isActive = true` — Lal Krishna, Jan 21 '19 at 09:22
You mean backgroundView.heightAnchor = backgroundView.heightAnchor*0.5? How is this supposed to work? — Deepak Sharma, Jan 21 '19 at 09:24
Your question have still missing pure information. What you want ??? and What is issue ? Please clear it. — Sagar Chauhan, Jan 21 '19 at 09:43

score 1 · Answer 1 · answered Jan 21 '19 at 14:05

1

"background view height should be 0.5 of background view width"

Your screenshot size is 1334 x 750

Your backgroundView - including the border - is 1334 x 667

1334 * 0.5 == 667

So, you are getting exactly what you are asking for.

answered Jan 21 '19 at 14:05

DonMag

69,424
5
50
86

Lal Krishna · Answer 2 · 2019-01-25T06:31:10.293

0

Try to change height constraint to set:

backgroundView?.heightAnchor.constraint(equalTo: view!.heightAnchor, multiplier: 0.5).isActive = true

NB: You are getting the exact result which you are looking for. It has the height that's half of its width. There is nothing wrong with the screenshot.

edited Jan 25 '19 at 06:31

answered Jan 21 '19 at 09:26

Lal Krishna

15,485
6
64
84

Please read the code again, it is set to width anchor, not height anchor. Width anchor has already been set in the previous line of code. – Deepak Sharma Jan 21 '19 at 09:30
I saw it. But in comment you asked for `Why is height of the black view not equal to height of view divided by 2?` So that you need view that height should be half of its `self.view`'s height., isn't it? Is this your requirement? – Lal Krishna Jan 21 '19 at 09:37
My requirement is what is wrong with the code? Why are the two lines not setting aspect ratio. – Deepak Sharma Jan 21 '19 at 09:38
You are setting the backgroundView's height as `backgroundView.width / 2.0` – Lal Krishna Jan 21 '19 at 09:39
And why is that not happening in the screenshot? – Deepak Sharma Jan 21 '19 at 09:40
That's what the screenshot shows. It has the height that's half of its width. What's the wrong with the screenshot? – Lal Krishna Jan 21 '19 at 09:41
Oops, there is a mistake. It should be 9.0/16.0 as iPhone 6s screen aspect ratio. Thanks! – Deepak Sharma Jan 21 '19 at 09:45
Because you misquoted the code. But I will take it back as soon as you edit the answer. – Deepak Sharma Jan 21 '19 at 09:48
Please update the question with you final screen you are trying to achieve. So that we can help. I didn't understand how iphone 6 ratio related to this question. – Lal Krishna Jan 21 '19 at 09:49

Autolayout programmatic aspect ratio setting

2 Answers2