Swift 4 - 创建具有 2 种背景颜色的 UIView

Question

我有一个与其父视图具有相同宽度/高度的 UIView。这就是我想要的。

目前我使用的是静态背景图片。有什么想法吗？

Answer 1

结果

代码

import UIKit
@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: 0.4),
        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)
    }
}

Source 刚刚修改了值：D

Answer 2

swift 4：您可以代替制作具有多种背景颜色的视图，而是将子图层添加到您的视图中。

//connect your view.

@IBOutlet weak var yourView: UIView!


override func viewDidLoad() {
    super.viewDidLoad()

    //add a shape 
    let shape = CAShapeLayer()
    self.yourView.layer.addSublayer(shape)
    shape.strokeColor = UIColor.black.cgColor
    shape.fillColor = UIColor.black.cgColor

    // add your path 
    // you can simply adjust the points.
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: 0, y: (3*yourView.bounds.height)/4))
    path.addLine(to: CGPoint(x:self.yourView.bounds.width , y: yourView.bounds.height/2))
    path.addLine(to: CGPoint(x: self.yourView.bounds.width, y: 0))
    path.close()
    shape.path = path.cgPath

}