iOS: Image view aspect fit with corner radius

Question

I want to set corner radius with content mode as aspect fit using following code:

  cell.imgvAlbum.contentMode = UIViewContentModeScaleAspectFit;
  cell.imgvAlbum.clipsToBounds = YES;
  cell.imgvAlbum.layer.cornerRadius  = 5.0f;

but i am getting output only for content mode as aspect fit. I have also tried for:

  cell.imgvAlbum.layer.masksToBounds  = YES;

What to do for corner radius? Please suggest me some solution. Thanks in advance.

Gamekeeper

Your image view is getting rounded corners not matter what. It's just that with AspectFit, the image doesn't fill the image view. To get the effect you want you will need to resize the image view based on the aspect ratio of the image. – Niigata

Answer 1

Use below method to get a Rounded corner image with the specified radius for rounded corner, apply all your above properties as UIViewContentModeScaleAspectFit, clip to bounds e.t.c. on image view and set the received image by calling below function on the image view.

-(UIImage *)makeRoundedImage:(UIImage *) image
                      radius: (float) radius;
{
    CALayer *imageLayer = [CALayer layer];
    imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height);
    imageLayer.contents = (id) image.CGImage;

    imageLayer.masksToBounds = YES;
    imageLayer.cornerRadius = radius;

    UIGraphicsBeginImageContext(image.size);
    [imageLayer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return roundedImage;
}

Call as

  UIImage *image = [self makeRoundedImage:[UIImage imageNamed:@"accept~iphone"]
                    radius: 5.0f];

  cell.imgvAlbum.contentMode = UIViewContentModeScaleAspectFit;
  cell.imgvAlbum.clipsToBounds = YES;
  cell.imgvAlbum.layer.cornerRadius  = 5.0f;

  cell.imgvAlbum.layer.masksToBounds  = YES;

  [cell.imgvAlbum setImage: image];

Evanston

Answer 2

When using UIViewContentModeScaleAspectFit the image isn't always filling the frame of the ImageView, and that is why you could not see the corner radius.

Try putting background color to the imageView and you will see that corner radius is working.

If you want to see the round corners in any case you should use other content mode such as aspectFill or scaleToFill. example:

cell.imgvAlbum.contentMode = UIViewContentModeScaleAspectFill;

Another option would be to increase the size of the image you put in the imageView or reduce the size of the imageView.

Bayou

Answer 3

UIImageView Corner Radius only Top left and Right in iOS

UIBezierPath *maskPath;
        maskPath = [UIBezierPath bezierPathWithRoundedRect:imageLayer.bounds
                                         byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight)
                                               cornerRadii:CGSizeMake(10.0, 10.0)];

        CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
        maskLayer.frame = self.bounds;
        maskLayer.path = maskPath.CGPath;
        imageLayer.mask = maskLayer;

Mariano

Answer 4

Swift version as extension utility:

extension UIImage {

/**
 - Parameter cornerRadius: The radius to round the image to.
 - Returns: A new image with the specified `cornerRadius`.
 **/
func roundedImage(cornerRadius: CGFloat) -> UIImage? {
    let size = self.size

    // create image layer
    let imageLayer = CALayer()
    imageLayer.frame = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    imageLayer.contents = self.cgImage

    // set radius
    imageLayer.masksToBounds = true
    imageLayer.cornerRadius = cornerRadius

    // get rounded image
    UIGraphicsBeginImageContext(size)
    if let context = UIGraphicsGetCurrentContext() {
        imageLayer.render(in: context)
    }
    let roundImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return roundImage
}

Usage - don't forget to set new image back on imageView:

switch self.imageContentMode {
case .scaleAspectFit:
    // round actual image if aspect fit
    self.image = self.image?.roundedImage(cornerRadius: radius)
    self.imageView?.image = self.image

default:
    // round image view corners
    self.imageView?.roundCorners(radius: radius)
}

Conscious