Create inner shadow in UIView

Question

I would like create an inner shadow on my UIView on iPad like that :

UIView with shadow

This UIView could change size so I can't use a simple image to create this kind of shadow.

I have tested with setShadow etc., but it's only a dropshadow that is created.

Any idea how to create this kind of shadow?

score 9 · Answer 1 · answered May 14 '13 at 04:15

9

You may find it useful, I made an UIView Category for that

https://github.com/Seitk/UIView-Shadow-Maker

answered May 14 '13 at 04:15

Seitk

91
1
1

Thanks, that is a brilliant class! – Jack Solomon Dec 09 '13 at 00:13
@Seitk you're a star ! thanks – Petar Nov 19 '14 at 12:27
Easy, efficient, and flexible. Much appreciated! – Nerrolken Sep 02 '15 at 03:47
perfect.. i have tried lots of code, but this is the BEST. – Mehul Sep 15 '16 at 13:52

score 6 · Accepted Answer · answered Feb 09 '12 at 16:16

Create the shadow as a transparent layer at a particular size, then create a stretchable image, like this:

UIImage *shadowImage = [UIImage imageNamed:@"shadow.png"];
shadowImage = [shadowImage stretchableImageWithLeftCapWidth:floorf(shadowImage.size.width/2) topCapHeight:floorf(shadowImage.size.height/2)];

You can then put that as the image in a UIImageView with contentMode scale to fit and it will work the way you want.

Lets say your view is called "myView". You can add the shadow like this:

UIImageView *shadowImageView = [[UIImageView alloc] initWithImage:shadowImage];
shadowImageView.contentMode = UIViewContentModeScaleToFill;
shadowImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
shadowImageView.frame = myView.bounds;
[myView addSubview:shadowImageView];
[shadowImageView release]; // only needed if you aren't using ARC

You can also do most of this in interface builder if you prefer, as long as you create the stretchable image itself in code.

How I can do to add this stretch image on background of my UIView ? With `backgroundColor` method this doesn't work. — alexmngn, Feb 09 '12 at 16:36
Did you see the second part of my answer about using a UIImageView and adding it as a subview to your main view? — Nick Lockwood, Feb 09 '12 at 16:41
backgroundColor images always tile rather than stretching, so you can't use that approach. Also, if you want the shadow to appear in front of the rest of your view content, you'll need to make sure that the imageView is added on top of all the other subviews. — Nick Lockwood, Feb 09 '12 at 16:42

score 0 · Answer 3 · edited May 23 '17 at 12:09

0

This question was already partially answered in SO

view.layer.masksToBounds = NO;
view.layer.cornerRadius = 8; // if you like rounded corners
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = 0.5;
CGFloat indent = 10;
CGRect innerRect = CGRectMake(indent,indent,view.frame.size.width-2*indent,view.frame.size.height-2*indent);
view.layer.shadowPath = [UIBezierPath bezierPathWithRect:innerRect].CGPath;

Play around with the variables until they suit your shadow style.

UPDATE

Instead you can draw an outer shadow on a smaller centered view which lies on top of your existing view.

CGFloat indent = 10;
CGRect innerRect = CGRectMake(indent,indent,view.frame.size.width-2*indent,view.frame.size.height-2*indent);
UIView * shadowView = [[UIView alloc] initWithFrame:innerRect];
shadowView.backgroundColor = [UIColor clearColor];
shadowView.layer.masksToBounds = NO;
shadowView.layer.cornerRadius = 8; // if you like rounded corners
shadowView.layer.shadowRadius = 5;
shadowView.layer.shadowOpacity = 0.5;
shadowView.layer.shadowPath = [UIBezierPath bezierPathWithRect:shadowView.bounds].CGPath;
[view addSubview:shadowView];
[shadowView release];

edited May 23 '17 at 12:09

Community

1
1

answered Feb 09 '12 at 16:23

Joel Kravets

2,473
19
16

That's a great way to draw an *outer* shadow - but I'm not sure how easy it is to adapt that to draw an *inner* shadow. – Nick Lockwood Feb 09 '12 at 16:35
By placing a clear smaller view on top of your existing view, and drawing an outer shadow on the smaller clear subview. As long as the smaller view is centered you should be okay. – Joel Kravets Feb 09 '12 at 16:38
3

That won't work, the shadow would fade outwards towards the edge instead of getting darker. Also, I don't think transparent views can cast shadows. – Nick Lockwood Feb 09 '12 at 16:43
4

Did you try this at all? That code does nothing. It would appear as if shadows don't draw inside a view. As for solution #2, transparent views don't draw shadows. This answer is a waste of time, try your code before posting it. – n13 Dec 28 '12 at 12:39

Create inner shadow in UIView

3 Answers3

Linked