Suggestions regarding UIImageView customization

Question

I'm trying to figure out the best way to recreate this image in code. I've thought about taking two UIImageViews and connecting them via constraints but that would only get me 50% of the way there because there wouldn't be a diagonal white line splitting the two unique colors. I also want to be able to programmatically change the color of each half of the UIImageView.

Answer 1

My class was very similar to what "May Rest in Peace" posted, but since I had put it together already, I'll go ahead and post it.

The main difference is that I implemented @IBDesignable and @IBInspectable so you can see it and make adjustments in Storyboard / IB

@IBDesignable
class AaronView: UIView {

    let leftLayer: CAShapeLayer = CAShapeLayer()
    let rightLayer: CAShapeLayer = CAShapeLayer()

    let maskLayer: CAShapeLayer = CAShapeLayer()

    @IBInspectable
    var leftColor: UIColor = UIColor(red: 0.5, green: 0.6, blue: 0.8, alpha: 1.0) {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable
    var rightColor: UIColor = UIColor(red: 0.0, green: 0.5, blue: 0.4, alpha: 1.0) {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable
    var divColor: UIColor = UIColor.white {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable
    var divAngle: CGFloat = 5.0 {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable
    var divWidth: CGFloat = 8.0 {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable
    var radius: CGFloat = 32.0 {
        didSet {
            setNeedsLayout()
        }
    }

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

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

    func commonInit() -> Void {

        layer.addSublayer(leftLayer)
        layer.addSublayer(rightLayer)

    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let x1 = bounds.minX
        let y1 = bounds.minY
        let x2 = bounds.maxX
        let y2 = bounds.maxY

        var path = UIBezierPath()

        let offset = (bounds.width / 2) * tan(divAngle * CGFloat.pi / 180)

        path.move(to: CGPoint(x: x1, y: y1))
        path.addLine(to: CGPoint(x: x2 / 2.0 - divWidth / 2.0 + offset, y: y1))
        path.addLine(to: CGPoint(x: x2 / 2.0 - divWidth / 2.0 - offset, y: y2))
        path.addLine(to: CGPoint(x: x1, y: y2))
        path.close()

        leftLayer.path = path.cgPath

        path = UIBezierPath()

        path.move(to: CGPoint(x: x2 / 2.0 + divWidth / 2.0 + offset, y: y1))
        path.addLine(to: CGPoint(x: x2, y: y1))
        path.addLine(to: CGPoint(x: x2, y: y2))
        path.addLine(to: CGPoint(x: x2 / 2.0 + divWidth / 2.0 - offset, y: y2))
        path.close()

        rightLayer.path = path.cgPath

        leftLayer.fillColor = leftColor.cgColor
        rightLayer.fillColor = rightColor.cgColor

        maskLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.mask = maskLayer

        backgroundColor = divColor

    }
}

Using Defaults:

Result:

and some changes:

Result: