How to add constraint with dynamic width programmatically

Question

I'm new to iOS development. I want to build layout without storyboard or xib/nib. So I am trying to add constraints programmatically. I have searched some tutorials about add constraints programmatically. But the view can't show correctly.

I'm trying this code in my ViewController class:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    let testView = UIView()
    self.view.addSubview(testView)

    // Add Constraints
    self.view.translatesAutoresizingMaskIntoConstraints = false
    testView.translatesAutoresizingMaskIntoConstraints = false

    let top = NSLayoutConstraint(item: testView, attribute: .top, relatedBy: .equal
        , toItem: self.view, attribute: .top, multiplier: 1, constant: 50.0)
    let bottom = NSLayoutConstraint(item: testView, attribute: .bottom, relatedBy: .equal
        , toItem: self.view, attribute: .bottom, multiplier: 1, constant: -50.0)
    let leading = NSLayoutConstraint(item: testView, attribute: .leading, relatedBy: .greaterThanOrEqual, toItem: self.view, attribute: .leading, multiplier: 1, constant: 50.0)
    let trailing = NSLayoutConstraint(item: testView, attribute: .trailing, relatedBy: .greaterThanOrEqual, toItem: self.view, attribute: .trailing, multiplier: 1, constant: -50.0)
    self.view.addConstraints([top, bottom, leading, trailing])
}

Generally, they don't need to define the size of view or constraints about width and height in tutorials. But the views can be shown on their tutorial. In my case, my testView can't show it in the app even top, bottom, leading and trailing constraints have been set. Am I missed something? What's the problem?

one of the tutorials: http://www.knowstack.com/swift-nslayoutconstraint-programatically-sample-code/

Edit: Let's me explain more. I want to create a UIView that suitable for universal device. The UIView has top, bottom, leading and trailing constraints with constant: 10. So, I don't need to set size of UIView.

Expected Result (I am using draw tool to simulate the result)

Welcome to SO. Have you checked all the similiar questions already before asking? Like this for example that have massive answers and explanations: http://stackoverflow.com/questions/26180822/swift-adding-constraints-programmatically — , Feb 18 '17 at 16:54
I had checked this question before. The size of `UIView` had been defined to width: 100, height: 100 in the highest rate answer. I have updated my question. Please check, thanks. — kk777, Feb 19 '17 at 07:16
try adding view.layoutIfNeeded after adding the constraints if none of the other solutions work for you or the multiple answers here. — , Feb 19 '17 at 07:31

score 3 · Answer 1 · answered Feb 18 '17 at 16:59

This is an example of a view constraint to the bottom of the screen with height equal to 80:

var yourView = UIView()
yourView.translateAutoresizingMaskIntoConstraints = false
yourSuperView.addSubview(yourView)

// Pin the leading edge of yourView  to the leading edge of the main view
yourView.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true

// Pin the trailing edge of yourView to the leading trailing edge
yourView.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true

// Pin the bottomedge of yourView to the margin's leading edge
yourView .bottomAnchor.constraintEqualToAnchor(view.bottomAnchor).active = true

// The height of your view
yourView.heightAnchor.constraintEqualToConstant(80).active = true

Avoid posting exact copies of your answer to multiple questions. You can post a comment and link to your answer if you feel that the question is a duplicate you can also flag it. — , Feb 18 '17 at 17:23

vacawama · Answer 2 · 2017-02-18T17:17:42.403

0

You have two issues:

Do not set self.view.translatesAutoresizingMaskIntoConstraints = false. You only need to set translatesAutoresizingMaskIntoConstraints for the subview you are adding.
You are using .greaterThanOrEqual constraints instead of .equal constraints. The problem with that is that leaves a lot of wiggle room and you are getting values that cause your testView to have 0 width. If you change to .equal that will properly constrain the values.

edited Feb 18 '17 at 17:17

answered Feb 18 '17 at 17:12

vacawama

150,663
30
266
294

`testView` still not show on my screen after I removed `self.view.translatesAutoresizingMaskIntoConstraints = false` and changed `.greaterThanOrEqual` to `.equal` – kk777 Feb 19 '17 at 07:19
Append your updated code to the question, but don't remove the original code. Did you change both .greaterThanOrEquals to .equal ? – vacawama Feb 19 '17 at 11:53

How to add constraint with dynamic width programmatically

2 Answers2