Making a triangle in a UIView with a CGRect Frame

Question

HI I am making a game and need a spike at the bottom which I have decided to do via a UIView and collisions. I am coding in swift.

I currently have a square:

        //Object Setup
        let square = UIView(frame: CGRect(x:100, y:100, width: 100, height: 100))
        square.backgroundColor = UIColor.purpleColor()
        view.addSubview(square)

And I would like a triangle, I do have an image which I can use for a triangle but the image is square so surely the collision would be when it touches the image borders not the actual trianlge borders please advice on how to do with image or how I got square.

Thanks

Alex

Answer 1

Steps:

1. Create a new file that subclasses UIView called TriangleView
2. Paste this into the TriangleView class
3. Add a TriangleView through XIB or programmatically

---

import UIKit

class TriangleView: UIView {

    override func draw(_ rect: CGRect) {

        // Get Height and Width
        let layerHeight = layer.frame.height
        let layerWidth = layer.frame.width

        // Create Path
        let bezierPath = UIBezierPath()

        // Draw Points
        bezierPath.move(to: CGPoint(x: 0, y: layerHeight))
        bezierPath.addLine(to: CGPoint(x: layerWidth, y: layerHeight))
        bezierPath.addLine(to: CGPoint(x: layerWidth / 2, y: 0))
        bezierPath.addLine(to: CGPoint(x: 0, y: layerHeight))
        bezierPath.close()

        // Apply Color
        UIColor.green.setFill()
        bezierPath.fill()

        // Mask to Path
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = bezierPath.cgPath
        layer.mask = shapeLayer
    }
}

---

Result: