使用 bgcolor 制作透明图像按钮

Question

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

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

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

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

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

代码如下。

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

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

谢谢。

Answer 1

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

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

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

Answer 2

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

bgColorView.userInteractionEnabled = YES;

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

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