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.

Answer 2

Following are the steps for User Defined Runtime Attribute.

1. Open a storyboard or xib file in Interface Builder.
2. In Interface Builder, select the object to add the attribute to.
3. Choose View > Utilities > Show Identity Inspector.

The Identity inspector appears in the utility area. As shown below, the user defined runtime attributes editor is one of the items in the inspector.

4. Click the Add button (+) in the lower left of the user defined runtime attributes editor.

Answer 3

I am sorry, I only have the Swift solution but heres my UIView extensions which I use to do this task:

// MARK: Layer Extensions
extension UIView {

    func setCornerRadius(#radius: CGFloat) {
        self.layer.cornerRadius = radius
        self.layer.masksToBounds = true
    }

    func addShadow(#offset: CGSize, radius: CGFloat, color: UIColor, opacity: Float, cornerRadius: CGFloat? = nil) {
        self.layer.shadowOffset = offset
        self.layer.shadowRadius = radius
        self.layer.shadowOpacity = opacity
        self.layer.shadowColor = color.CGColor
        if let r = cornerRadius {
            self.layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: r).CGPath
        }
    }

    func addBorder(#width: CGFloat, color: UIColor) {
        self.layer.borderWidth = width
        self.layer.borderColor = color.CGColor
        self.layer.masksToBounds = true
    }

    func drawStroke(#width: CGFloat, color: UIColor) {
        let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.w, height: self.w), cornerRadius: self.w/2)
        let shapeLayer = CAShapeLayer ()
        shapeLayer.path = path.CGPath
        shapeLayer.fillColor = UIColor.clearColor().CGColor
        shapeLayer.strokeColor = color.CGColor
        shapeLayer.lineWidth = width
        self.layer.addSublayer(shapeLayer)
    }

}

I never tried it but you could just paste this code to any Swift file and probably call them from Obj-C code.

Answer 4

For give Border Of UIView.

Add #import "QuartzCore/QuartzCore.h" fram work.

myView.layer.cornerRadius = 15.0; // set as you want.
myView.layer.borderColor = [UIColor lightGrayColor].CGColor; // set color as you want.
myView.layer.borderWidth = 1.0; // set as you want.