iOS SDK - drop shadow on masked image

Question

How to drop a shadow on UIImageView which has a masked image?

I don't mean a rectangular shadow - I'd like to apply the same mask effect to shadow too.

Answer 1

To give the Shadow Effect to UIImageView Try below code..

1) #import <QuartzCore/QuartzCore.h> in .h file

2) To give a shadow effect to Cell's UIImageView

mediaImage.layer.shadowColor = [UIColor blackColor].CGColor;
mediaImage.layer.shadowRadius = 10.f;
mediaImage.layer.shadowOffset = CGSizeMake(0.f, 5.f);
mediaImage.layer.shadowOpacity = 1.f;
mediaImage.clipsToBounds = NO;

Answer 2

Well! You can try this one.

// Use a White background to make the shadow prominent.
self.view.backgroundColor = [UIColor whiteColor];

// The image we're going to mask and shadow
UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"yourImage.jpeg"]];
image.center = self.view.center;

// Make new layer to contain shadow and masked image
CALayer *containerLayer = [CALayer layer];
containerLayer.shadowColor = [UIColor blackColor].CGColor;
containerLayer.shadowRadius = 10.f;
containerLayer.shadowOffset = CGSizeMake(0.f, 5.f);
containerLayer.shadowOpacity = 1.f;

// Use the image's layer to mask the image into a circle
image.layer.cornerRadius = roundf(image.frame.size.width/2.0);
image.layer.masksToBounds = YES;

// Add masked image layer into container layer so that it's shadowed
[containerLayer addSublayer:image.layer];

// Add container including masked image and shadow into view
[self.view.layer addSublayer:containerLayer];

Answer 3

You can custom a subclass called NEWImageVIew inherit UIImageView.In NEWImageVIew you can make a property called realImageContainer,which you can set image to this property.

@interface NEWImageView : UIImageView
@property (nonatomic,strong) UIImageView *realImageContainer;
@end

@implementation NEWImageView

- (UIImageView *)realImageContainer {
    if (!_realImageContainer) {
        _realImageContainer = [UIImageView new];
        [self addSubview:_realImageContainer];

        [_realImageContainer mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(self);
        }];
    }
    return _realImageContainer;
}
@end

When you want to make the image masked and shadowed, you can set image in realImageContainer and set mask to realImageContainer layer,so you get the masked layer.

NEWImageView *newImgView = [[NEWImageView alloc] init];
newImgView.backgroundColor = [UIColor clearColor];
newImgView.contentMode = UIViewContentModeScaleAspectFit;
newImgView.realImageContainer.image = self.image;
newImgView.realImageContainer.layer.mask = self.maskLayer;//this masklayer you     can make youself

What about shadow?Because the realImageContainer is added to NEWImageView's view,the NEWImageView's layer not used yet,you can set shadow here.

newImgView.layer.shadowColor = [UIColor blackColor].CGColor;
newImgView.layer.shadowOpacity = 0.33;
newImgView.layer.shadowRadius = 8;
newImgView.layer.shadowOffset = CGSizeMake(0, 19);

so you get a masked and shadowed image.（I use a triangle image as mask,so I get this image）