最佳答案
创建一个 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)
}
}
现在,我做了这个designable (所以如果你把它放在一个单独的框架目标中,你可以在你的 Storyboard 中添加这个 View 并在那里看到它呈现)。如果您不使用 Storyboard,它仍然有效。这样做很方便:
我还使用了相对坐标(值范围从 0 到 1),并且有一种方法可以将这些坐标转换为实际坐标,但如果需要,您可以对坐标进行硬编码。但是使用它作为从零到一的值,你有一个可以参与自动布局的角度 View ,而不需要担心改变特定的坐标值。
最后,一些看似微不足道的小事,但我在 layoutSubviews
中构建了 path
: 这样,随着 View 大小的改变(无论是通过自动布局还是编程变化), View 将被正确地重新渲染。同样,通过将 didSet
用于 fillColor
和 points
,如果您更改其中任何一个,将为您重新呈现 View 。
您可以根据需要随意更改它,但希望这能说明仅具有自定义 path
的 CAShapeLayer
的基本思想。
如果您使用 insertSublayer
,您可以将它与 AngleView 的其他 subview 组合,例如:
关于uiview - 在 Swift 中创建一个对角自定义 UIView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41269309/