How to set UIImageView with rounded corners for aspect matching mode

Question

I usually use the following code to set rounded corners.

imageView.layer.cornerRadius = 10 

It works if imageView is set to Fill Aspect.

But when the imageView parameter is set to Aspect Fit mode, and the ratio between the image and the image is different. The effect of rounded corners cannot tell.

The background color is set to green to show rounded corners.

Is there a way to set the “real part of the image” to rounded corners.

Thank you in advance for your answers.

Answer 1

Use this extension for UIImageView:

 extension UIImageView { func roundCornersForAspectFit(radius: CGFloat) { if let image = self.image { //calculate drawingRect let boundsScale = self.bounds.size.width / self.bounds.size.height let imageScale = image.size.width / image.size.height var drawingRect: CGRect = self.bounds if boundsScale > imageScale { drawingRect.size.width = drawingRect.size.height * imageScale drawingRect.origin.x = (self.bounds.size.width - drawingRect.size.width) / 2 } else { drawingRect.size.height = drawingRect.size.width / imageScale drawingRect.origin.y = (self.bounds.size.height - drawingRect.size.height) / 2 } let path = UIBezierPath(roundedRect: drawingRect, cornerRadius: radius) let mask = CAShapeLayer() mask.path = path.cgPath self.layer.mask = mask } } } 

Answer 2

Swift 3 version of a useful, accepted answer here!

 extension UIImageView { func roundCornersForAspectFit(radius: CGFloat) { if let image = self.image { //calculate drawingRect let boundsScale = self.bounds.size.width / self.bounds.size.height let imageScale = image.size.width / image.size.height var drawingRect : CGRect = self.bounds if boundsScale > imageScale { drawingRect.size.width = drawingRect.size.height * imageScale drawingRect.origin.x = (self.bounds.size.width - drawingRect.size.width) / 2 }else { drawingRect.size.height = drawingRect.size.width / imageScale drawingRect.origin.y = (self.bounds.size.height - drawingRect.size.height) / 2 } let path = UIBezierPath(roundedRect: drawingRect, cornerRadius: radius) let mask = CAShapeLayer() mask.path = path.cgPath self.layer.mask = mask } } } 

Answer 3

Try it, this may help you:

 import UIKit class ViewController: UIViewController{ @IBOutlet weak var myImageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. myImageView.contentMode = UIViewContentMode.ScaleAspectFit myImageView.clipsToBounds = true //myImageView.layer.cornerRadius = 10.0 myImageView.layer.masksToBounds = true let simpleImage = UIImage(named:"ipad5_einladung.jpg") let corneredImage = generateRoundCornerImage(simpleImage!, radius: 10) //Set cornered Image myImageView.image = corneredImage; } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func generateRoundCornerImage(image : UIImage , radius : CGFloat) -> UIImage { let imageLayer = CALayer() imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height) imageLayer.contents = image.CGImage imageLayer.masksToBounds = true imageLayer.cornerRadius = radius UIGraphicsBeginImageContext(image.size) imageLayer.renderInContext(UIGraphicsGetCurrentContext()) let roundedImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return roundedImage } } 

Answer 4

First you need to set the width and height of the same value. Then set the image properties as follows:

 imgProfile_Pic.layer.cornerRadius = cell.imgProfile_Pic.frame.size.height / 2 imgProfile_Pic.layer.borderWidth = 3.0 imgProfile_Pic.layer.borderColor = UIColor.white.cgColor imgProfile_Pic.clipsToBounds = true imgProfile_Pic.layoutIfNeeded() 

Answer 5

This is an accepted answer converted to Objective-C:

 if (self.image) { double boundsScale = self.bounds.size.width / self.bounds.size.height; double imageScale = self.image.size.width / self.image.size.height; CGRect drawingRect = self.bounds; if (boundsScale > imageScale) { drawingRect.size.width = drawingRect.size.height * imageScale; drawingRect.origin.x = (self.bounds.size.width - drawingRect.size.width) / 2; } else { drawingRect.size.height = drawingRect.size.width / imageScale; drawingRect.origin.y = (self.bounds.size.height - drawingRect.size.height) / 2; } UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:drawingRect cornerRadius:cornerRadius]; CAShapeLayer *mask = [CAShapeLayer new]; [mask setPath:path.CGPath]; [self.layer setMask:mask]; } 

Just put it in the category for UIImageView.

Answer 6

Swift 5

The accepted answer created by Arun Ammann is incorrect. We must offset the resulting rectangle using this path using the radius:

 import UIKit extension UIImageView { func roundCornersForAspectFit(radius: CGFloat) { guard let image = image else { return } let boundsScale = bounds.size.width / bounds.size.height let imageScale = image.size.width / image.size.height var drawingRect = bounds let boundHeight = bounds.size.height let boundWidth = bounds.size.width if boundsScale > imageScale { let scaledImageWidth = image.size.width * boundHeight / image.size.height drawingRect.size.width = scaledImageWidth - radius * 2.0 drawingRect.origin.x = boundWidth / 2 - scaledImageWidth / 2 + radius drawingRect.size.height = boundHeight - radius * 2.0 drawingRect.origin.y = radius } else { let scaledImageHeight = image.size.height * boundWidth / image.size.width drawingRect.size.height = scaledImageHeight - radius * 2.0 drawingRect.origin.y = boundHeight / 2 - scaledImageHeight / 2 + radius drawingRect.size.width = boundWidth - radius * 2.0 drawingRect.origin.x = radius } let path = UIBezierPath(roundedRect: drawingRect, cornerRadius: radius) let mask = CAShapeLayer() mask.path = path.cgPath layer.mask = mask } } 

Answer 7

It is very simple to round an image this way:

 self.profileImageView?.clipsToBounds = true self.profileImageView!.layer.cornerRadius = 10 self.profileImageView?.layer.borderWidth = 1.0 self.profileImageView?.contentMode = .ScaleAspectFit 

But in order for the image to be rounded with the ratio of the images, I think you need to set the image viewing mode in ScaleAspectFill mode.