How to get touch event on only Bounded area of button in swift 3

Question

When button is clipped and make circular need touch event only on circular part of button that is circular button . Is that possible to get clicked only on bounded area of button. Thanks in advance.

do you want to restrict the touch action to the circular area? and provide touch action on the blue area shown in the picture? — Jayachandra A, Feb 08 '18 at 10:28
You can add a UIbutton (With Red bg)inside a view(With Blue bg) and give corner radius to the button. — Anuraj, Feb 08 '18 at 10:29
Thanks for reply , but brown is my button and blue is an image behind the button. Corner Radius will not help. I want to restrict touch event on blue area. Only want touch event in Brown area of button — Jasmine Chaniara, Feb 08 '18 at 10:32
Can’t you just set the button’s `cornerRadius` to be half of the button frame? — Cesare, Feb 08 '18 at 10:33
This is only possible with corner radius and set your button clipsToBounds = true it will crop your button's rest part except rounded — Sandip Gill, Feb 08 '18 at 10:35
No not possible only with layer.cornerRadius the img shown brown is button having corner radius as you said but still got clicked event in rest part. It just not seen but touch event is there — Jasmine Chaniara, Feb 08 '18 at 11:04
check this https://stackoverflow.com/questions/37617784/active-clickable-area-for-uibutton-with-rounded-corners?noredirect=1&lq=1 — Dharma, Feb 08 '18 at 11:19
@JasmineChaniara do you want to perform any actions with button object? — Jayachandra A, Feb 08 '18 at 11:53

Ilya Kharabet · Answer 1 · 2018-02-08T11:19:59.570

4

Make custom class for this button and override this method:

class CircleButton: UIButton {
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        let circlePath = UIBezierPath(ovalIn: self.bounds)
        return circlePath.contains(point)
    }
}

edited Feb 08 '18 at 11:19

answered Feb 08 '18 at 10:32

Ilya Kharabet

4,203
3
15
29

plz can you give an example as I didnot able to getting what should i pass inside this method. Thanks in advance – Jasmine Chaniara Feb 08 '18 at 11:05
1

You don't need to call this method. It calls automatically – Ilya Kharabet Feb 08 '18 at 11:18
I updated my answer – Ilya Kharabet Feb 08 '18 at 11:20

score 0 · Answer 2 · answered Feb 08 '18 at 11:27

The given code is for hexgon layer of button

@IBAction func didSelectHexaButton(sender:UIButton, event:UIEvent)
    {
        let ifInside:Bool  = sender.touchInside(event)

        if(ifInside)
        {
            //TODO button code
            print("button point handled")
        }
        else
        {
            print("clicked out side")
            // Cornert point clicked
        }
    } 

func touchInside(event: UIEvent) ->Bool
    {
        let touches:NSSet = event.touchesForView(self)!;
        let touch:UITouch = touches.allObjects.first as! UITouch
        let point:CGPoint = touch.locationInView(self)

        let height = self.frame.size.height / 3;
        let width = self.frame.size.width / 3;

        //uper left triange
        let inside_1:Bool  = self.PointInTriangle(point, v1: CGPointZero, v2: CGPointMake(0, height), v3: CGPointMake(width , 0))
        let inside_2:Bool  = self.PointInTriangle(point, v1: CGPointMake(width * 2, 0), v2: CGPointMake(width * 3 , 0), v3: CGPointMake(width * 3 , height))
        let inside_3:Bool  = self.PointInTriangle(point, v1: CGPointMake(0, height * 2), v2: CGPointMake(0, height * 3), v3: CGPointMake(width , height * 3))
        let inside_4:Bool  = self.PointInTriangle(point, v1: CGPointMake(width * 2, height * 3), v2: CGPointMake(width * 3, height * 3), v3: CGPointMake(width * 3 , height * 2))

        return !inside_1 && !inside_2 && !inside_3 && !inside_4
    }

    func sign (p1:CGPoint, p2:CGPoint, p3:CGPoint) -> CGFloat
    {
        return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
    }

    func PointInTriangle (point:CGPoint, v1:CGPoint, v2:CGPoint, v3:CGPoint) -> Bool
    {

        var b1:Bool, b2:Bool, b3:Bool;

        b1 = self.sign(point, p2: v1, p3: v2) < 0.0
        b2 = self.sign(point, p2: v2, p3: v3) < 0.0
        b3 = self.sign(point, p2: v3, p3: v1) < 0.0

        return ((b1 == b2) && (b2 == b3 ));
    }

You can change the code in touch inside to find the point is lies inside the circle or outside the circle.

How to get touch event on only Bounded area of button in swift 3

2 Answers2