如何用swift将屏幕分成3个梯形按钮？

Question

我已经提供了我希望它如何显示的图片，但不知道如何操作。另外，如果可能的话，我想知道如何限制这些看起来很笨拙的按钮，使其在所有显示器上看起来都不错。非常感谢大家！！

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

我已经创建了带框架的按钮，您可以使用自动布局。

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)

如何用swift将屏幕分成3个梯形按钮？

how to divide screen into 3 trapezium buttons with swift?

constraints

button

shapes

swift