Создание кнопки прозрачного изображения с помощью 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

Возможно, вам нужно включить взаимодействие с пользователем в подпредставлении?

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

Обычно активируемая область - это frame кнопки, которая не будет обрезана ее суперпредставлениями, если вы позволите им обрезать содержимое.

Тот факт, что вы видите что-то на экране не означает, что оно «видимое» в том смысле, что вы можете прикоснуться к нему.Если вы разрешите каждому просмотру обрезать свои подпредставления (через IB или установив view.clipsToBounds = YES;), тогда любые проблемы в этом отношении будут четко видны.

(Обратите внимание, что любые UIButton, UIImageView и т. Д.view и может быть установлен для ограничения его содержимого)