adding black overlay with 0.3 opacity over UIImageView

Question

I have a UIImageView and I wanted to add a black overlay on top of it. What is the best way of doing this without having to override drawRect? I was thinking of adding a CALayer on top of it. But unsure how to get a black CALayer with a .3 alpha.

Solution 1

Something like this?

UIView *overlay = [[UIView alloc] initWithFrame:CGRectMake(0, 0, myImageView.frame.size.width, myImageView.frame.size.height / 2)];
[overlay setBackgroundColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:0.3]];
[myImageView addSubview:overlay];

Solution 2

Thanks to Mick MacCallum

Swift 3 Version

let overlay: UIView = UIView(frame: CGRect(x: 0, y: 0, width: cell.imageView.frame.size.width, height: cell.imageView.frame.size.height))
overlay.backgroundColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.1)
cell.imageView.addSubview(overlay)

I have used for Swift 2.2

let overlay: UIView = UIView(frame: CGRectMake(0, 0, cell.imageView.frame.size.width, cell.imageView.frame.size.height))
overlay.backgroundColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.1)
cell.imageView.addSubview(overlay)

Solution 3

The MDT answer is correct. This is just another way to use a CAGradientLayer beside of UIView . I think it will make what you want with more graphical options.

first you should add

#import <QuartzCore/QuartzCore.h>

to your ViewController.m and any place that you want to add this overlay to your UIImage use:

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = myImageView.layer.bounds;

gradientLayer.colors = [NSArray arrayWithObjects:
                        (id)[UIColor colorWithWhite:0.9f alpha:0.7f].CGColor,
                        (id)[UIColor colorWithWhite:0.0f alpha:0.3f].CGColor,
                        nil];

gradientLayer.locations = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0.0f],
                           [NSNumber numberWithFloat:0.5f],
                           nil];

//If you want to have a border for this layer also
gradientLayer.borderColor = [UIColor colorWithWhite:1.0f alpha:1.0f].CGColor;
gradientLayer.borderWidth = 1;
[myImageView.layer addSublayer:gradientLayer];

I hope this will help you make it

Solution 4

This is similar to MDT's answer except using CALayer properties:

UIView *blackOverlay = [[UIView alloc] initWithFrame: imageView.frame];
blackOverlay.layer.backgroundColor = [[UIColor blackColor] CGColor];
blackOverlay.layer.opacity = 0.3f;
[self.view addSubview: blackOverlay];

Solution 5

Did you think about adding a UIView with black backgroundColor and 0.3 alpha as a subview to the image view?

View more solutions

Comments

[borrrden]

Uh oh, you made a boo boo. CALayer's background color is a CGColor, not a UIColor ^^;.

[Herman J. Radtke III]

I don't think you are supposed to add subviews to UIImageView.

[Herman J. Radtke III]

This comment says it best.

[Mick MacCallum]

@HermanJ.RadtkeIII So it's an opinion? Adding a subview to an imageview is the lesser of two evils here. It isn't officially stated anywhere that you shouldn't do this, whereas it is a blatant misuse of colorWithPatternImage:'s intended functionality.... And... doing this will also forfeit your ability to use the image view's built in content modes, like aspect fill/fit, etc..

[Herman J. Radtke III]

I was not advocating using colorWithPatternImage: as a solution. I normally create a UIView that contains two subviews: a UIImageView and a UIView that has a the overlay. I think the fact that Apple does not allow a subview to be created in IB is enough of a hint that we should not be leading people down this path.

[Mick MacCallum]

@HermanJ.RadtkeIII I can see your point. I'll edit this post to include more solutions to this problem later when I'm not on my phone. Thanks for bringing this up!

[Vaibhav Saran]

could you elaborate it plz?

[Chen Li Yong]

Hi. I believe this post has already old and cold, but in this case, I sided with @MickMacCallum. Also, many times than not, Apple does not add configurable things into Interface Builder, such as does not let us add border into a UIView. Does that means we shouldn't / couldn't add border to UIView? Only UITextField get to have border? As long as Apple does not make add subview for UIImage is a deprecated thing, then I say it's a fair game.