how to divide screen into 3 trapezium buttons with swift? [closed] - swift

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I have provided an image of how I would like it to appear but have no idea how to do it. Also if possible I would like to know how to constrain such awkward looking buttons to look good on all displays. Thank you all very much!!

Answer 1

enum CustomButtonType {
case topLeft, topRight, bottom
}
let triangelHeight:CGFloat = 75
class CustomButton: UIButton {
private var bgColor:UIColor = .white
private var type:CustomButtonType = .topLeft
init(frame:CGRect, bgColor:UIColor, type:CustomButtonType) {
super.init(frame: frame)
self.bgColor = bgColor
self.type = type
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else { return }
context.beginPath()
switch type {
case .topLeft:
context.move(to: CGPoint(x: rect.minX, y: rect.minY))
context.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
context.addLine(to: CGPoint(x: (rect.maxX), y: rect.maxY - triangelHeight))
context.addLine(to: CGPoint(x: (rect.minX), y: rect.maxY))
break
case .topRight:
context.move(to: CGPoint(x: rect.minX, y: rect.minY))
context.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
context.addLine(to: CGPoint(x: (rect.maxX), y: rect.maxY ))
context.addLine(to: CGPoint(x: (rect.minX), y: rect.maxY - triangelHeight))
break
case .bottom:
context.move(to: CGPoint(x: rect.minX, y: rect.minY + triangelHeight))
context.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
context.addLine(to: CGPoint(x: rect.maxX, y: rect.minY + triangelHeight))
context.addLine(to: CGPoint(x: (rect.maxX), y: rect.maxY ))
context.addLine(to: CGPoint(x: (rect.minX), y: rect.maxY ))
break
}
context.closePath()
context.setFillColor(bgColor.cgColor)
context.fillPath()
}
}
I have created buttons with frame you can use Autolayout.
let topBtnHeight:CGFloat = 400
let aBtn = CustomButton(frame: .init(x: 0, y: 0, width: view.frame.width / 2, height: topBtnHeight), bgColor: .green, type: .topLeft)
view.addSubview(aBtn)
let bBtn = CustomButton(frame: .init(x: view.frame.width / 2, y: 0, width: view.frame.width / 2, height: topBtnHeight), bgColor: .red, type: .topRight)
view.addSubview(bBtn)
let cBtn = CustomButton(frame: .init(x: 0, y: topBtnHeight - triangelHeight, width: view.frame.width , height: view.frame.height - topBtnHeight + triangelHeight), bgColor: .yellow, type: .bottom)
view.addSubview(cBtn)