CODEWITHSUNDEEP
swiftuitableviewconstraints
AJ Gottes
AJ Gottes

Reputation: 411

Swift - placing TableView below another view with constraints programmatically

I am using Swift 4.2.

I am trying to get a tableview below another view, for example - label.

What I want is something like this:

+----------------------------------------+
|        label                           |
+----------------------------------------+

+----------------------------------------+
|                                        |
|                                        |
|                                        |
|                                        |
|        tableView                       |
|                                        |
|                                        |
|                                        |
|                                        |
+----------------------------------------+

// label constraints
label.translatesAutoresizingMaskIntoConstraints = false
let label_Leading_Constraint = NSLayoutConstraint(item: label, attribute: NSLayoutConstraint.Attribute.leading, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.leading, multiplier: 1, constant: 0)
let label_Trailing_Constraint = NSLayoutConstraint(item: label, attribute: NSLayoutConstraint.Attribute.trailing, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.trailing, multiplier: 1, constant: 0)
let label_Top_Constraint = NSLayoutConstraint(item: label, attribute: NSLayoutConstraint.Attribute.top, relatedBy: NSLayoutConstraint.Relation.equal, toItem: previous_label, attribute: NSLayoutConstraint.Attribute.bottom, multiplier: 1, constant: 10)
NSLayoutConstraint.activate([label_Leading_Constraint, label_Trailing_Constraint, label_Top_Constraint])


var tableView = UITableView()
tableView.translatesAutoresizingMaskIntoConstraints = false      
tableView.dataSource = self
tableView.delegate = self
tableView.backgroundColor = UIColor.white

tableView.register(UITableViewCell.self, forCellReuseIdentifier: "mycell")

self.view.addSubview(tableView)

tableView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 20.0).isActive = true
tableView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 20.0).isActive = true
tableView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -20.0).isActive = true
tableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -20.0).isActive = true

When I use the above code, the tableview is shown. The tableview constraints are relatively to the ALL view (self.view) which is not what I want because, I want the tableview to appear below the label.

If I change this code to my desired code (the top of the tableview should be 20 below the label view):

tableView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 20.0).isActive = true
tableView.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 20).isActive = true
tableView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -20.0).isActive = true
tableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -20.0).isActive = true

I get the label view messed up at the bottom of the screen and the tableview is not showing at all.

Please don't suggest a table header of something like that. You can assume I have some more views in the top section of the screen and I simply want the tableview to be shown below them.

Also, please don't suggest the storyboard. I am trying to do it all programmatically.

What am I missing?

Thanks!

Upvotes: 1

Views: 1965

Answers (1)

Crocobag
Crocobag

Reputation: 2340

My guess would be that your UILabels constraint are not set properly.

for instance if you have set label.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true this would lead to the "messed up" result you are getting.

The labels anchors should be : 

label.translatesAutoresizingMaskIntoConstraints = false      
label.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 20.0).isActive = true
label.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 20.0).isActive = true
label.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -20.0).isActive = true

and nothing more

Upvotes: 1

Related Questions