How do I adjust a label constraint within a custom cell? - ios

Question

I have a table that has custom cells within it. These cells contain an image view and two labels. I have constraints in place to position everything for a typical cell.
Each cell represents either a file or a folder. The layout I have set up is for a file view (two labels are name and detail). When I create the custom cell I change the icon to be a folder and the details label becomes hidden. I then center the name label to make it prettier.
My issue occurs from the reusing of cells. I cannot seem to revert back from the centering of the name label. I have tried a couple different methods of adding this constraint and always seem to be able to have the constraint work the first time, but once a cell is reused I run into issues.
First creation of cell
Issue after cell is reused
One thing I noticed is I only have the issue when a cell is trying to remove the new center constraint (cell goes from folder cell to file cell)
Directory Cell Class
class DirectoryCell: UITableViewCell {
#IBOutlet weak var directoryTypeImage: UIImageView!
#IBOutlet weak var directoryNameLabel: UILabel!
#IBOutlet weak var directoryDetailsLabel: UILabel!
var directoryItem: DirectoryItem! {
didSet {
self.updateUI()
}
}
func updateUI() {
let centerConstraint = NSLayoutConstraint(item: directoryNameLabel, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self.contentView, attribute: NSLayoutAttribute.centerY, multiplier: 1.0, constant: 0.0)
let topConstraint = NSLayoutConstraint(item: directoryNameLabel, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: self.contentView, attribute: NSLayoutAttribute.top, multiplier: 1.0, constant: 7.0)
directoryNameLabel.text = directoryItem.name
directoryTypeImage.image = directoryItem.typeIcon
if (directoryItem.type == DirectoryItem.types.FOLDER) {
self.removeConstraint(topConstraint)
self.addConstraint(centerConstraint)
directoryDetailsLabel.isHidden = true
} else {
self.removeConstraint(centerConstraint)
self.addConstraint(topConstraint)
directoryDetailsLabel.text = directoryItem.details
directoryDetailsLabel.isHidden = false
}
}
}
Am I simply applying/removing the constraints wrong or maybe applying/removing them in the incorrect place?
When I walk through the debugger and look at the self.constraints expression, I get no constraints. Where am I misunderstanding the constraints of my custom cell?
TL;DR
Cannot seem remove centering constraint and apply top constraint when a custom cell is reused
EDIT/SOLUTION
For any future people running into this issue, dan's answer below was exactly right. I needed to create a property for each constraint I wanted to apply. Then I remove all of the constraints and apply only the one that I want.
Added to DirectoryCell class
var topConstraint: NSLayoutConstraint {
get {
return NSLayoutConstraint(item: self.directoryNameLabel, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: self.contentView, attribute: NSLayoutAttribute.top, multiplier: 1.0, constant: 7.0)
}
}
var centerConstraint: NSLayoutConstraint {
get {
return NSLayoutConstraint(item: self.directoryNameLabel, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self.contentView, attribute: NSLayoutAttribute.centerY, multiplier: 1.0, constant: 0.0)
}
}
New updateUI()
func updateUI() {
directoryNameLabel.text = directoryItem.name
directoryTypeImage.image = directoryItem.typeIcon
if (directoryItem.type == DirectoryItem.types.FOLDER) {
self.removeConstraints(self.constraints) // Remove all constraints
self.addConstraint(centerConstraint) // Add constraint I want for this "cell type"
directoryDetailsLabel.isHidden = true
} else {
self.removeConstraints(self.constraints)
self.addConstraint(topConstraint)
directoryDetailsLabel.text = directoryItem.details
directoryDetailsLabel.isHidden = false
}
}

Answer 1

You aren't actually removing the constraint that you added the first time updateUI ran, you're creating a new centering constraint which is never added and removing that one. So you have both the center and top constraint on your cell when it is reused and the centering constraint apparently wins the conflict.
You need to create centerConstraint and topConstraint once and store them in properties on your cell and then just add or remove those ones in updateUI.