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

私は今それを割れてきました。私が抱えていた問題の1つは、アバターで作業していないということでした（レイヤーの後ろに表示される場合もあれば、まったく表示されない場合もあります）。

これは私のソリューションです。

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

Answer 2

クリック可能な領域は、コンテンツをクリップできるようにする場合は、スーパービューでクリップされないボタンの一般的にframeです。

を参照しても画面に何かが表示されるという意味では、画面に触れることはできません。すべてのビューのサブビューを（IB、またはview.clipsToBounds = YES;を設定して）クリップさせると、その点に関する問題がはっきりと表示されます。

（任意のUIButton、UIImageViewなどがviewであり、その内容をクリップするように設定することができることに注意してください）

Answer 3

あなたは多分サブビューにユーザーとの対話を有効にする必要がありますか？

bgColorView.userInteractionEnabled = YES; 

Answer 4

私は、動作しているかもしれないが、あなたのコメント/提案が欲しいと思います。

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