swiftuikit

custom UIView Shape in iOS UIKit


can anyone know how to create shape like this that shown in image. I want to create shape like at the bottom- right corner of UIView.

I am trying to create the shape at the bottom-right corner custom shape. It also have a button at the corner of the uiviw .

please help me to create that shape .

enter image description here


Solution

  • You can try this view, insetRight is width of cut out space by orange circle:

    class CustomView: UIView {
        
        var cornerRadius: CGFloat = 8.0
        var fillColor: UIColor = .red
        var insetRight: CGFloat = 20
    
        override public func draw(_ rect: CGRect) {
            let rect = bounds
            let path = UIBezierPath()
    
            // lower left corner
            path.move(to: CGPoint(x: rect.minX + cornerRadius, y: rect.maxY))
            path.addQuadCurve(to: CGPoint(x: rect.minX, y: rect.maxY - cornerRadius),
                              controlPoint: CGPoint(x: rect.minX, y: rect.maxY))
    
            // left
            path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + cornerRadius))
    
            // upper left corner
            path.addQuadCurve(to: CGPoint(x: rect.minX + cornerRadius, y: rect.minY),
                              controlPoint: CGPoint(x: rect.minX, y: rect.minY))
    
            // top
            path.addLine(to: CGPoint(x: rect.maxX - cornerRadius, y: rect.minY))
    
            // upper right corner
            path.addQuadCurve(to: CGPoint(x: rect.maxX, y: rect.minY + cornerRadius),
                              controlPoint: CGPoint(x: rect.maxX, y: rect.minY))
    
            // right
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - cornerRadius - insetRight))
    
            // lower right corner
            path.addQuadCurve(to: CGPoint(x: rect.maxX - cornerRadius, y: rect.maxY - insetRight),
                              controlPoint: CGPoint(x: rect.maxX, y: rect.maxY - insetRight))
            
            
            path.addLine(to: CGPoint(x: rect.maxX - insetRight + cornerRadius, y: rect.maxY - insetRight))
            
            path.addQuadCurve(to: CGPoint(x: rect.maxX - insetRight, y: rect.maxY - insetRight + cornerRadius),
                              controlPoint: CGPoint(x: rect.maxX - insetRight, y: rect.maxY - insetRight))
            
            path.addLine(to: CGPoint(x: rect.maxX - insetRight, y: rect.maxY - cornerRadius))
            path.addQuadCurve(to: CGPoint(x: rect.maxX - insetRight - cornerRadius, y: rect.maxY), controlPoint: CGPoint(x: rect.maxX - insetRight, y: rect.maxY))
    
            path.close()
    
            fillColor.setFill()
            path.fill()
        }
    }
    

    enter image description here