IOS：如何在 4 侧（顶部、右侧、底部和左侧）为 UIView 制作阴影

IOS: How to make a shadow for UIView on 4 side (top,right,bottom and left)

提问by Phan Van Linh

I am using the code below to make the shadow for my ImageView

我正在使用下面的代码为我的 ImageView

UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:self.avatarImageView.bounds];
self.avatarImageView.layer.masksToBounds = NO;
self.avatarImageView.layer.shadowColor = [UIColor blackColor].CGColor;
self.avatarImageView.layer.shadowOffset = CGSizeMake(5.0f, 5.0f);
self.avatarImageView.layer.shadowOpacity = 0.8f;
self.avatarImageView.layer.shadowPath = shadowPath.CGPath;

It will drop a shadow in the right and bottom like this image.

它会像这张图片一样在右侧和底部投下阴影。

Now I want to make my ImageViewalso have a shadow in top and left. What should I change in code? Is possible to make the view contains shadow in top,right,bottom,left by config in code only or I need to create other layout view for shadow? Any help would be great appreciated.

现在我想让我的ImageView顶部和左侧也有一个阴影。我应该在代码中更改什么？是否可以仅通过代码中的配置使视图在顶部、右侧、底部、左侧包含阴影，或者我需要为阴影创建其他布局视图？任何帮助将不胜感激。

Here is what I want to achieve

这是我想要实现的目标

Update
Thank @Dipen Panchasara for give a simple solution. Follow @Dipen Panchasara (with the shadow color is black) I will have the shadow image like this

更新
感谢@Dipen Panchasara 提供一个简单的解决方案。关注@Dipen Panchasara（阴影颜色为黑色）我会有这样的阴影图像

回答by Dipen Panchasara

Only following code will do the job for your requirement, You don't need to create UIBezierPathfor shadow path.

只有以下代码才能满足您的要求，您无需UIBezierPath为阴影路径创建。

// *** Set masks bounds to NO to display shadow visible ***
self.avatarImageView.layer.masksToBounds = NO;
// *** Set light gray color as shown in sample ***
self.avatarImageView.layer.shadowColor = [UIColor lightGrayColor].CGColor;
// *** *** Use following to add Shadow top, left ***
self.avatarImageView.layer.shadowOffset = CGSizeMake(-5.0f, -5.0f);

// *** Use following to add Shadow bottom, right ***
//self.avatarImageView.layer.shadowOffset = CGSizeMake(5.0f, 5.0f);

// *** Use following to add Shadow top, left, bottom, right ***
// avatarImageView.layer.shadowOffset = CGSizeZero;
// avatarImageView.layer.shadowRadius = 5.0f;

// *** Set shadowOpacity to full (1) ***
self.avatarImageView.layer.shadowOpacity = 1.0f;

回答by gvuksic

Like this:

像这样：

float shadowSize = 10.0f;
UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(self.avatarImageView.frame.origin.x - shadowSize / 2,
                                                                       self.avatarImageView.frame.origin.y - shadowSize / 2,
                                                                       self.avatarImageView.frame.size.width + shadowSize,
                                                                       self.avatarImageView.frame.size.height + shadowSize)];
self.avatarImageView.layer.masksToBounds = NO;
self.avatarImageView.layer.shadowColor = [UIColor blackColor].CGColor;
self.avatarImageView.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
self.avatarImageView.layer.shadowOpacity = 0.8f;
self.avatarImageView.layer.shadowPath = shadowPath.CGPath;

Swift 3version:

斯威夫特 3版本：

    let shadowSize : CGFloat = 5.0
    let shadowPath = UIBezierPath(rect: CGRect(x: -shadowSize / 2,
                                               y: -shadowSize / 2,
                                               width: self.avatarImageView.frame.size.width + shadowSize,
                                               height: self.avatarImageView.frame.size.height + shadowSize))
    self.avatarImageView.layer.masksToBounds = false
    self.avatarImageView.layer.shadowColor = UIColor.black.cgColor
    self.avatarImageView.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
    self.avatarImageView.layer.shadowOpacity = 0.5
    self.avatarImageView.layer.shadowPath = shadowPath.cgPath

回答by GIJOW

Little less code for swift 3:

