Создание прозрачной кнопки изображения с 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;), тогда любые проблемы в этом отношении будут очевидны.

(Обратите внимание, что любой 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];