UIImageView with cornerRadius is incorrectly cropped

168 views Asked by At

I am trying to add cornerRadius to UIImageView which is rectangle with small height (7pt). UIImageView is incorrectly cropped on the right side. enter image description here

The strange thing is that UIImageView is perfectly rounded on a left but at the same time on the right side there is an extra white area. It is also strange that it sometimes works, roundness of right corner depends on UIImageView width. If I set width to 30% less right corner problem disappears.

What did I try: Simply set corners via cornerRadius

layer.cornerRadius = frame.size.height / 2
clipsToBounds = true

Set corners via Graphics context

func withRoundedCorners(radius: CGFloat, rect: CGRect) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
    UIBezierPath(roundedRect: rect, cornerRadius: radius).addClip()
    draw(in: rect)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

Set corners via mask and path

extension UIImageView {
    func roundCornersForAspectFit(radius: CGFloat) {
        if let image = self.image {
            // calculate drawingRect
            let boundsScale = bounds.size.width / bounds.size.height
            let imageScale = image.size.width / image.size.height

            var drawingRect: CGRect = bounds

            if boundsScale > imageScale {
                drawingRect.size.width = drawingRect.size.height * imageScale
                drawingRect.origin.x = (bounds.size.width - drawingRect.size.width) / 2
            } else {
                drawingRect.size.height = drawingRect.size.width / imageScale
                drawingRect.origin.y = (bounds.size.height - drawingRect.size.height) / 2
            }
            let path = UIBezierPath(roundedRect: drawingRect, cornerRadius: radius)
            let mask = CAShapeLayer()
            mask.path = path.cgPath
            layer.mask = mask
        }
    }
}

played with different types of image contentMode

.scaleAspectFill 
or
.scaleAspectFit
or
.scaleToFill

And result is always the same. Moreover if I remove image from UIImageView and just set backgroundColor to some random color to test it then round corner on a right side works perfectly.

What can it be?

1

There are 1 answers

0
Menaim On

you can add this extension to your project:

import Foundation
import UIKit


extension UIView {
    @IBInspectable
    var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
    
    @IBInspectable
    var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }
    
    @IBInspectable
    var borderColor: UIColor? {
        get {
            let color = UIColor(cgColor: layer.borderColor!)
            return color
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
    
}

Then you can add this in your viewController and you can apply .cornerRadius to button, label, imageViews, etc

imageViewCountryImage.cornerRadius = 15