How to center table footer view in container programmatically using NSLayoutConstraint?

I am building a screen for an app which has favorites. This screen will display the list of items that a user has favorited. This list is going to be displayed in a table view, pretty vanilla stuff.

I am trying to add a little code for the empty state of the list, when no favorites have been added yet. I'd like to put a UIView in the tableFooter and then put a UILabel in the center of that view. I want the view to take up all the available space within the screen.

UIView

tableFooter

UILabel

So far this is what I have:

self.tableView.tableFooterView = buildTableViewFooter()


Pretty self-explanatory.

func buildTableViewFooter() -> UIView {
let footer = UIView(frame: self.tableView.frame)
let label = UILabel()
label.text = "Use the heart icon to add favorites"
label.font = UIFont.italicSystemFont(ofSize: 21.0)
label.textColor = UIColor.lightGray
label.textAlignment = .center
label.numberOfLines = 0
let centerHorizontalConstraint = NSLayoutConstraint(
item: label,
attribute: .centerX,
relatedBy: .equal,
toItem: footer,
attribute: .centerX,
multiplier: 1,
constant: 0
)
footer.addSubview(label)
footer.addConstraints([
centerHorizontalConstraint,
])
return footer
}


When I run the app, I can tell that my method is firing and the view is being created successfully. However, I don't see the text anywhere in the screen. The LayoutConstraints engine is trying to be helpful but I'm not quite sure what it's trying to tell me:

LayoutConstraints

[LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
"<NSAutoresizingMaskLayoutConstraint:0x60400028a9b0 h=--& v=--& UILabel:0x7fa8565417d0'Use the heart icon to add...'.midX == 0 (active)>",
"<NSLayoutConstraint:0x604000290f90 UILabel:0x7fa8565417d0'Use the heart icon to add...'.centerX == UIView:0x7fa856514e60.centerX (active)>",
"<NSAutoresizingMaskLayoutConstraint:0x6040002931f0 h=--& v=--& 'UIView-Encapsulated-Layout-Left' UIView:0x7fa856514e60.minX == 0 (active, names: '|':UITableView:0x7fa857889a00 )>",
"<NSLayoutConstraint:0x60400028a2d0 'UIView-Encapsulated-Layout-Width' UIView:0x7fa856514e60.width == 375 (active)>"
)

Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x604000290f90 UILabel:0x7fa8565417d0'Use the heart icon to add...'.centerX == UIView:0x7fa856514e60.centerX (active)>


Thanks so much!

1 Answer
1

You need to also add y constraint like

let topConstraint = NSLayoutConstraint(
item: label,
attribute: .top,
relatedBy: .equal,
toItem: footer,
attribute: .top,
multiplier: 1,
constant: 10
)


and set this for the label

label.translatesAutoresizingMaskIntoConstraints = false


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.