How to make clickable UIButton over UIImageView?

Question

I want to create a UIButton to display over an UIImageView. My code snippet is as shown below:

imageView = [[UIImageView alloc] initWithImage:image]; //initWithImage:image

imageView.userInteractionEnabled = YES; //to enable touch interaction with image



UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn setTitle:@"ClickMe" forState:UIControlStateNormal];
[btn.titleLabel setFont:[UIFont systemFontOfSize:16]];


 btn.frame = CGRectMake(340, 550, 70, 50);

[btn addTarget:self action:@selector(onClickHotSpotButton)   forControlEvents:UIControlEventTouchUpInside]; //it wasnt working


[imageView addSubview:btn];
[self addSubview:imageView];

My application displays button exactly on part of image where i want to but it doesn't responds to click image. Instead it does detect single tap as i log output on its detection. But i want this button to get clicked on selection and to perform some function.

Thanks in advance.

wahib

score 5 · Answer 1 · answered May 29 '12 at 10:15

i tried this and it works for me.......

UIImageView * imageView = [[UIImageView alloc]init];
[imageView setImage:[UIImage imageNamed:@"image.jpeg"]];
[imageView setFrame:CGRectMake(10,10,300,300)];
[imageView setContentMode:UIViewContentModeScaleToFill];
[imageView setUserInteractionEnabled:TRUE];

UIButton * ButtonOnImageView = [[UIButton alloc]init];
[ButtonOnImageView setFrame:CGRectMake(135,120,60,30)];
[ButtonOnImageView setImage:[UIImage imageNamed:@"image.jpeg"] forState:UIControlStateHighlighted];
 [ButtonOnImageView setImage:[UIImage imageNamed:@"image2.jpeg"] forState:UIControlStateNormal];
[ButtonOnImageView addTarget:self action:@selector(OnClickOfTheButton) forControlEvents:UIControlEventTouchUpInside];

 [imageView addSubview:ButtonOnImageView];
 [self.view addSubview:imageView];

If you set the images on the button why would you still use the UIImageView? — tcurdt, May 07 '13 at 15:17

score 3 · Answer 2 · answered Oct 30 '13 at 08:12

3

you have to add define button as custom.It will work for you.

UIButton *Button = [UIButton buttonWithType:UIButtonTypeCustom];

answered Oct 30 '13 at 08:12

Akshay

425
1
5
16

score 3 · Answer 3 · edited Jun 26 '13 at 08:23

3

You can use just one button and say:

[UIButton setImage:[imageNamed:@"image.png"]];

edited Jun 26 '13 at 08:23

Navnath Godse

2,233
2
23
32

answered Oct 27 '11 at 14:25

Bensge

145
1
8

your solution seems the most elegant – nurnachman Apr 04 '12 at 18:14

score 1 · Answer 4 · answered Oct 17 '12 at 09:09

1

you need to add the button as a subclass of a

scrollview

not

imageview

.. it wont be clickable if the button is a subclass of a uiimageview .. assign a speacial tag for each button to recognize the clicked button

hope this helps

answered Oct 17 '12 at 09:09

M.Othman

5,132
3
35
39

Shob-Z · Answer 5 · 2013-11-04T12:20:15.860

try setting the userinteraction of the button enabled.

[btn setEnabled:YES];

Coz the UIImageView will set the userinteraction of the button disabled by default.

Else you could try this.Just change the last two lines.

Replace:

[imageView addSubview:btn];
[self addSubview:imageView];

with this:

[self addSubview:imageView];
[self addSubview:btn];

Make sure you add the imageview first and the button second as i have mentioned. else the button would b placed behind the imageview and would seems hidden.

score 0 · Answer 6 · answered Oct 27 '11 at 13:40

If it is clickable image I prefer image over button.

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:CGRectMake(kLeftMargin, 10, self.view.bounds.size.width - kLeftMargin -      kRightMargin, 52)];
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal];
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]];
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];
[sampleButton addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sampleButton];

Thanks for your response. Whether its a imagebutton or not doesnt matter to me. All i want is to make it clickable. I have two choices rite now. Whether i make my button a subview of ImageView or ScrollView which is parent of ImageView. If i make button subview of Scrollview like [self addSubView:btn]; it displays at right position and is clickable but problem is that it is created on all images in the queue because i am making it a subview of parent view i.e scrollview. Else if i make it subview of child view i.e ImageView which is unique for every image, it is not clickable :/ — Wahib Ul Haq, Oct 31 '11 at 13:37

score 0 · Answer 7 · answered Oct 27 '11 at 23:00

I did something like this in one of my apps. I created a xib file that contained a series of images, each with a button drawn over the top. I connected those to the corresponding outlets in the class file. I then worked out which was clicked in touchesBegan using:

if(CGRectContainsPoint(btnFirstButton.frame, touchLocation)){
    //do something useful
}else if(CGRectContainsPoint(btnSecondButton.frame, touchLocation)){
    //do something useful
}

Hope that helps - worked for me :-)

score 0 · Answer 8 · answered Oct 31 '11 at 13:55

I am able to show UIButton on UIImageVIew and this is the update code. I have mentioned the recent problems at bottom.

imageView = [[UIImageView alloc] initWithImage:image]; //initWithImage:image

//imageView.tag = i; // tag our images for later use when we place them in serial form
[imageView setContentMode:UIViewContentModeScaleToFill]; //though it has no impact
imageView.userInteractionEnabled = YES; //to enable touch interaction with image

[self addSubview:imageView];

UIButton *btn = [[UIButton buttonWithType:UIButtonTypeContactAdd] retain]; //Plus icon button

btn.frame = CGRectMake(215, 550, 100, 100);
[btn addTarget:self action:@selector(onClickHotSpotButton) forControlEvents:UIControlEventTouchUpInside]; //it wasnt working

**[self addSubview:btn]; //Buttons are clickable but shows button on all images**

//[imageView addSubview:btn]; //Buttons are not clickable and are shown on all images

I have two choices rite now. Whether i make my button a subview of ImageView or ScrollView which is parent of ImageView. If i make button subview of Scrollview like [self addSubView:btn]; it displays at right position and is clickable but problem is that it is created on all images in the queue because i am making it a subview of parent view i.e scrollview. Else if i make it subview of child view i.e ImageView which is unique for every image, but still its shown on all images and its not clickable :/

Can any1 guide me on how to make it clickable and keeping the linkage between dynamic button and the image unique so that i have different buttons at various positions on each image in the queue.

How to make clickable UIButton over UIImageView?

8 Answers8