David David - 1 month ago 15
iOS Question

UILabel has internal padding from programmatic constraints

So, I don't know why this is happening, but here is a pic depicting it.

enter image description here

If you look at the UILabel with green background, there is padding above and below it, but I don't know why that is.

This is how I create it:

var bodyLabel: ActiveLabel = {
let label = ActiveLabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.isUserInteractionEnabled = false
label.backgroundColor = .green
label.numberOfLines = 0
label.textColor = .darkGray
label.font = UIFont.systemFont(ofSize: MessageTableViewCell.defaultFontSize())

label.enabledTypes = [.mention]
label.mentionColor = .gray //Figure this out

return label
}()


The fact that it is an ActiveLabel is not the reason why this is happening.

Here are all the constraints it is involved in:

self.contentView.addSubview(self.thumbnailView)
self.contentView.addSubview(self.titleLabel)
self.contentView.addSubview(self.bodyLabel)
self.contentView.addSubview(self.likeView)

let views = ["thumbnailView" : self.thumbnailView,
"titleLabel" : self.titleLabel,
"bodyLabel" : self.bodyLabel,
"likeView" : self.likeView] as [String : Any]

let metrics = ["tumbSize" : Constants.kMessageTableViewCellAvatarHeight,
"padding" : 15,
"right" : 10,
"left" : 5]

self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-left-[thumbnailView(tumbSize)]-right-[titleLabel(>=0)]-right-|", options: [], metrics: metrics, views: views))
self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-left-[thumbnailView(tumbSize)]-right-[bodyLabel(>=0)]-right-|", options: [], metrics: metrics, views: views))
self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-right-[thumbnailView(tumbSize)]-(>=0)-|", options: [], metrics: metrics, views: views))

if self.reuseIdentifier == Constants.MessageCellIdentifier {
self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-right-[titleLabel(20)]-left-[bodyLabel(>=0@999)]-left-|", options: [], metrics: metrics, views: views))
} else {
self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[titleLabel]|", options: [], metrics: metrics, views: views))
}


I noticed that when I remove the constraint in the if statement, that obviously the views get into awkward positions, but I do notice that it no longer has that green padding. I'm really not sure what is causing this padding.

This is what the code is based on.

Answer

Well, you're adding that padding by wrapping that body label with the left value.

So instead of: V:|-right-[titleLabel(20)]-left-[bodyLabel(>=0@999)]-left-|

Do something like: V:|-right-[titleLabel(20)][bodyLabel(>=0@999)]|

That will remove both top and bottom padding. I hope that helps!