我如何制作可点击的uiimage？

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.

我有一个菜单栏作为uiimage。我想在这个菜单栏上制作5个菜单是可点击的并链接到另一个视图。谁能告诉我我能做到的方式?我发现人们在uiimage上使用uibutton,对我来说这很好,我怎样才能将菜单栏分成5块。

Thanks for both rmaddy and Brent Royal-Gordon

感谢rmaddy和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:

我决定使用uiimage作为菜单栏背景并在其上添加uibutton。我尝试这样的事情:

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?

但是当我在模拟器上运行时,按钮在屏幕上不可见。我做错了什么?

5 个解决方案

#1

Using a gesture recognizer is a bad idea because:

使用手势识别器是一个坏主意,因为:

It forces you to interpret the touch areas for each submenu yourself.

它会强制您自己解释每个子菜单的触摸区域。

It's opaque to VoiceOver.

它对VoiceOver不透明。

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.

你应该做的是在像Photoshop这样的图形工具中将单个图像分割成五个,并使这些切片中的每一个都成为UIButton的图像。您需要为这些图像设计突出显示的状态(当其中一个图像被按下时显示),但无论如何您应该这样做。

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.

如果必须在代码中对图像进行切片,可以使用UIGraphicsBeginImageContextWithOptions(size,NO,0.0)并使用drawAtPoint绘制大图像:使用适当的偏移量来获得所需的切片,但是99.99999%的时间,它在每个你的应用程序运行在一个小巧,缓慢,电池供电的iOS设备上时,在你的大而强劲的墙上插座驱动的Mac上切割图像会更有意义。

#2

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

将UITapGestureRecognizer与包含图像的UIImageView一起使用。您需要在图像视图上将userInteractionEnabled属性设置为YES。

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.

如果您想要更多控制,最好将图像拆分为5并创建5个UIButton实例。

#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

希望这可以帮助

#4

issue is with the Width of the button.Try

问题是按钮的宽度。试试

this

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

(increase width to 100)

(将宽度增加到100)

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

如果背景为白色,则可能需要更改标题颜色

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

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

#5

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

您可以先添加按钮视图,然后在按钮上添加imageview,请参阅下面的代码:

//Add first button

//添加第一个按钮

UIButton *btnImage = [UIButton buttonWithType:UIButtonTypeCustom];

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];

#1