UITableViewCell with clear background and colored contentView - ios

Question

I want to create a "fake" spacing around my UITableViewCell and I'm doing so by inset-ing the contentView's frame by 10 each [I actually am adding a custom view on top of the contentView and inset it by 10]. It looks like the contentView is the only visible view. This looks really well and I'm also setting and adjusting the frame of selectedBackgroundView for my cell so that selecting will only select the "visible" area.
Now the issue of doing so is the following:
If I select a cell, it flashes with UIColor.darkGray as specified by my selectedBackgroundView.
Then for a short period of time within the animation my cell background is invisible entirely before it flashes back to how it was.
This way the animation does not look fluent.
This applies to the content view:
Background Color
darkGray (selectedBackgroundView)
Clear Color
Background Color
Does anybody know if I can fix this behaviour while keeping selection to be a thing?
I created a gif out of the animation: https://imgur.com/vkfA62w
Here is my code:
class BasicTableViewCell : UITableViewCell {
public var basicContentView: UIView = UIView(frame: .zero)
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: .default, reuseIdentifier: reuseIdentifier)
self.tintColor = UIColor.white
self.contentView.backgroundColor = UIColor.clear
self.basicContentView.backgroundColor = UIColor.barTintColor
self.basicContentView.layer.masksToBounds = false
self.basicContentView.layer.cornerRadius = 10.0
self.basicContentView.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(self.basicContentView)
self.basicContentView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 10.0).isActive = true
self.basicContentView.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: -10.0).isActive = true
self.basicContentView.topAnchor.constraint(equalTo: self.contentView.topAnchor, constant: 10.0).isActive = true
let bottomConstraint = self.basicContentView.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor, constant: -10.0)
bottomConstraint.priority = UILayoutPriority(999)
bottomConstraint.isActive = true
let selectedView: UIView = UIView(frame: .zero)
selectedView.backgroundColor = UIColor.darkGray
selectedView.layer.cornerRadius = 10.0
selectedView.layer.masksToBounds = false
self.selectedBackgroundView = selectedView
}
override func layoutSubviews() {
super.layoutSubviews()
// only for selectedBackgroundView, contentView raised other issues
let contentViewFrame = self.contentView.frame
let insetContentViewFrame = contentViewFrame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
self.selectedBackgroundView?.frame = insetContentViewFrame
}
}
I already know what the issue is, based on: Apples explanation
selectedBackgroundView is added to contentView and then fades away before being removed from the contentView and then basicContentView is suddenly visible again which causes the bug.
Here is my fix
override func setSelected(_ selected: Bool, animated: Bool) {
if selected {
self.basicSelectedBackgroundView.alpha = 1.0
self.basicContentView.insertSubview(self.basicSelectedBackgroundView, at: 0)
} else {
guard self.basicSelectedBackgroundView.superview != nil else {
return
}
if animated {
UIView.animate(withDuration: 0.5, delay: 0.0, options: .allowUserInteraction, animations: {
self.basicSelectedBackgroundView.alpha = 0.0
}) { (finished: Bool) in
if finished {
self.basicSelectedBackgroundView.removeFromSuperview()
}
}
} else {
self.basicSelectedBackgroundView.alpha = 0.0
self.basicSelectedBackgroundView.removeFromSuperview()
}
}
}
I am overriding setSelected and animate it myself.

Answer 1

You probably want to override setSelected in your cell. For example:
override func setSelected(_ selected: Bool, animated: Bool) {
//If we don't get the contentView's backgroundColor here and then reset it after the call to super.setSelected, the contentView's backgroundColor will "disappear" when the cell is selected
let contentViewColor = contentView.backgroundColor
super.setSelected(selected, animated: animated)
contentView.backgroundColor = contentViewColor
}
When a cell is selected, the backgroundColor properties for ALL subviews of the cell are set to the selection color, which overwrites any backgroundColor properties you have set yourself. So you might need to manually set the backgroundColor of your contentView here to get the behaviour you want.