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

. 내가 아는 문제 중 하나는 아바타와 함께 작동하지 않는다는 것입니다 (때로는 레이어 뒤에 표시되지만, 전혀 표시되지 않을 수도 있음).

이것은 내 해결책입니다.

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; 설정)를 적용하면 해당 점에 대한 모든 문제가 명확하게 표시됩니다.

(참고라도, UIImageView 등이 view입니다 UIButton 그 내용을 클립으로 설정 될 수 있음)

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