Drawing Shape layer using Coregraphics - iOS - ios

Question

I am trying to achieve following shape using coregraphics.
I am able to create a rounded rect
func createRoundedRect() {
let path = UIBezierPath(roundedRect: self.bounds, cornerRadius: 15.0)
// Specify the point that the path should start get drawn.
path.move(to: CGPoint(x: 0.0, y: 0.0))
// Create a line between the starting point and the bottom-left side of the view.
path.addLine(to: CGPoint(x: 0.0, y: self.frame.size.height))
// Create the bottom line (bottom-left to bottom-right).
path.addLine(to: CGPoint(x: self.frame.size.width, y: self.frame.size.height))
// Create the vertical line from the bottom-right to the top-right side.
path.addLine(to: CGPoint(x: self.frame.size.width, y: 0.0))
// Close the path. This will create the last line automatically.
path.close()
}
But I am not sure how to make a view of above shape. Any help or idea is appreciated.

Answer 1

You render this with just two arcs, one for the top and one for the bottom. Just use a fat lineWidth and set the strokeColor to be the same as the fillColor to achieve the desired corner radius.
For example:
#IBDesignable
class TvView: UIView {
override class var layerClass: AnyClass { CAShapeLayer.self }
var shapeLayer: CAShapeLayer { return layer as! CAShapeLayer}
#IBInspectable var curveHeight: CGFloat = 10 { didSet { setNeedsLayout() } }
#IBInspectable var cornerRadius: CGFloat = 10 { didSet { setNeedsLayout() } }
override func layoutSubviews() {
super.layoutSubviews()
shapeLayer.fillColor = UIColor.red.cgColor
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.path = path()?.cgPath
shapeLayer.lineWidth = cornerRadius * 2
shapeLayer.lineJoin = .round
}
func path() -> UIBezierPath? {
let rect = bounds.insetBy(dx: cornerRadius, dy: cornerRadius)
guard
rect.height > 2 * curveHeight,
rect.width > 0,
curveHeight > 0
else {
return nil
}
let angle: CGFloat = 2 * (atan2(curveHeight, rect.width / 2))
let radius = rect.width / 2 / sin(angle)
let path = UIBezierPath(arcCenter: CGPoint(x: rect.midX, y: rect.minY + radius), radius: radius, startAngle: .pi * 3 / 2 - angle, endAngle: .pi * 3 / 2 + angle, clockwise: true)
path.addArc(withCenter: CGPoint(x: rect.midX, y: rect.maxY - radius), radius: radius, startAngle: .pi / 2 - angle, endAngle: .pi / 2 + angle, clockwise: true)
path.close()
return path
}
}
Using the same color for stroke and fill, that yields:
Or, so you can see what’s going on, here it is with the stroke rendered in a different color: