How to make the frame of a button custom shape in Swift 2

Question

I want the button to be reactive to tap only in the custom polygonal shape that I create and not in the CGRect frame.

button.frame only supports CGRect.

Try looking at this [Stack Overflow Post](http://stackoverflow.com/q/36803227/5143847) — Pranav Wadhwa, Apr 27 '16 at 01:03
If you have a png image with transparent areas in your polygonal shape, you can check [this answer](https://stackoverflow.com/a/52920166/1835827). — ilkayaktas, Oct 21 '18 at 21:46

score 8 · Accepted Answer · answered Apr 26 '16 at 23:16

Here is an example of a button that only responds to touches within a certain area.

class MyButton: UIButton {

    var path: UIBezierPath!

    override func awakeFromNib() {
        backgroundColor = UIColor.greenColor()
        addTarget(self, action: #selector(touchDown), forControlEvents: .TouchDown)
    }
    override func drawRect(rect: CGRect) {
        path = UIBezierPath()

        path.moveToPoint(CGPointMake(150, 10))
        path.addLineToPoint(CGPointMake(200, 10))
        path.addLineToPoint(CGPointMake(150, 100))
        path.addLineToPoint(CGPointMake(100, 100))
        path.closePath()

        let shapeLayer = CAShapeLayer()
        shapeLayer.strokeColor = UIColor.redColor().CGColor
        shapeLayer.fillColor = UIColor.blueColor().CGColor
        shapeLayer.path = path.CGPath
        layer.addSublayer(shapeLayer)

    }

    func touchDown(button: MyButton, event: UIEvent) {
        if let touch = event.touchesForView(button)?.first {
            let location = touch.locationInView(button)

            if path.containsPoint(location) == false {
                button.cancelTrackingWithEvent(nil)
            }
        }

    }
}

That code adds a sublayer to the button's layer every time drawRect is called. That's not right. — Duncan C, May 27 '20 at 19:12

score 2 · Answer 2 · answered Oct 28 '17 at 13:00

If you want to do it in Swift 3/4:

class MyButton: UIButton {

    var path: UIBezierPath!

    override func awakeFromNib() {
        backgroundColor = UIColor.green
        addTarget(self, action: #selector(touchDown), for: .touchDown)
    }
    override func draw(_ rect: CGRect) {
        path = UIBezierPath()

        path.move(to: CGPoint(x: 150, y: 10))
        path.addLine(to: CGPoint(x: 200, y: 10))
        path.addLine(to: CGPoint(x: 150, y: 100))
        path.addLine(to: CGPoint(x: 100, y: 100))
        path.close()

        let shapeLayer = CAShapeLayer()
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.fillColor = UIColor.blue.cgColor
        shapeLayer.path = path.cgPath
        layer.addSublayer(shapeLayer)

    }

    func touchDown(button: MyButton, event: UIEvent) {
        if let touch = event.touches(for: button)?.first {
            let location = touch.location(in: button)

            if path.contains(location) == false {
                button.cancelTracking(with: nil)
            }
        }
    }
}

This version still adds the shape layer to the button's layer on every call to `draw(_:)` which is wrong. — Duncan C, May 27 '20 at 19:14
Instead of adding `touchDown` as a selector, `UIControl` has a method called `begingTracking(_:with:)` that you can override. It is called on tap of the button. There's also methods for continueTracking, endTracking, and cancelTracking that can be overridden — Chris, Dec 16 '20 at 15:13

How to make the frame of a button custom shape in Swift 2

2 Answers2

Linked

Related