Label Background Colour removed when row selected in Swift

Question

I'm experiencing a weird issue with my Swift app. I'm trying to create a UITableViewCell using a custom cell that I have created.

I have an empty label and a text label in the cell. The empty label is simply colored by setting the backgroundColor against some R, G, B colors.

However, when I select and deselect rows in my table, the background color of the label disappears. This happens until I scroll the cell out of view and back into view again, at which it shows me the color again.

Here's a few screenshot to illustrate what's happening:

This is what it looks like before selecting a color

This is what it looks like when I have a color selected - it seems to change the label background color to transparent. It shouldn't do this

This is what it looks like when I have selected a different color - the color remains transparent/white

Of course, I don't want this to happen. The intention was for the label color to remain the same.

Here's my code for cellForRowAtIndexPath

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! ScenesTableCell
    cell.sceneNameLabel.text = scenesArr[indexPath.row].sceneName
    let red = scenesArr[indexPath.row].sceneCol[0]
    let green = scenesArr[indexPath.row].sceneCol[1]
    let blue = scenesArr[indexPath.row].sceneCol[2]
    let brightness = scenesArr[indexPath.row].sceneBrightnessMultiplier
    cell.colourIndicatorLabel.layer.backgroundColor = UIColor(red: CGFloat(red), green: CGFloat(green), blue: CGFloat(blue), alpha: CGFloat(brightness)).CGColor
    cell.colourIndicatorLabel.layer.cornerRadius = 5
    cell.colourIndicatorLabel.layer.borderWidth = 1
    cell.colourIndicatorLabel.layer.borderColor = UIColor(red: 77.0/255.0, green: 146.0/255.0, blue: 203.0/255.0, alpha: 1.0).CGColor
}

Please note that I have tried the following line of code to change the backgroundColor too, however the same thing happens, but it fills outside of the rounded borders:

cell.colourIndicatorLabel.backgroundColor = UIColor(red: CGFloat(red), green: CGFloat(green), blue: CGFloat(blue), alpha: CGFloat(brightness))

I really appreciate some help here! I know I'm not very good at asking questions on SO, so if you have any questions, please ask! ;)

Answer 1

iOS clears the background colour of all cell subviews when a cell is selected. You can avoid this by overriding the setSelected method on your UITableViewCell subclass:

extension ScenesTableCell {
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        self.colourIndicatorLabel.backgroundColor = .blue // Set with the color you need
    }
}

In order to use rounded corners and UIView.backgroundColor without overflow, you can set cell.colourIndicatorLabel.clipsToBounds = true when you dequeue the cell or in the cell subclass.