Suggestions regarding UIImageView customization - ios

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:

Answer 2

A UIImageView holds a static bitmap image. You could just generate an image like that, save it as a JPEG/PNG/TIF, and load the image into a UIImageView as a bitmap. That doesn't sound like what you want however.
I'd suggest creating a custom subclass of UIView. From there you could go a couple of different ways.
You could have your view override the draw() method for UIView and use Core Graphics calls to draw into the graphics context. Core Graphics is pretty specialized and will require some research to get the hang of.
You could have your custom view add Core Animation (CA) layers that draw your shapes for you. The class CAShapeLayer would be a good choice for this. You'll need to read up on CALayers and how to use them (which is also fairly arcane bit of learning.)
In general Apple steers you towards using layers and letting the system do the rendering for you. That's probably how I would do this. (Using CAShapeLayers, which in turn use CGPath objects.)

Answer 3

I created a custom view based on what you need based on #DuncanC's suggestions
class AngledSplitView: UIView {
var leftLayer: CAShapeLayer!
var rightLayer: CAShapeLayer!
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
super.init(frame: frame)
}
init (frame: CGRect,
leftColor: UIColor,
rightColor: UIColor,
separatorWidth: CGFloat,
separatorAngleInDegrees: CGFloat) {
super.init(frame: frame)
setupViews(leftColor: leftColor,
rightColor: rightColor,
separatorWidth: separatorWidth,
separatorAngleInDegrees: separatorAngleInDegrees)
}
func setupViews(leftColor: UIColor,
rightColor: UIColor,
separatorWidth: CGFloat,
separatorAngleInDegrees: CGFloat) {
// sets the image's frame to fill our view
createLeftView(leftColor: leftColor, separatorWidth: separatorWidth, separatorAngleInDegrees: separatorAngleInDegrees)
createRightView(rightColor: rightColor, separatorWidth: separatorWidth, separatorAngleInDegrees: separatorAngleInDegrees)
}
func setLeftColor(leftColor: UIColor) {
leftLayer.fillColor = leftColor.cgColor
}
func setRightColor(rightColor: UIColor) {
rightLayer.fillColor = rightColor.cgColor
}
func createLeftView(leftColor: UIColor,
separatorWidth: CGFloat,
separatorAngleInDegrees: CGFloat) {
let path = UIBezierPath()
let leftLayer = CAShapeLayer()
let offset = (bounds.height / 2) * tan(separatorAngleInDegrees * CGFloat.pi / 180)
path.move(to: bounds.origin)
path.addLine(to: CGPoint(x: bounds.width / 2 - separatorWidth / 2 + offset,
y: bounds.origin.y))
path.addLine(to:CGPoint(x: bounds.width / 2 - separatorWidth / 2 - offset,
y: bounds.height))
path.addLine(to:CGPoint(x: bounds.origin.x, y: bounds.height))
path.addLine(to:bounds.origin)
path.close()
leftLayer.path = path.cgPath
leftLayer.fillColor = leftColor.cgColor
self.layer.addSublayer(leftLayer)
}
func createRightView(rightColor: UIColor,
separatorWidth: CGFloat,
separatorAngleInDegrees: CGFloat) {
let path = UIBezierPath()
let rightLayer = CAShapeLayer()
let offset = (bounds.height / 2) * tan(separatorAngleInDegrees * CGFloat.pi / 180)
path.move(to: CGPoint(x: bounds.width / 2 + separatorWidth / 2 + offset,
y: bounds.origin.y))
path.addLine(to: CGPoint(x: bounds.width / 2 + separatorWidth / 2 + offset,
y: bounds.origin.y))
path.addLine(to:CGPoint(x: bounds.width / 2 + separatorWidth / 2 - offset,
y: bounds.height))
path.addLine(to:CGPoint(x: bounds.width, y: bounds.height))
path.addLine(to:CGPoint(x: bounds.width, y: bounds.origin.y))
path.close()
rightLayer.path = path.cgPath
rightLayer.fillColor = rightColor.cgColor
self.layer.addSublayer(rightLayer)
}
}
You can use it like this:
let customView = AngledSplitView(
frame: CGRect(x: 20, y: 30, width: view.frame.width - 40, height:
view.frame.height / 4),
leftColor: .red,
rightColor: .blue,
separatorWidth: 20,
separatorAngleInDegrees: 45)
view.addSubview(customView)