How can I build a transparent view with shadow outside in iOS?

Question

I want to build a totally transparent view, the backgroundColor maybe clearColor. Inside this view I want to put a small image. And in the four sides of this transparent view, I want to see the effect of shadow. The shadow must be totally outside the view. I know that I must override the drawRect method in UIView, but don't know how to do this.

I just want an area that has a transparent rectangle inside, and outside the four sides of the transparent rectangle we can see some effect like the shadow. — Webster Wu, Apr 09 '14 at 06:22
Try to add the shadow effect to the imageView where you are trying to set the small image you mentioned. The small image can be modified accordingly to fit the imageView with the transparency effect in the image itself. — borncrazy, Apr 09 '14 at 06:31
@WebsterWu this is finally possible in UIKit: https://stackoverflow.com/a/59092828/294884 — Fattie, Nov 25 '22 at 14:14

score 0 · Answer 1 · answered Apr 09 '14 at 05:13

try this....

    UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(50.0, 100.0, 100.0, 100.0)];
    shadowView.layer.cornerRadius = 15.0;
    CALayer *layer = shadowView.layer;
    layer.shadowOpacity = 1.0;
    layer.shadowColor = [[UIColor blackColor] CGColor];
    layer.shadowOffset = CGSizeMake(0,0);
    layer.shadowRadius = 15;
    [self.view addSubview:shadowView];

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 50.0, 50.0)];
    [imageView setImage:[UIImage imageNamed:@"icon.png"]];
    [shadowView addSubview:imageView];

Actually, the shadow View did not have the shadow effect outside its frame. If I set the shadow view with clearColor background, the imageview got a shadow with is not what I want. — Webster Wu, Apr 09 '14 at 05:52

score -2 · Answer 2 · answered Apr 09 '14 at 03:39

What is the problem with doing something like this?

#import <QuartzCore/QuartzCore.h> // at the top of the file

UIView *transparentView = [[UIView alloc] initWithFrame:CGRectMake(50,50,200,200)];
transparentView.backgroundColor = [UIColor greenColor];
transparentView.alpha = 0.5f;
transparentView.clipsToBounds = NO;
transparentView.layer.shadowColor = [UIColor blackColor].CGColor;
transparentView.layer.shadowOpacity = 1;
transparentView.layer.shadowRadius = 1;

UIImageView *imageView = [[]UIImageView alloc] initWithFrame:CGRectMake(50, 50, 50, 50)];
imageView.image = [UIImage imageNamed:@"IMAGE NAME"];
[transparentView addSubview:imageView];

As you can see, based on your description, no drawRect: required, unless for some reason you want to draw the shadow manually, but there isn't a reason to.

thanks for the advice, but the problem is that I want the view to be totally transparent, so I need to set the backgroundColor as clearcolor, but if I do that the shadow effect will gone. — Webster Wu, Apr 09 '14 at 03:54

How can I build a transparent view with shadow outside in iOS?

2 Answers2