如何在 UIView 中为 swift 添加曲线左侧和右侧

Question

I tried to add a curve but not working.

I have attached the image left side is given by the designer, the right side I have done in swift.

here the if I add corner radius not working for the curve if add curve corner radius not working.

I have added left side and right side separate views, how it's possible to achieve the remove the super view background-color and curve.

extension UIView {

   func roundCorners(
      corners: UIRectCorner,
      radius: CGFloat
   ) {
      let path = UIBezierPath(
         roundedRect: bounds,
         byRoundingCorners: corners,
         cornerRadii: CGSize(
            width: radius,
            height: radius
         )
      )

      let mask = CAShapeLayer()
      mask.path = path.cgPath
      layer.mask = mask
   }
}

// here I am using on UITableviewCell in layoutSubview 

    leftCurve.roundCorners(corners: [.topRight,.bottomRight], radius: 20)        
    rightCurver.roundCorners(corners: [.topLeft,.bottomLeft], radius: 20)

Answer 1

Here is a demo for add curve to both side using UIBezierPath

class ShapeView: UIView {
    
    var path: UIBezierPath = UIBezierPath()
    
    // Set you circle position for verticle.
    var circleYPosition: CGFloat = 50 {
        didSet {
            self.setNeedsDisplay()
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        self.backgroundColor = UIColor.clear
        // Here apply shadow
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        // 4 corners radious
        UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 10, height: 10)).addClip()
        
        // Left - right circle
        path.move(to: CGPoint(x: 0, y: self.frame.size.height))
        
        //left side
        path.addArc(withCenter: CGPoint(x: 0, y: self.circleYPosition - 15),
            radius: 10,
            startAngle: CGFloat((90 * Double.pi) / 180),
            endAngle: CGFloat((270 * Double.pi) / 180),
            clockwise: false)
        
        path.addLine(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: self.frame.size.width, y: 0))
        path.addLine(to: CGPoint(x: self.frame.size.width, y: self.frame.size.height))
        
        path.move(to: CGPoint(x: self.frame.size.width, y: self.frame.size.height))
        
        //right side
        path.addArc(withCenter: CGPoint(x: self.frame.size.width, y: self.circleYPosition - 15),
                    radius: 10,
                    startAngle: CGFloat((270 * Double.pi) / 180),
                    endAngle: CGFloat((90 * Double.pi) / 180),
                    clockwise: false)
        
        
        path.close()
        UIColor.white.setFill()
        path.fill()
        
        // Center Dash path
        let dashPath = UIBezierPath()
        dashPath.move(to: CGPoint(x: self.bounds.minX + 12, y: self.circleYPosition - 15))
        dashPath.addLine(to: CGPoint(x: self.bounds.maxX - 12, y: self.circleYPosition - 15))
        dashPath.setLineDash([5,5], count: 2, phase: 0.0)
        dashPath.lineWidth = 1.0
        dashPath.lineCapStyle = .butt
        UIColor.lightGray.set()
        dashPath.stroke()
    }
}