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.

score 54 · Accepted Answer · answered Jun 27 '12 at 00:21

54

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];

answered Jun 27 '12 at 00:21

Mick MacCallum

129,200
40
280
281

1

I don't think you are supposed to add subviews to UIImageView. – Herman J. Radtke III Mar 04 '13 at 05:55
This [comment](http://stackoverflow.com/questions/4892770/why-cant-you-add-a-subview-to-a-uiimageview-that-is-the-view-outlet-of-a-uiview#comment21186181_4892770) says it best. – Herman J. Radtke III Mar 04 '13 at 16:40
1

@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.. – Mick MacCallum Mar 04 '13 at 16:48
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. – Herman J. Radtke III Mar 04 '13 at 20:41
@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! – Mick MacCallum Mar 04 '13 at 20:49
1

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. – Chen Li Yong May 03 '16 at 04:50

score 17 · Answer 2 · edited May 23 '17 at 11:54

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)

score 8 · Answer 3 · answered Jun 27 '12 at 06:16

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

could you elaborate it plz? – Vaibhav Saran Jun 05 '15 at 08:25 — Vaibhav Saran, Jun 05 '15 at 08:25

score 5 · Answer 4 · edited Apr 04 '13 at 12:16

5

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];

edited Apr 04 '13 at 12:16

Ionică Bizău

109,027
88
289
474

answered Jun 27 '12 at 01:02

pasawaya

11,515
7
53
92

3

Uh oh, you made a boo boo. CALayer's background color is a CGColor, not a UIColor ^^;. – borrrden Jun 27 '12 at 04:34

score 4 · Answer 5 · answered Jun 27 '12 at 00:08

4

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

answered Jun 27 '12 at 00:08

DrummerB

39,814
12
105
142

grow4gaurav · Answer 6 · 2020-10-30T14:10:29.857

2

Swift 5 Version:

func addOverlay(on view: UIView) {
    let overlay: UIView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height))
    overlay.backgroundColor = UIColor.gray
    view.addSubview(overlay)
}

edited Oct 30 '20 at 14:10

answered Oct 30 '20 at 08:03

grow4gaurav

3,145
1
11
12

adding black overlay with 0.3 opacity over UIImageView

6 Answers6

Linked