左上角圆角的平行四边形 UILabel

Question

我正在尝试创建一个带有圆边的 UILable，更像是一个带有角半径（即 EU 15）的半平行四边形，如下所示。我已经有了 UILabel 的出口。任何帮助将不胜感激。

Answer 1

您可能想使用 UIBezierPath 作为自定义视图的掩码。然后您可以添加一个标签作为子视图，或者简单地在其上覆盖一个标签。

这是一个基本示例...

红色矩形只是视图背景 - 白色部分是带有路径掩码的自定义视图：

这是它后面的 UIImageView 和上面的 UILabel:

代码非常简单：

@IBDesignable
class DanuShapeView: UIView {

    let shapeLayer = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    override func prepareForInterfaceBuilder() {
        // make sure the background is clear
        backgroundColor = .clear
    }

    func commonInit() -> Void {

        // add the shape layer
        layer.addSublayer(shapeLayer)

        // fill color for the shape
        shapeLayer.fillColor = UIColor.white.cgColor

        // make sure the background is clear
        backgroundColor = .clear

    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let width = bounds.size.width
        let height = bounds.size.height

        let bezierPath = UIBezierPath()

        // start at bottom-left
        bezierPath.move(to: CGPoint(x: 0.0, y: height))

        // add curve
        bezierPath.addCurve(to: CGPoint(x: height, y: 0.0),
                            controlPoint1: CGPoint(x: height * 0.6, y: height),
                            controlPoint2: CGPoint(x: height * 0.4, y: 0.0))

        // add line to top-right
        bezierPath.addLine(to: CGPoint(x: width, y: 0.0))

        // add line to bottom-right
        bezierPath.addLine(to: CGPoint(x: width, y: height))

        // close the path
        bezierPath.close()

        shapeLayer.path = bezierPath.cgPath

    }

}

请注意，通过使用 @IBDesignable，您可以看到在 IB / Storyboard 中布置视图时的外观。

左上角圆角的平行四边形 UILabel

Parallelogram UILabel with top left edge rounded

uilabel

ios