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

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,


enter image description hereenter image description here

The view with the required shadow (expected output)


enter image description here

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,


enter image description here

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 :)


4 个解决方案



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:


enter image description here

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




Following are the steps for User Defined Runtime Attribute.


  1. Open a storyboard or xib file in Interface Builder.
  2. 在接口構建器中打開故事板或xib文件。
  3. In Interface Builder, select the object to add the attribute to.
  4. 在Interface Builder中,選擇要添加屬性的對象。
  5. Choose View > Utilities > Show Identity Inspector.
  6. 選擇查看>實用程序>,顯示標識檢查器。

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.


enter image description here

  1. Click the Add button (+) in the lower left of the user defined runtime attributes editor.
  2. 單擊用戶定義的運行時屬性編輯器左下角的Add按鈕(+)。

enter image description here



For give Border Of UIView.


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

添加#導入“QuartzCore / QuartzCore。h“弗拉姆號工作。

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.



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


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

我從來沒有嘗試過,但是你可以把這些代碼粘貼到任何Swift文件中,也可以從object - c代碼中調用它們。



粤ICP备14056181号  © 2014-2021