Corner Radius of View in UITableViewCell Subclass

Question

I am trying to create a round view in my tablevviewcell subclass

i set the cornerRadius to half the width, but the frame is returning 0. so corner radius is not setting correctly.

initialView.autoPinEdgesToSuperviewEdges(with: UIEdgeInsetsMake(5.0, 5.0, 5.0, 0.0), excludingEdge: .trailing)
    initialView.autoMatch(.width, to: .height, of: initialView)
    initialView.layer.cornerRadius = initialView.frame.size.width/2

Thanks

override func layoutSubviews() {
    super.layoutSubviews()

    initialView.layer.cornerRadius = initialView.frame.size.width/2
    print(initialView.frame)

}

Frame is still printing -> (0.0, 0.0, 0.0, 0.0)

override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    contentView.addSubview(initialView)
    contentView.addSubview(nameLabel)
    setupConstraints()
}

override func layoutSubviews() {
    super.layoutSubviews()

    initialView.layer.cornerRadius = initialView.frame.size.width/2
    print(initialView.frame)

}

Answer 1

The way to fix this is to subclass UITableViewCell and put your code into layoutSubviews:

override func layoutSubviews() {
    super.layoutSubviews()

    initialView.layer.cornerRadius = initialView.frame.size.width/2
}

And put the rest of the code in your question in your init() code:

func init() {
    // other stuff...

    setupInitialView()
}

func setupInitialView() {
    initialView.autoPinEdgesToSuperviewEdges(with: UIEdgeInsetsMake(5.0, 5.0, 5.0, 0.0), excludingEdge: .trailing)
    initialView.autoMatch(.width, to: .height, of: initialView)
}

---

My complete (working!) UITableViewCell class is as follows. Instead of using the PureLayout pod I used an extension method that basically does the same thing.

//
//  MyTableViewCell.swift
//  tableviewheader-test
//
//  Created by Forest Kunecke on 3/31/17.
//  Free as in free beer!
//

import UIKit

class MyTableViewCell: UITableViewCell {

    private(set) lazy var initialView: UIView = {
        let initialView = UIView(frame: .zero)
        return initialView
    }()

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        //
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        contentView.addSubview(initialView)

        setupInitialView()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

    func setupInitialView() {
        self.contentView.addConstraintsWithFormat("V:|-5-[v0]-5-|", views: initialView)
        self.contentView.addConstraintsWithFormat("H:|-5-[v0]-0-|", views: initialView)

        initialView.backgroundColor = UIColor.red
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        self.initialView.layer.cornerRadius = frame.size.width/2
    }
}

extension UIView {
    func addConstraintsWithFormat(_ format: String, views: UIView...) {
        var viewsDictionary = [String: UIView]()

        for (index, view) in views.enumerated() {
            let key = "v\(index)"
            view.translatesAutoresizingMaskIntoConstraints = false
            viewsDictionary[key] = view
        }
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewsDictionary))
    }
}

Here's a screenshot (with the UITableViewController returning view.frame.width for heightForRowAt):

If you want I can also post the UITableViewController I used to test this code.

Answer 2

You are doing the interaction before the view is laid out. You need to subclass the UITableViewCell and override layoutSubviews like so:

class CustomCell: UITableViewCell {
    override func layoutSubviews() {
        super.layoutSubviews()
        initialView.layer.cornerRadius = initialView.frame.size.width/2
    }
}