Create inner shadow in UIView

Question

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

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?

Solution 1

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.

Solution 2

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

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

Comments

[Nick Lockwood]

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.

[alexmngn]

How I can do to add this stretch image on background of my UIView ? With backgroundColor method this doesn't work.

[Joel Kravets]

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.

[Nick Lockwood]

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]

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]

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.

[alexmngn]

It's working fine ! Thanks you

[n13]

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.

[Jack Solomon]

Thanks, that is a brilliant class!

[Petar]

@Seitk you're a star ! thanks

[Nerrolken]

Easy, efficient, and flexible. Much appreciated!

[Mehul]

perfect.. i have tried lots of code, but this is the BEST.