如何通过使用UIBezierPath为Button创建特定的形状，如下面的带有Swift代码的附加图像所示？

Question

I tried with many ways to draw buttons as shown in image, But I'm able to draw only hexagonal . Am not able to draw as show in image . Please help me how to draw as shown in image. Thank you

Answer 1

You can do this with UIBezierPath and CAShapeLayer

Create a UIButton subclass and override layoutSubviews() , which is where you'll update your path, connecting the points with lines.

Here is a starting point for you:

class AngledButton: UIButton {

    var bPath = UIBezierPath()
    var theShapeLayer = CAShapeLayer()

    var fillColor: UIColor = UIColor.white
    var borderColor: UIColor = UIColor.gray

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {
        layer.addSublayer(theShapeLayer)
    }

    override func layoutSubviews() {

        super.layoutSubviews()

        let p1 = CGPoint.zero
        let p2 = CGPoint(x: bounds.width - bounds.height * 0.3, y: 0.0)
        let p3 = CGPoint(x: bounds.width, y: bounds.height * 0.5)
        let p4 = CGPoint(x: bounds.width - bounds.height * 0.3, y: bounds.height)
        let p5 = CGPoint(x: 0.0, y: bounds.height)

        bPath.move(to: p1)
        bPath.addLine(to: p2)
        bPath.addLine(to: p3)
        bPath.addLine(to: p4)
        bPath.addLine(to: p5)
        bPath.close()

        theShapeLayer.path = bPath.cgPath

        theShapeLayer.fillColor = self.fillColor.cgColor
        theShapeLayer.strokeColor = self.borderColor.cgColor

    }

    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        // only allow tap *within* the bezier path
        if bPath.contains(point) {
            return self
        }
        return nil
    }

}

By also overriding hitTest() the button will only be tapped if the tap is within the bezier path area. You can then overlap your buttons, and a tap at the upper-right corner will "pass through" to the button underneath.

Result:

Notes:

• You can make this @IBDesignable to see the layout in Interface Builder
• You'll need to play with the Title Insets to get the title labels to account for the angled edge
• This is just a starting point, but should get you on your way