Rounded corners clipped in UIImageView

user_7091260 0
Viewed 2119

I am trying to round the corners on my UIImageView in tableViewCells, however, for some reason, they are clipped. I have tried this: 

cell.characterThumbnail.layer.masksToBounds = true
cell.characterThumbnail.layer.cornerRadius = 15

and this is the result I get:

![Screenshot showing clipped rounded corners of UIImageView

If I use the debug 3D viewer I get the frame is larger than I've set (I want 84 * 84 but it shows 84 * 110). Shown here:

Screenshot showing debug frame at 84 * 110

Why are there different sizes? And why are the rounded corners clipped? I have to point out that the image in the UIImageView is downloaded from an URL for each thumbnail.

Any help on this matter is much appreciated. It has bugged me for a week lol.

P.S. I forgot to mention that I've read almost every single "rounded corner" question here on SO and elsewhere on the internet, but no mention of clipped corners. Also, I have thought about rounding the actual image before displaying it in the UIImageView, but that makes the tableView scrolling jerky.

Edit: Whole project at https://github.com/Aecasorg/WoWilvlChecker

swift xcode ios
6 Answers

I suspect your image views are set to 'aspectFit', not aspectFill:

enter image description here

user_99722500

You have to set clipsToBounds true and give it a desired radius. 

cell.image.contentMode = .ScaleAspectFill
cell.image.layer.cornerRadius = 10
cell.image.clipsToBounds = true

//Use this to add border 

cell.image.layer.borderWidth = 3
cell.image.layer.borderColor = UIColor.whiteColor().CGColor
user_22754390

The problem what see is that round corner is getting drawn on 84X110 and not 84X84. That's why it looks strange.

Please call sizeToFit() (this resizes and moves the receiver view so it just encloses its subviews.).

cell.characterThumbnail.sizeToFit()
cell.characterThumbnail.clipsToBound = true

just before 

cell.characterThumbnail.layer.masksToBounds = true
cell.characterThumbnail.layer.cornerRadius = 15

However, if you want to keep thumbnail-view fixed 84X84 and resize the image then you need to set aspectFill. And in the storyboard of (WoWilvlChecker) fix the width and height of the view to 84X84

Also I think cornerRadius not needed to be 15. A value like 3-5 should be sufficient.

user_82385120

I checked your repo.

Remove centerY constraint, it seems centerY is causing this "stretched height" problem.

If you want to make imageView's Size applied,

then set width, height, (centerX, CenterY) or (vertical one, horizontal one)

user_15605150

Project has problems with layout constraints and content mode in the imageView.
Just add height constraint for the imageView and change content mode to Aspect fill.
Also I recommend to use smaller corner radius, for example 5.0. You can exam my changes in the pull request.

user_11559480

It is all due to constraints. All I needed was to get rid of the "Leading Space to: Superview" and "Bottom View to: Superview" constraints I had set up and add an "Align Center Y to: Superview" and that sorted it. Thanks to everyone for responses and suggestions!

user_70912600
Related