使用bgcolor制作透明图像按钮

Question

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

原因是因为图像有圆角，因此我不能简单地在图像上添加背景颜色，因为它看起来比图像大。

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

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

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

代码如下。

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

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

我创建了一个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];