iOS UIKit 中的自定义 UIView 形状

问题描述 投票:0回答:1

任何人都可以知道如何创建如图所示的形状。我想创建像 UIView 右下角那样的形状。

我正在尝试在右下角自定义形状创建形状。 uiviw 的一角还有一个按钮。

请帮我创建那个形状。

enter image description here

swift uikit
1个回答
0
投票

你可以尝试这个视图,

insetRight
是橙色圆圈切出空间的宽度:

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()
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.