Swift: Pixelated Text In UITableViewCell

Question

I am changing the UILabel 's color, and text in a reusable prototype cell in my UITableView . For one specific cell (one where I am getting information from a database) the text becomes distorted and pixelated. I suspect that this has something to do with the table cell being loaded multiple times. Here's my code that calls the cell to be displayed:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
{
    let event = events[indexPath.row]
    let cell = tableView.dequeueReusableCell(withIdentifier: "eventCell") as! eventCell
    cell.setEvent(event: event)
    return cell
}
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
    //This code right here is mostly just for rounded edges but maybe the issue is here?

    let verticalPadding: CGFloat = 15
    let maskLayer = CALayer()
    maskLayer.cornerRadius = 10
    maskLayer.backgroundColor = UIColor.black.cgColor
    maskLayer.frame = CGRect(x: cell.bounds.origin.x, y: cell.bounds.origin.y, width: cell.bounds.width, height: cell.bounds.height).insetBy(dx: 0, dy: verticalPadding/2)
    cell.layer.mask = maskLayer
}

and then here is the code in the eventCell class, which houses all the directions for how to display the code:

@IBOutlet weak var dateLabel: UILabel!
@IBOutlet weak var titleLabel: UILabel!
// and a few more outlets
func setEvent(event: event) {
    dateLabel.text = event.date
    titleLabel.text = event.title
    //and a few more of those^^ you get the idea
    db.collection("events").document(event.docID).getDocument { (document, error) in
        if let document = document, document.exists {
            let chairArray = document.data()!["chairPeople"] as! Array<String>
            for person in chairArray {
                if (person == event.email) {
                    self.eventInfoButton.backgroundColor = UIColor(white: 50, alpha: 1)
                    self.dateLabel.textColor = UIColor(white: 50, alpha: 1)
                    self.titleLabel.textColor = UIColor(white: 50, alpha: 1)
                    self.descriptionLabel.textColor = UIColor(white: 50, alpha: 1)
                    self.eventInfoButton.setTitle("Chairsperson tools", for: .normal)
                    self.contentView.backgroundColor = UIColor(red:0.26, green:0.55, blue:0.79, alpha:1.0)

                }
            }
        }
    }
 // This code right here ^^ grabs from the database and modifies the look if a conditon is met.  If the condition is met, the text becomes distorted
}

Here is a screenshot of the problem. As you see the Cells which are grey have no issue but the blue one is pixilated (that's the one that's getting work done based on information from the database).

Answer 1

I would say that it is your maskLayer, as you have mentioned in your comments. I suspect the layers size is staying a fixed size even when the cell grows or shrinks.

I would use a view and not a layer here, and make this new View your new contentView, this will also help if you decide to add a shadow to your rounded contentView.

cell.backgroundColor = .clear
cell.contentView.backgroundColor = .clear

let shapeContentView = UIView( frame:cell.bounds.insetBy( dx:0.0, dy:7.5))
shapeContentView.masksToBounds = true
shapeContentView.cornerRadius = 10.0
shapeContentView.backgroundColor = .blue
cell.contentView.addSubview( shapeContentView)

Add all of your other labels and buttons to shapeContentView