swift 3 的代码更少：

    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.shadowOpacity = 0.7
    view.layer.shadowOffset = CGSize.zero
    view.layer.shadowRadius = 4
    view.layer.shadowPath = UIBezierPath(rect: planView.bounds).cgPath

回答by Rajan Singh

The best solution for shadow with a rounded corner on the same view and no need to do clipsToBounds or maskToBounds

同一视图上有圆角阴影的最佳解决方案，无需执行 clipsToBounds 或 maskToBounds

func addShadow(cornerRadius: CGFloat, maskedCorners: CACornerMask, color: UIColor, offset: CGSize, opacity: Float, shadowRadius: CGFloat) {
        self.layer.cornerRadius = cornerRadius
        self.layer.maskedCorners = maskedCorners
        self.layer.shadowColor = color.cgColor
        self.layer.shadowOffset = offset
        self.layer.shadowOpacity = opacity
        self.layer.shadowRadius = shadowRadius
    }

回答by karim

For UIView and Adding shadow, remember to set background color to the UIView.

对于 UIView 和添加阴影，请记住为 UIView 设置背景颜色。

If the background color is clearColor, no shadow appears.

如果背景颜色是 clearColor，则不会出现阴影。

回答by Konamki Bhubala

//If you've tried this before, you know exactly what happens. The corners will be rounded, but the shadow will be missing. If you set masksToBounds to false, the shadow will appear, but the corners will not be rounded. //to get Shadow with corner radius Add super view for container view with clear color and apply shadow for super view ,Apply corner radius for container View. try it.

//如果你以前试过这个，你就知道会发生什么。角会变圆，但阴影会丢失。如果将masksToBounds 设置为false，则会出现阴影，但不会使角变圆。//获取带有圆角半径的阴影为具有清晰颜色的容器视图添加超级视图并为超级视图应用阴影，为容器视图应用圆角半径。尝试一下。

   //view to apply shadow and corner radius
    containerView.layer.cornerRadius = 3
    containerView.clipsToBounds = true
    //superview of container View for to apply shadow 
    shadowView.layer.shadowOpacity = 0.1
    shadowView.layer.shadowRadius = 2.0
    shadowView.layer.masksToBounds = false
    shadowView.layer.shadowOffset = CGSize.zero

    shadowView.layer.shadowColor = UIColor.Black.cgColor

    shadowView.layer.shadowPath = UIBezierPath(roundedRect:containerView.bounds, cornerRadius: containerView.layer.cornerRadius).cgPath
    shadowView.layer.shouldRasterize = true

回答by BM LADVA

**in swift 4**

  yourView.clipsToBounds = true
    yourView.layer.cornerRadius = 20
    yourView.layer.shadowPath = UIBezierPath(roundedRect: self.yourView.bounds,
                     cornerRadius: self.DeletConversation.layer.cornerRadius).cgPath
    yourView.layer.shadowColor = UIColor(hexString: "color")?.cgColor
    DeletConversation.layer.shadowOpacity = 1
    DeletConversation.layer.shadowOffset = CGSize(width: 0, height: 1.0)
    DeletConversation.layer.shadowRadius = 1
    DeletConversation.layer.masksToBounds = false

回答by Mysiaq

CGRectInset(self.avatarImageView.bounds, -10.0, -10.0)

CGRectInset(self.avatarImageView.bounds, -10.0, -10.0)

回答by Abhijith

If you are still not getting proper shadow, the problem might be the place you added the code. You should call this in viewDidLayoutSubviewswhen you use UIBezierPath. If you call in ViewDidLoad, you may get wrong result since the views layout process might be unfinished.

如果你仍然没有得到正确的阴影，问题可能是你添加代码的地方。当您使用 UIBezierPath 时，您应该在viewDidLayoutSubviews 中调用它。如果你调用 ViewDidLoad，你可能会得到错误的结果，因为视图布局过程可能未完成。

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    //Shadow code here
}

回答by Sunil Bhosale

Without using UIBezierPath, CGSize.zero is the key here

不使用 UIBezierPath，CGSize.zero 是这里的关键

yourView.layer.masksToBounds = false
yourView?.layer.shadowColor = UIColor.red.cgColor
yourView?.layer.shadowOffset =  CGSize.zero
yourView?.layer.shadowOpacity = 0.5
yourView?.layer.shadowRadius = 4