iOS : How to add drop shadow and stroke shadow on UIView?

Question

I want to add drop shadow and stroke shadow on UIView This is what my designer given me to apply shadow,

• For drop shadow, he told me to use RGB(176,199,226) with 90% opacity, distance-3 and size-5

• For stroke shadow, he told to apply, RGB(209,217,226) of size-1 and 100% opacity.

This is photoshop applied effects screen,

The view with the required shadow (expected output)

I tried the following to get the drop shadow

viewCheck.layer.masksToBounds = NO;
viewCheck.layer.cornerRadius = 5.f;
viewCheck.layer.shadowOffset = CGSizeMake(.0f,2.5f);
viewCheck.layer.shadowRadius = 1.5f;
viewCheck.layer.shadowOpacity = .9f;
viewCheck.layer.shadowColor = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowPath = [UIBezierPath bezierPathWithRect:viewCheck.bounds].CGPath;

And this is the result of it,

I'm having problem in understanding how I can apply stroke and drop shadow as showing into photoshop screenshots (I've added above). How to apply Distance, Spread, Size, Position?

Can someone point me to a guide to applying these kind of shadows? There's lots of shadow effects coming out and I want to learn how it can be possible instead asking each of the questions here!

Thanks :)

Answer 1

I believe most of configuration you look for can be achieved by employing the shadowPath property.

viewCheck.layer.shadowRadius  = 1.5f;
viewCheck.layer.shadowColor   = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowOffset  = CGSizeMake(0.0f, 0.0f);
viewCheck.layer.shadowOpacity = 0.9f;
viewCheck.layer.masksToBounds = NO;

UIEdgeInsets shadowInsets     = UIEdgeInsetsMake(0, 0, -1.5f, 0);
UIBezierPath *shadowPath      = [UIBezierPath bezierPathWithRect:UIEdgeInsetsInsetRect(viewCheck.bounds, shadowInsets)];
viewCheck.layer.shadowPath    = shadowPath.CGPath;

e.g, by setting shadowInsets this way

UIEdgeInsets shadowInsets = UIEdgeInsetsMake(0, 0, -1.5f, 0);

you will get a nice desirable shadow:

You can decide now how you want the shadow rectangle to be constructed by controlling the shadow path rectangle insets.