在Swift中创建一个对角自定义UIView

Question

我正在研究在swift中设计自定义UIimageview.我想使用类似于此的beizerpath创建UIimageview

编码应该很快.任何帮助表示赞赏.谢谢

Answer 1

创建一个CAShapeLayer并提供它a path和a fillColor:

@IBDesignable
public class AngleView: UIView {

    @IBInspectable public var fillColor: UIColor = .blue { didSet { setNeedsLayout() } }

    var points: [CGPoint] = [
        .zero,
        CGPoint(x: 1, y: 0),
        CGPoint(x: 1, y: 1),
        CGPoint(x: 0, y: 0.5)
    ] { didSet { setNeedsLayout() } }

    private lazy var shapeLayer: CAShapeLayer = {
        let _shapeLayer = CAShapeLayer()
        self.layer.insertSublayer(_shapeLayer, at: 0)
        return _shapeLayer
    }()

    override public func layoutSubviews() {
        shapeLayer.fillColor = fillColor.cgColor

        guard points.count > 2 else {
            shapeLayer.path = nil
            return
        }

        let path = UIBezierPath()

        path.move(to: convert(relativePoint: points[0]))
        for point in points.dropFirst() {
            path.addLine(to: convert(relativePoint: point))
        }
        path.close()

        shapeLayer.path = path.cgPath
    }

    private func convert(relativePoint point: CGPoint) -> CGPoint {
        return CGPoint(x: point.x * bounds.width + bounds.origin.x, y: point.y * bounds.height + bounds.origin.y)
    }
}

现在,我将其设计为可设计(因此,如果将其放在单独的框架目标中,则可以在故事板中添加此视图并在其中进行渲染).如果你不使用故事板,它仍然有效.这样做很方便:

我还使用了相对坐标(值从0到1),并有一个方法将它们转换为实际坐标,但如果你愿意,你可以硬编码你的坐标.但是使用此值作为从零到一的值,您可以使用角度视图参与自动布局,而无需担心更改特定坐标值.

最后,这似乎微不足道,但我构建小事path中layoutSubviews:这样一来,作为视图大小的变化(无论是通过自动布局或方案变化),视图将被正确地重新呈现.同样,通过didSet对fillColor和points,如果更改的,有观点将重新呈现给你.

您可以根据需要随意更改此内容,但希望这可以说明仅CAShapeLayer使用自定义的基本概念path.

如果您使用insertSublayer,则可以将其与AngleView的其他子视图结合使用,例如: