如何在UIImageView上创建可点击的UIButton？

Question

我想创建一个UIButton以在UIImageView上显示。我的代码片段如下：

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

我的应用程序在我想要的图像部分精确显示按钮，但它无法响应点击图像。相反，它会检测到单击并将其输出到日志中。但我希望这个按钮在选择时能够被点击并执行一些功能。

提前感谢。

wahib

- Wahib Ul Haq

Answer 1

我尝试了这个方法，对我有效……

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

- alok kumar singh

---

如果您已经在按钮上设置了图像，为什么还要使用UIImageView？ - tcurdt

Answer 2

您可以只使用一个按钮并说出以下内容：

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

- Bensge

---

你的解决方案似乎是最优雅的。 - nurnachman

Answer 3

1. 您需要将定义按钮添加为自定义按钮。这对您有用。

   UIButton *Button = [UIButton buttonWithType:UIButtonTypeCustom];

- Akshay

Answer 4

尝试将按钮的用户交互设置为启用。

[btn setEnabled:YES];

因为UIImageView默认会将按钮的用户交互设置为禁用。

否则，您可以尝试这个。只需更改最后两行。

替换：

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

使用这个：

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

请确保按照我提到的顺序先添加ImageView，再添加Button。否则，Button将被放置在ImageView后面，看起来会被隐藏。

- Shob-Z

Answer 5

你需要将按钮作为

scrollview

的子类添加，而不是

imageview

的子类。如果将按钮作为 uiimageview 的子类，则无法点击。为每个按钮分配一个特殊标签以识别所点击的按钮。

希望这可以帮到你。

- M.Othman

Answer 6

如果是可点击的图像，我更喜欢使用图像而不是按钮。

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

- Manali

---

感谢您的回复。对我来说，它是不是一个imagebutton并不重要。我想要的只是让它可以被点击。我现在有两个选择。我可以将我的按钮作为ImageView或ScrollView的子视图。如果我将按钮作为Scrollview的子视图添加，如[self addSubView:btn]; 它会显示在正确的位置并且可以被点击，但问题是它会在队列中的所有图像上创建，因为我将其作为父视图即scrollview的子视图。否则，如果我将它作为唯一的每个图像的子视图即ImageView的子视图，它就无法被点击 :/ - Wahib Ul Haq

Answer 7

我在我的一个应用程序中做了类似的事情。我创建了一个包含一系列图像的xib文件，每个图像上都绘制了一个按钮。我将它们连接到类文件中对应的输出口。然后，我使用touchesBegan方法确定哪个按钮被点击了。

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

希望这能帮到你 - 对我有用 :-)

- JanB

Answer 8

我能够在UIImageVIew上显示UIButton，这是更新的代码。我已经在底部提到了最近遇到的问题。

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

我现在有两个选择。要么将我的按钮作为ImageView或ScrollView的子视图。如果我将按钮作为ScrollView的子视图，如[self addSubView：btn];它会显示在正确的位置并且可点击，但问题是因为我将其作为父视图即ScrollView的子视图而在队列中的所有图像上都创建了它。否则，如果我将其作为唯一的每个图像的子视图即ImageView的子视图，但仍然显示在所有图像上并且不可点击 :/

有人能指导我如何使其可点击并保持动态按钮和图像之间的链接唯一，以便我在队列中的每个图像上具有不同位置的不同按钮。

- Wahib Ul Haq