CODEWITHSUNDEEP
iosswift
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42490

How to set cornerRadius on a imageview inside a table view cell

I created a customized table view cell and added a UIImageView on that cell. I want to make the image view to be circular, see below code. There is a problem that when the table is showing the first time, the circularImageView.bounds value is not correct which makes the image not circular. After refresh the table view the image looks correct. How to handle the first time loading of the table view?

class CircularTableViewCell: UITableViewCell {
   @IBOutlet weak var circularImageView: UIImageView!

   override func layoutSubviews() {
      circularImageView.layer.cornerRadius =      
         circularImageView.bounds.height / 2
      circularImageView.clipsToBounds = true
      circularImageView.layer.masksToBounds = true
   }

I have tried to set this value on cellForRowAtIndexpath. But the circularImageView.bounds.height is not constrained when the first time showing this cell

Upvotes: 0

Views: 3094

Answers (9)

Muaz Talha BULUT
Muaz Talha BULUT

Reputation: 11

I tried them all but it didn't work. Then I realized that the size of the image I set to the imageView was too big and when I tried another image I was able to give a radius.

Upvotes: 0

Tung Dang
Tung Dang

Reputation: 266

let cellHeight: CGFloat = 100
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return cellHeight
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tbvCustom.dequeueReusableCell(withIdentifier: "CustomeCell", for: indexPath) as? CustomeCell else {return UITableViewCell()}
    cell.imvThumbnail.layer.cornerRadius = (cellHeight - cell.layoutMargins.top * 2)/2 }

Upvotes: 0

Mohamed Elrais
Mohamed Elrais

Reputation: 41

// ===========================================================

You have tow options:

1) You can use this function inside your UITableViewCellClass:

override func draw(_ rect: CGRect) {
    super.draw(rect)
    circularImageView.layer.cornerRadius = circularImageView.frame.width / 2
}

2) You can add fixed width (ex: 50) and do the following at awakeFromNib function:

circularImageView.layer.cornerRadius = 50 / 2

// ===========================================================

Upvotes: 4

Swasidhant
Swasidhant

Reputation: 1251

Check the console logs. In my case, when I got a similar error, I got something like this in the console:-

[LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want. 
Try this: 
    (1) look at each constraint and try to figure out which you don't expect; 
    (2) find the code that added the unwanted constraint or constraints and fix it. 


(
    "<NSLayoutConstraint:0x60000009cd90 UIImageView:0x7fe661539400.height == 46   (active)>",
    "<NSLayoutConstraint:0x60000009ce30 V:|-(5)-[UIImageView:0x7fe661539400]   (active, names: '|':UITableViewCellContentView:0x7fe661531100 )>",
    "<NSLayoutConstraint:0x60000009ce80 V:[UIImageView:0x7fe661539400]-(5)-|   (active, names: '|':UITableViewCellContentView:0x7fe661531100 )>",
    "<NSLayoutConstraint:0x60000009d6f0 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x7fe661531100.height == 43.5   (active)>"
)

Here if you notice the last constraint (UIView-Encapsulated-Layout-Height), you will see that the system takes a different tableview cell height on its own. So initially your imageView height is what you set in constraints (for me it is 46.) and hence imageView.bounds.height/2 becomes 23. However when the table is shown, the system gives it a different height (43.5) as is mentioned in the last constraint.

Since my imageview also has top and bottom constraint to the cell (5 to top and 5 to bottom), it gets resized to:43.5 - 5(top) - 5(bottom) = 33.5

So now the system is applying a corner radius of 23 on an image of size 33.5, which is what causes the non circular image for the first time. For the second time onwards, the image size is 33.5 and we get imageView.bounds.height/2 = 33.5/2 = 16.75. Hence it works from the second time onwards.

To make sure the tableview does not apply its own cell height when you have given image height constraint and top and bottom constraints, we can do something like this in code.

    self.tblDemo.estimatedRowHeight = 70.0
    self.tblDemo.rowHeight = UITableViewAutomaticDimension

This should fix your issue and give you circular images for the first time too.

Upvotes: 0

ios_dev
ios_dev

Reputation: 1035

circularImageView.layer.cornerRadius = circularImageView.frame.size.width / 2
circularImageView.layer.masksToBounds = true
circularImageView.clipsToBounds = true

please use this code

Upvotes: 0

Laffen
Laffen

Reputation: 2771

Add 

circularImageView.layer.masksToBounds = true

to your logic.

Take a look at the docs: masksToBounds

Upvotes: 0

shalu tyagi
shalu tyagi

Reputation: 148

set corner Radius in awakeFromNib method.

override func awakeFromNib() {
 super.awakeFromNib()

  circularImageView.layer.cornerRadius = circularImageView.bounds.height / 2

  circularImageView.clipsToBounds = true

}

Upvotes: 1

Pitambar Indoria
Pitambar Indoria

Reputation: 380

Image should be equal height and equal width than you can create circular image.

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCellWithIdentifier("CustomCellIdentifier", forIndexPath: indexPath) as! CustomCellIdentifier
cell.yourImageView.layer.cornerRadius = cell.yourImageView.frame.size.height /2;
cell.yourImageView.layer.clipToBounds = true;
return cell;

}

I think it would be help full for you.If you have any issue plz let me know.

Upvotes: 0

Ketan Parmar
Ketan Parmar

Reputation: 27428

You can set corner radius in cellForRowAtIndexpath method or you can use awakeFromNib method of custom cell class which is subclass of UITableViewCell.

Hope this will help :)

Upvotes: 1

Related Questions