Transform UIView shape

Question

I want to transform my UIView's shape into this (the white UIView - look at the right edge) using Swift:

Any ideas how to do it? I guess I should use the transform functionality, but I don't know how exactly. Thanks in advance!

Answer 1

Dudes, I found an easier solution that works perfectly as an extension to UIView:

extension UIView {

    func makeItEdgy() {
       let bounds = self.bounds

        // Create path to mask the view
        let path = CGMutablePath()
        path.move(to: bounds.origin)
        path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
        path.addLine(to: CGPoint(x: bounds.maxX - (bounds.height / 5), y: bounds.maxY))
        path.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
        path.closeSubpath()

        let maskLayer = (self.layer.mask as? CAShapeLayer) ?? CAShapeLayer()
        maskLayer.path = path

        self.layer.mask = maskLayer
    }
}

Answer 2

Update:

Here is the update, I misunderstood your question in my first answer You need to subclass UIView and override the default draw method with your own behaviour. To Adjust the angle you can change the offsetFactor

class ShapeView : UIView {
    public var bgc = UIColor.clear
    override init(frame: CGRect) {
        super.init(frame: frame)
        //backup old background color
        self.bgc = backgroundColor!
        backgroundColor = UIColor.clear
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.bgc = backgroundColor!
        backgroundColor = UIColor.clear
    }

    override func draw(_ rect: CGRect) {
        let size = self.bounds.size

        let offsetFactor = size.width * 0.98

        //define the points
        let tl = self.bounds.origin //top left
        let tr = CGPoint(x:tl.x + size.width, y:tl.y) //top  right
        let br = CGPoint(x:tl.x + offsetFactor, y:tr.y + size.height) // bottom right
        let bl = CGPoint(x:tl.x, y:tr.y + size.height) //bottom left

        let path = UIBezierPath()
        path.move(to: tl)
        path.addLine(to: tr)
        path.addLine(to: br)
        path.addLine(to: bl)
        path.close()

        //set old background color
        bgc.set()
        path.fill()
    }
}

Image

I hope I did understand your question right. You need to subclass UIView and override the default draw method with your own behaviour. To Adjust the spire you can change the offsetFactor This should do the job

class ShapeView : UIView {
    public var bgc = UIColor.clear
    override init(frame: CGRect) {
        super.init(frame: frame)
        //backup old background color
        self.bgc = backgroundColor!
        backgroundColor = UIColor.clear
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.bgc = backgroundColor!
        backgroundColor = UIColor.clear
    }

    override func draw(_ rect: CGRect) {
        let size = self.bounds.size

        let offsetFactor = size.height * 0.7

        //define the points
        let tl = self.bounds.origin //top left
        let tr = CGPoint(x:tl.x + size.width, y:tl.y) //top  right
        let br = CGPoint(x:tr.x, y:tr.y + offsetFactor) // bottom right
        let bm = CGPoint(x:size.width/2, y:size.height) ////bottom middle
        let bl = CGPoint(x:tl.x, y:offsetFactor) //bottom left

        let path = UIBezierPath()
        path.move(to: tl)
        path.addLine(to: tr)
        path.addLine(to: br)
        path.addLine(to: bm)
        path.addLine(to: bl)
        path.close()

        //set old background color
        bgc.set()
        path.fill()
    }
}

Storyboard and Simulator