1

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)

3
  • Welcome to SO. Have you checked all the similiar questions already before asking? Like this for example that have massive answers and explanations: stackoverflow.com/questions/26180822/…
    – user5890979
    Feb 18, 2017 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, 2017 at 7:16
  • try adding view.layoutIfNeeded after adding the constraints if none of the other solutions work for you or the multiple answers here.
    – user5890979
    Feb 19, 2017 at 7:31

2 Answers 2

3

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
1
  • 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.
    – user5890979
    Feb 18, 2017 at 17:23
0

You have two issues:

  1. Do not set self.view.translatesAutoresizingMaskIntoConstraints = false. You only need to set translatesAutoresizingMaskIntoConstraints for the subview you are adding.

  2. 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.

2
  • testView still not show on my screen after I removed self.view.translatesAutoresizingMaskIntoConstraints = false and changed .greaterThanOrEqual to .equal
    – kk777
    Feb 19, 2017 at 7: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, 2017 at 11:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.