在Swift中创建一个对角自定义UIView [英] Create a Diagonal Custom UIView in Swift

问题描述

我正在快速设计自定义UIimageview.我想使用类似于此

I am working on designing custom UIimageview in swift. I want to create a UIimageview using beizerpath similar to this

编码应迅速. 任何帮助表示赞赏.谢谢

The coding should be in swift. Any help is appreciated. Thanks

推荐答案

创建CAShapeLayer并为其提供path和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)
    }
}

现在，我使这个可设计的(因此，如果将其放在单独的框架目标中，可以将此视图添加到您的情节提要中，并在其中进行渲染).如果您不使用情节提要，它仍然可以工作.这样做很方便:

Now, I made this designable (so if you put it in a separate framework target, you can add this view right in your storyboard and see it rendered there). It still works if you're not using storyboards. It just can be convenient to do so:

我还使用了相对坐标(值范围从零到一)，并且有一种方法可以将其转换为实际坐标，但是如果需要，您可以对坐标进行硬编码.但是将其用作从零到一的值，您将拥有一个可以参与自动布局的角度视图，而不必担心更改特定的坐标值.

I also used relative coordinates (with values ranging from zero to one) and have a method to convert those to actual coordinates, but you can hard code your coordinates if you want. But using this as values from zero to one, you have an angular view that can participate in auto-layout without needing to worry about changing specific coordinate values.

最后，看似微不足道的小事情，但是我在layoutSubviews中构造了path:这样，随着视图大小的改变(无论是通过自动布局还是通过编程方式的更改)，视图将被正确地重新呈现.同样，通过对fillColor和points使用didSet，如果您更改了任何一个，则将为您重新渲染视图.

Finally, minor things that might seem trivial, but I construct the path in layoutSubviews: That way, as the view changes size (whether via auto-layout or programmatic changes), the view will be correctly re-rendered. Likewise, by using didSet for fillColor and points, if you change either of those, the view will be re-rendered for you.

可以根据自己的喜好随意更改此设置，但希望这可以说明只带有自定义path的CAShapeLayer的基本思想.

Feel free to change this as you see fit, but hopefully this illustrates the basic idea of just having a CAShapeLayer with a custom path.

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

If you use insertSublayer, you can then combine this with other subviews of the AngleView, e.g.:

这篇关于在Swift中创建一个对角自定义UIView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！