Transform UIView shape - ios

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

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

Answer 2

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
}
}