How to curve edges of UIImageview in swift ios? - swift

Question

I used
let view = UIImageView(CGRect(x: 0, y: 10, width: 100, height: 100))
view.cornerRadius = 10
self.mainView.addSubview(view)
This rounds the corner I want round the edges

Answer 1

The standard technique is to
Define a UIBezierPath for the shape.
Make a CAShapeLayer using that path.
Define the image view’s layer’s mask to use that shape layer.
E.g.
#IBDesignable
class RoundedCornerView: UIImageView {
#IBInspectable
var cornerRadius: CGFloat = 17 { didSet { setNeedsLayout() } }
#IBInspectable
var lineWidth: CGFloat = 75 { didSet { setNeedsLayout() } }
override func layoutSubviews() {
super.layoutSubviews()
let rect = bounds.insetBy(dx: lineWidth / 2, dy: lineWidth / 2)
let path = UIBezierPath()
var point = CGPoint(x: rect.minX + cornerRadius, y: rect.minY + cornerRadius)
path.move(to: point)
var controlPoint = CGPoint(x: point.x + cornerRadius, y: rect.minY)
point = CGPoint(x: rect.midX, y: rect.minY)
path.addQuadCurve(to: point, controlPoint: controlPoint)
point = CGPoint(x: rect.maxX - cornerRadius, y: rect.minY + cornerRadius)
controlPoint = CGPoint(x: point.x - cornerRadius, y: rect.minY)
path.addQuadCurve(to: point, controlPoint: controlPoint)
controlPoint = CGPoint(x: rect.maxX, y: point.y + cornerRadius)
point = CGPoint(x: rect.maxX, y: rect.midY)
path.addQuadCurve(to: point, controlPoint: controlPoint)
point = CGPoint(x: rect.maxX - cornerRadius, y: rect.maxY - cornerRadius)
controlPoint = CGPoint(x: rect.maxX, y: point.y - cornerRadius)
path.addQuadCurve(to: point, controlPoint: controlPoint)
controlPoint = CGPoint(x: point.x - cornerRadius, y: rect.maxY)
point = CGPoint(x: rect.midX, y: rect.maxY)
path.addQuadCurve(to: point, controlPoint: controlPoint)
point = CGPoint(x: rect.minX + cornerRadius, y: rect.maxY - cornerRadius)
controlPoint = CGPoint(x: point.x + cornerRadius, y: rect.maxY)
path.addQuadCurve(to: point, controlPoint: controlPoint)
controlPoint = CGPoint(x: rect.minX, y: point.y - cornerRadius)
point = CGPoint(x: rect.minX, y: rect.midY)
path.addQuadCurve(to: point, controlPoint: controlPoint)
point = CGPoint(x: rect.minX + cornerRadius, y: rect.minY + cornerRadius)
controlPoint = CGPoint(x: rect.minX, y: point.y + cornerRadius)
path.addQuadCurve(to: point, controlPoint: controlPoint)
path.close()
let shapeLayer = CAShapeLayer()
shapeLayer.lineWidth = lineWidth
shapeLayer.path = path.cgPath
shapeLayer.fillColor = UIColor.white.cgColor
shapeLayer.strokeColor = UIColor.white.cgColor
layer.mask = shapeLayer
clipsToBounds = true
}
}
Yields:
You’ll have to play around with values for cornerRadius and lineWidth for your image view’s dimensions, but hopefully this illustrates the idea. The default values I used in the code above was for a 300×300 image view.
Note, I implemented the path in layoutSubviews so that it would respond to resizing of your image view. I also make it #IBDesignable so that you could see it rendered in IB if you happened to be using storyboards.

Answer 2

Try to wrap image inside UIView
let image = UIImageView(CGRect(x:0,y:0,width:100,height:100))
let view = UIView(CGRect(x:0,y:10,width:100,height:100))
view.cornerRadius = 10
view.addSubiew(image)
self.mainView.addSubview(view)
Swift 4
let image = UIImageView(frame: CGRect(x:0,y:0,width:100,height:100))
let view = UIView(frame: CGRect(x:0,y:10,width:100,height:100))
view.layer.cornerRadius = 30
view.addSubview(image)
self.mainView.addSubview(view)