How can i make clickable uiimage?

Question

I have one menubar as a uiimage. I want to make 5 menu on this menubar are clickable and link to another view. Can anyone tell me the way i can do that? I found people using uibutton on the uiimage, Is that fine for me and how can i separate the menu bar to 5 pieces.

Thanks for both rmaddy and Brent Royal-Gordon

I decided to use the uiimage as a menubar background and add the uibutton on it. i try some thing like this:

NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle]
                                     pathForResource:@"MOVIE" ofType:@"MP4"]];

MPMoviePlayerController *moviePlayer = [[MPMoviePlayerController alloc] initWithContentURL:url];

[[NSNotificationCenter defaultCenter] addObserver:self
                                         selector:@selector(moviePlayBackDidFinish:)
                                             name:MPMoviePlayerPlaybackDidFinishNotification
                                           object:moviePlayer];

moviePlayer.controlStyle = MPMovieControlStyleNone;
moviePlayer.repeatMode = MPMovieRepeatModeOne;
moviePlayer.shouldAutoplay = YES;
moviePlayer.scalingMode = MPMovieScalingModeFill;
[moviePlayer.view setFrame:CGRectMake(0,0,1330,320)];

[scrollView setBackgroundColor:[UIColor blackColor]];
[scrollView setContentSize:CGSizeMake(1330,320)];
[scrollView setScrollEnabled: YES];
[scrollView setShowsHorizontalScrollIndicator:NO];
[scrollView setShowsVerticalScrollIndicator:NO];

[scrollView addSubview:moviePlayer.view];
[self.view addSubview:scrollView];

UIImageView *imageView = [[UIImageView alloc] initWithFrame:image.frame];   
UIImage *menubar = [UIImage imageNamed:@"BG.jpg"];
imageView = [[UIImageView alloc] initWithImage:menubar];
imageView.contentMode = UIViewContentModeScaleToFill;
imageView.frame = CGRectMake(0, 258, imageView.frame.size.width, 25);
[self.view addSubview:imageView];

[imageView setUserInteractionEnabled:YES];

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];   
[btn setFrame:CGRectMake(0,258,30,25)];
[btn addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchUpInside];
[btn setTitle:@"HOME" forState:UIControlStateNormal];

[imageView addSubview:btn];

but the button is not visible on screen when i run on the simulator. What did i do wrong?

Answer 1

Using a gesture recognizer is a bad idea because:

1. It forces you to interpret the touch areas for each submenu yourself.
2. It's opaque to VoiceOver.
3. It doesn't show a highlight when the user touches a button. These sorts of highlights help the user understand what the user interface is doing, so they're very valuable.

What you should do is split the single image into five in a graphics tool like Photoshop, and make each of these slices the image of a UIButton . You'll need to design highlighted states for these images (shown when one of them is held down), but you should be doing that anyway.

If you must slice the image in code, you can do that by using UIGraphicsBeginImageContextWithOptions(size, NO, 0.0) and drawing your big image using drawAtPoint: with an appropriate offset to get the slice you want, but 99.99999% of the time, it'll make more sense to slice the images once on your big, beefy, wall-plug-powered Mac than every time your app runs on a tiny, slow, battery-powered iOS device.

Answer 2

Use a UITapGestureRecognizer with the UIImageView containing your image. You will need to set the userInteractionEnabled property to YES on the image view.

When you get the tap event, look at where in the view the tap occurred. Based on the location, perform one of the five menu actions.

If you want more control, you may be better off splitting the image into 5 and creating 5 UIButton instances instead.

Answer 3

Why you add it the buttons to image view ? Just adding it to the View. It will solve the problem(as i understand).

[imageView addSubview:btn];

Try like this

[self.view addSubview:btn];

Hope this helps

Answer 4

issue is with the Width of the button.Try

this

[btn setFrame:CGRectMake(0,258,100,50)]

(increase width to 100)

and you may need to change the title colour if your background is white

[btn setTitleColor:[UIColor blackColor] forState: UIControlStateNormal];

Answer 5

you Can first add button view then add imageview on the button please see bellow code :

//Add first button

UIButton *btnImage = [UIButton buttonWithType:UIButtonTypeCustom];

btnImage.frame = CGRectMake(0, 4, 60, 56);

btnImage.backgroundColor = [UIColor colorWithRed:231.0f/255.0f green:232.0f/255.0f blue:234.0f/255.0f alpha:1.0];

btnImage.layer.borderColor = [UIColor colorWithRed:183.0f/255.0f green:184.0f/255.0f blue:186.0f/255.0f alpha:1.0].CGColor;

btnImage.layer.borderWidth = 1.0f;

// Add imageview on button 

UIImageView *yourImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
[yourImageView setImage:[UIImage imageNamed:@"myimage.png"]];
yourImageView.center = CGPointMake(btnImage.frame.size.width/2, btnImage.frame.size.height/2);
[btnImage addSubview:yourImageView];

[self.view addSubview:btnImage];