draw a colored circle in a UITableViewCell

Question

I'm trying to generate a UITableViewCell with a colored circle on the left. My plan is to use UIButton and manipulate its layer's corner radius. However, the colored button never appears.

My xib:

I have an IBOutlet to my ColorHolder UIButton and a variable for its color.

class ColoredCircleCell: UITableViewCell {

    @IBOutlet weak var colorHolder: UIButton!
    @IBOutlet weak var infoRow1: UILabel!
    @IBOutlet weak var infoRow2: UILabel!

    var circleColor: CGColor = UIColor.clear.cgColor 

    override func awakeFromNib() {
        super.awakeFromNib()

        colorHolder.layer.cornerRadius = colorHolder.bounds.size.height / 2
        colorHolder.layer.backgroundColor = circleColor
        colorHolder.clipsToBounds = true
}

In my cellForRowAt indexPath:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CircleCell", for: indexPath) as! ColoredCircleCell

        print(cell.colorHolder.bounds.size.height)

        cell.colorHolder.layer.cornerRadius = cell.colorHolder.bounds.size.height / 2
        cell.colorHolder.layer.backgroundColor = UIColor.red.cgColor

        cell.infoRow1.text = "H1"

        return cell
    }

The console tells me that the size of the cell is 1000. I'm guessing it still has not resized with respect to the row height.

EDIT: I've narrowed down the problem to cell.colorHolder.layer.cornerRadius = cell.colorHolder.bounds.size.height / 2 . The value of cell.colorHolder.bounds.size.height is always 1000. How do I extract the correct value AFTER it has been rendered to the screen?

The output:

How do I add a configurable circle for my UITableViewCell?

Is the size of that button dynamic? Can't you just hardcode the cornerRadius? — almas, Sep 16 '16 at 16:53
yes, the intention is to make the size of the button dynamic. a hardcoded cornerRadius would definitely make my life easier though — meowmeowmeow, Sep 16 '16 at 16:54

score 0 · Answer 1 · answered Sep 16 '16 at 17:22

I think your set colorbutton constraint like topspace to superview and bottomspace to superView.

If that's the case than remove bottomspace to superView and add height constraint.

than do this

cell.colorHolder.layer.cornerRadius = cell.colorHolder.bounds.size.height / 2
cell.colorHolder.clipToBounds = true

and it should display as circle.

Hope this will solve your problem

score 0 · Answer 2 · answered Sep 16 '16 at 17:25

0

Just override layoutSubviews and set your corner radius there.

- (void)layoutSubviews {
   [super layoutSubviews];
   self.colorHolder.layer.cornerRadius = self.colorHolder.bounds.size.height / 2;
}

answered Sep 16 '16 at 17:25

almas

7,090
7
33
49

tried it and got the same problem. I added a println statement above the line for cornerRadius print("the height: \(colorHolder.bounds.size.height)"). i kept getting height: 1000. thanks for suggesting it though – meowmeowmeow Sep 16 '16 at 17:32
Can you also check the size of the cell in the same place? – almas Sep 16 '16 at 17:35
sure. it's returning 89.95 – meowmeowmeow Sep 16 '16 at 17:40

score 0 · Accepted Answer · answered Sep 26 '16 at 13:52

posting the answer here for completion's sake. I had to add self.layoutIfNeeded() prior to accessing the bounds. This post helped me out.

override func awakeFromNib() {
        super.awakeFromNib()

        self.layoutIfNeeded()   

        colorHolder.layer.cornerRadius = colorHolder.bounds.size.height / 2
        colorHolder.layer.backgroundColor = circleColor
        colorHolder.clipsToBounds = true
}

draw a colored circle in a UITableViewCell

3 Answers3