Rounded corners on custom UITableViewCell image - ios

Question

I'm trying to apply a radius to the corner of the images showed in a table to make them look like a circle. The problem is that the images are located via autolayout, so the final size is not calculated till the view has layout all its subviews, and I need to code the circle mask after that.
The solution that came to me was to write the code inside the method tableView(... willDisplayCell ...), or inside the methods didMoveToSuperview() and layoutSubviews() on the custom UITableViewCell subclass. I have seen this solutions on some questions of this forum, but no one of them are working.
Here is the code with one of those methods commented:
import UIKit
struct Contact {
var name: String
var image: UIImage
}
class ActiveChatsController: UITableViewController {
let contacts = [
Contact(name: "Alex", image: UIImage(named: "Alex")!),
Contact(name: "Puto Albert", image: UIImage(named: "Albert")!),
Contact(name: "Golfo-man", image: UIImage(named: "Pablo")!)
]
override func viewDidLoad() {
self.navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: AppDesign.color(withIntensity: 6)]
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return contacts.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = Bundle.main.loadNibNamed("OpenedChatCell", owner: self, options: nil)?.first as! OpenedChatCell
cell.contactImage.image = contacts[indexPath.row].image
cell.contactName.text = contacts[indexPath.row].name
return cell
}
}
And the custom cell subclass is got from a XIB file:
import UIKit
class OpenedChatCell: UITableViewCell {
#IBOutlet weak var contactImage: UIImageView!
#IBOutlet weak var contactName: UILabel!
/*
override func didMoveToSuperview() {
self.contactImage.layer.cornerRadius = self.contactImage.frame.width / 2
self.contactImage.clipsToBounds = true
}
*/
}
If I run these codes on the simulator, I get this:
But if I delete the comments on the didMoveToSuperview() method and let it change the radius I get this:
After this, I wrote inside didMoveToSuperview():
print(self.contactImage.frame.height)
And it shows a height of 177.0, so I don't know where the error may be.

Answer 1

The problem might be that the table view itself is being created early, before the final setting of the frame of the image view. Thus, all your attempts to set the rounded corners are also happening too early, because they all depend on the initial formation of the table view.
The solution, in that case, would be as follows:
var didLayout = false
override func viewDidLayoutSubviews() {
if !self.didLayout {
self.didLayout = true // only need to do this once
self.tableView.reloadData()
}
}
If you have moved your code into this delegate method:
func tableView(UITableView, willDisplay cell: UITableViewCell,
forRowAt indexPath: IndexPath)
...that method will now run again for all the cells of the table, and the image view frame will be correct and the rounded corners will come out correctly.

Answer 2

Try to ovveride layoutSubviews instead of didMoveToSuperview:
override func layoutSubviews() {
super.layoutSubviews()
self.contactImage.layer.cornerRadius = self.contactImage.frame.width / 2
self.contactImage.clipsToBounds = true
}

Answer 3

Try this out. It may work
import UIKit
class OpenedChatCell: UITableViewCell {
#IBOutlet weak var contactImage: UIImageView!
#IBOutlet weak var contactName: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
setRoundedView(roundedView: customImageView)
}
func setRoundedView (roundedView:UIView) {
let saveCenter = roundedView.center
let newFrame:CGRect = CGRect(origin: CGPoint(x: roundedView.frame.origin.x,y :roundedView.frame.origin.y), size: CGSize(width: roundedView.frame.size.width, height: roundedView.frame.size.height))
roundedView.layer.cornerRadius = roundedView.frame.height/2
roundedView.frame = newFrame;
roundedView.center = saveCenter
roundedView.clipsToBounds = true
}
}

Answer 4

If you already know the size of your image and don't need to determine it on the fly (oftentimes this is the case with images in a table view), you can just try it like this:
let imageHeight = CGFloat(100)
imageView.layer.masksToBounds = true
imageView.layer.cornerRadious = imageHeight / 2