使用 bgcolor 制作透明图像按钮

Posted 2023-02-21

【中文标题】使用 bgcolor 制作透明图像按钮

【英文标题】：Making a Transparent image button with bgcolor

【发布时间】：2011-06-02 06:06:36

【问题描述】：

我有一个透明图像（“hold_empty.png”，下面），我想把它变成一个按钮。在按钮内部会有一个带有彩色背景的视图，该视图的尺寸比实际图像略小，以保持背景颜色。

这是因为图片有圆角，所以我不能简单地在图片上加上背景颜色，因为它看起来比图片大。

图像是一个带有“圆角”的透明正方形。我试图创建的效果应该像图层。

背景颜色层（红色、绿色等） “hold_empty.png”图片（上图） 整个对象（包括背景颜色层）应该是可点击的。

我遇到的问题是只有图像（及其边框）似乎是可点击的，而不是整个对象。

代码如下。

// x,y,w,h
CGRect frame = CGRectMake(10, 10, 72, 72);
CGRect frame2 = CGRectMake(5, 5, 60, 60); // I know this is not filling the image, its just a test

UIView *bgColorView = [[UIView alloc] initWithFrame:frame2];
[bgColorView setFrame:frame2];
bgColorView.backgroundColor = [UIColor redColor];

UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"hold_empty" ofType:@"png"]];

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn addSubview:bgColorView];
[btn setImage:image  forState:UIControlStateNormal];
btn.frame = frame;
[btn addTarget:self action:@selector(btnSelectColor:) forControlEvents:UIControlEventTouchUpInside];


[self.view addSubview:btn];
[bgColorView release];

所以，总结一下：如何制作具有可点击背景颜色的透明图像按钮？

谢谢。

【参考方案1】：

可点击区域通常是按钮的frame，如果你让它们剪辑内容，它不会被它的超级视图剪辑。

您在屏幕上看到某些东西这一事实并不意味着它是“可见的”，因为您可以触摸它。如果您让每个视图都剪切其子视图（通过 IB，或通过设置 view.clipsToBounds = YES;），那么这方面的任何问题都会清楚地显示出来。

（请注意，任何UIButton、UIImageView 等都是view，可以设置为剪辑其内容）

【讨论】：

我尝试将clipToBounds首先放在UIView *bgColorView上，然后是*btn，然后是两者；无论我在哪里强制 clipToBounds 为真，它只会给我相同的结果——图像本身是可点击的，但不是彩色背景部分。我尝试删除 bgColor 图层并使用 clipToBounds = YES 简单地将背景颜色添加到 btn，但它仍然与图像重叠。不过，我可能错过了您的解释。

奇数。你说的（背景）区域上下只有5px宽，左右17px，对吧？

背景区域是您指定的尺寸，因为我只是在测试它是否可以点击，而不管它的大小。它将与最终版本中的图像大小相同（减去几个像素）。

CGRect frame2 = CGRectMake(5, 5, 60, 60);它的顶部/左侧不是 5px 宽，如果我没记错的话，那就是 x 和 y。最后两个参数是宽度和高度。

没错，但是如果您的容器（背景）是 72*72，并且您在 5,5、50*50 大小的位置放入了一些东西，那么您的左/上和 72 的不等边框-50-5=17px 底部/右侧。这听起来很不寻常。 （我看到您更改了问题中的数字）

【参考方案2】：

您是否需要在子视图上启用用户交互？

bgColorView.userInteractionEnabled = YES;

【讨论】：

我尝试先将 userInteractionEnabled 添加到 bgColorView 然后再添加到 btn （尽管没有必要这样做），但这并没有使背景颜色视图可点击。在阅读有关 userInteractionEnabled 的信息后，它说您可以像 IBAction 一样使用它，所以我可以只使用 bgColorView 层来伪造 btn 点击，但问题是将来我可能想在 bgColorView 顶部放置另一个透明层.我会试试看会发生什么。

【参考方案3】：

我想我可能有一个有效的答案，但希望得到您的 cmets/建议。

我创建了一个 UIImageView 并将我的背景颜色层和图像层放入其中，然后将 UIImageView 放入 btn。

现在唯一的问题是按钮看起来不像被按下了。

当我添加“setShowsTouchWhenHighlighted”选项时，当用户点击按钮时，按钮中间会出现一个白色的大星星。

// x,y,w,h
CGRect frame = CGRectMake(10, 10, 72, 72);
CGRect frame2 = CGRectMake(5, 5, 62, 62); // This fits, but may not be 100% accurate

// View
UIView *bgColorView = [[UIView alloc] initWithFrame:frame2];
[bgColorView setFrame:frame2];
bgColorView.backgroundColor = [UIColor redColor];
bgColorView.userInteractionEnabled = YES;
[bgColorView setNeedsDisplayInRect:frame2];

// Image
UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"hold_empty2" ofType:@"png"]];
UIImageView *imgView = [[UIImageView alloc] initWithImage:image];
[imgView insertSubview:bgColorView atIndex:0];

// Btn
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setFrame:frame];
[btn addSubview:imgView];
[btn setShowsTouchWhenHighlighted:YES];
[btn setUserInteractionEnabled:YES];
[btn addTarget:self action:@selector(btnSelectColor:) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:btn];

[imgView release];
[bgColorView release];

【参考方案4】：

我现在已经破解了。我遇到的问题之一是它不能与头像一起使用（有时它会出现在图层后面，有时它根本不会显示）。

这是我的解决方案。

UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"some_avatar" ofType:@"png"]];
    UIImageView *imgView = [[UIImageView alloc] initWithImage:image];

    CGRect fullFrame = CGRectMake(25, 10, 70,72);   
    CGRect frame = CGRectMake(28, 13, 63,65);

    UIButton *h=[UIButton buttonWithType:UIButtonTypeCustom];
    [h setFrame:fullFrame];
    [[h layer] setMasksToBounds:YES];
    //[h setBackgroundImage:image forState:UIControlStateNormal];
    //[h setImage:image forState:UIControlStateNormal];
    [h setShowsTouchWhenHighlighted:YES];
    [h setClipsToBounds:YES];
    CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
    [gradientLayer setBounds:frame];
    [gradientLayer setPosition:CGPointMake([h bounds].size.width/2, [h bounds].size.height/2)];
    [gradientLayer setColors:[NSArray arrayWithObjects:
                              (id)[[UIColor darkGrayColor]CGColor],(id)[[UIColor blackColor] CGColor], nil]];
    [[h layer] insertSublayer:gradientLayer atIndex:0];
    [h insertSubview:imgView atIndex:1];
    [h addTarget:self action:@selector(btnSelectColor:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:h];
    [imgView release];