UIButton touch event overlap

Question

I need to make UIButton pattern like follwing screenshot. My problem is if i do set frame normally and set image to button frame. Touch event get overlapping.

I am using follwing code,

UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
[button1 addTarget:self 
           action:@selector(aMethod:)
 forControlEvents:UIControlEventTouchUpInside];
[button1 setImage:[UIImage imageWithName:@"Triangle1.png"]];
button1.frame = CGRectMake(100.0, 100.0, 150.0, 150.0);
[view addSubview:button1];

UIButton *button2 = [UIButton buttonWithType:UIButtonTypeCustom];
[button2 addTarget:self 
           action:@selector(aMethod1:)
 forControlEvents:UIControlEventTouchUpInside];
[button2 setImage:[UIImage imageWithName:@"Triangle2.png"]];
button2.frame = CGRectMake(175.0, 100.0, 150.0, 150.0);// if set X to 250 then pattern not seems 
[view addSubview: button2];

UIButton *button3 = [UIButton buttonWithType:UIButtonTypeCustom];
[button3 addTarget:self 
           action:@selector(aMethod2:)
 forControlEvents:UIControlEventTouchUpInside];
[button3 setImage:[UIImage imageWithName:@"Triangle2.png"]];
button3.frame = CGRectMake(150.0, 260.0, 150.0, 150.0);// if set X to 250 then pattern not seems 
[view addSubview: button3];

One my Senior is telling me, i need to use CALayer , I have read but honestely i am not able to understand there stuffs.

Any help is very much appreciated.

Answer 1

Karn suggested OBShapedButton library worked for me in Objective C, Touch events works perfectly.

I have Used OBShapedButton library & its free of cost. Brilliant demo by Ole Begemann

Download library add two folders(having OBShapedButton.h & OBShapedButton.m, UIImage+ColorAtPixel.h , UIImage+ColorAtPixel.m) called OBShapedButton & UIImage+ColorAtPixel to your project & Inside your viewcontroller on storyboard give class attribute instead UIButtons as OBShapedButton then drag the outlet to your YourViewController.h .

#import "OBShapedButton.h"

@property (weak, nonatomic) IBOutlet OBShapedButton *obsButtonTest;

then,

[obsButtonTest setImage:[UIImage imageNamed:@"image_name.png"] forState:UIControlStateNormal];

For swift you can use BridgingHeader

And In bridging header you can import following two classes

#import "OBShapedButton.h"
#import "UIImage+ColorAtPixel.h"

Drag outlet from storyboard to your viewcontroller.swift file

@IBOutlet weak var obsButtonTest: OBShapedButton!

Set image from stroyboard itself or set it programmatically,

obsButtonTest.setImage(.image_name, for: .normal)

Answer 2

Use OBShapedButton library its free of cost, Drag OBShapedButton.h & OBShapedButton.m class in your project.& thereafter OBShapedButton.h in your VC.h file where you want use buttons,

#import "OBShapedButton.h"

@property (weak, nonatomic) IBOutlet OBShapedButton *yourCustomButton;

Objective-C

Drag & place UIButton's on storyboard of your matching pattern change each button Custom class UIButton to OBShapedButton in class identifier & create instance in the or drag outlet in the VC.h file.

[yourCustomButton setImage:[UIImage imageNamed:@"customImage.png"] forState:UIControlStateNormal];

& for swift you can use BridgeHeader