仅在底部 UIView 上设置阴影答案

【问题标题】：Set Shadow on Bottom UIView only仅在底部 UIView 上设置阴影
【发布时间】：2017-08-23 18:49:38
【问题描述】：

我想在 UIView 上创建仅底部阴影。现在使用这个函数，将在顶部、底部、左侧和右侧创建阴影。

func setCardView(view : UIView){
    view.layer.masksToBounds = false
    view.layer.shadowOffset = CGSize(width: 0, height: 0)
    view.layer.shadowRadius = 2
    view.layer.shadowOpacity = 0.5
}

有没有办法只在底部创建阴影？任何帮助，将不胜感激。谢谢！

【问题讨论】：

标签： ios uiview shadow

【解决方案1】：

更改您的shadowOffset

 view.layer.shadowOffset = CGSize(width: 0, height: 3)

【讨论】：

它仍然在那个视图的顶部给了我一点阴影
你能试着把height的值变大吗？
添加高度 10 时工作正常。谢谢。

【解决方案2】：

我觉得阴影的正确思路是，阴影属于对象，也就是按钮，uiview，而不仅仅是侧面的一部分。想象有一个虚拟光源。你真的不能只为一侧创建阴影。

话虽如此，阴影将始终是整个视图的阴影。但是，您可以更改阴影偏移以使其朝向底部。

view.layer.shadowOffset = CGSize(width: 0, height: 3)

这意味着您希望光源从顶部射出光线以使阴影位于底部。您仍然在顶部看到一些阴影的原因是阴影半径。也就是模拟灯光的diffuse。光线越漫射，阴影就越柔和，因此您仍然可以看到顶部阴影。

view.layer.shadowRadius = 1 or 0.5

也尝试减小半径。它会给你一个更好的视觉效果。

如果需要了解 umbra、penumbra 和 antumbra，请查看https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra

【讨论】：

赞成解释。
是的，我也是 :-)
是的，我也是，很好的解释
精彩的解释几乎清除了阴影概念。

【解决方案3】：

这是在 Swift 中应用阴影的正确方法：

yourView.layer.shadowOffset = CGSize(width: 0, height: 3)
yourView.layer.shadowOpacity = 0.6
yourView.layer.shadowRadius = 3.0
yourView.layer.shadowColor = UIColor.red.cgColor

【讨论】：

【解决方案4】：

此代码适用于 swift 4 和阴影申请视图底部：

view.layer.masksToBounds = false
view.layer.shadowRadius = 4
view.layer.shadowOpacity = 1
view.layer.shadowColor = UIColor.gray.cgColor
view.layer.shadowOffset = CGSize(width: 0 , height:2)

【讨论】：

此代码适用于 swift 4 和阴影申请视图底部
请在您的答案中添加此解释，而不是在评论中。阅读答案的人会更好地理解您的代码。

【解决方案5】：

如果您真的只希望在 UIView 的一侧有阴影，则应将 view.layer.shadowPath 设置为 UIBezierPath。

这是一个仅在视图底部显示阴影的示例：

view.layer.shadowPath = UIBezierPath(rect: CGRect(x: 0,
                                                  y: bounds.maxY - layer.shadowRadius,
                                                  width: bounds.width,
                                                  height: layer.shadowRadius)).cgPath

解构CGRect 值，你会得到：

x 和 width 确保阴影占据视图的整个水平宽度（您可能需要调整它们，例如使用 layer.shadowRadius 值作为偏移的基础）
y 和 height 确保阴影从尽可能低的位置开始，然后仅与半径一样大

当然，在某些情况下这是行不通的，例如，当您希望 shadowRadius 大于视图的 height 时。在这些情况下，我建议使用图像视图或蒙版图层。

希望这会有所帮助，

【讨论】：

【解决方案6】：

老问题，但似乎没有一个答案能真正回答这个问题。虽然上述答案适用于低 shadowRadius，但您并没有真正得到“阴影”效果。

你完全可以使用UIBezierPath在底部添加阴影

方法如下 -

    let shadowWidth: CGFloat = 1.2 // Shadow width, will be the width furthest away from the view, this is equivalent to 120% of the views width
    let shadowHeight: CGFloat = 0.3 // Shadow height, again this is equivalent to 30%
    let shadowRadius: CGFloat = 5 
    let width = someView.frame.width
    let height = someView.frame.height // Get width and height of the view

    // Plot the path
    let shadowPath = UIBezierPath()
    shadowPath.move(to: CGPoint(x: shadowRadius / 2, y: height - shadowRadius / 2))
    shadowPath.addLine(to: CGPoint(x: width - shadowRadius / 2, y: height - shadowRadius / 2))
    shadowPath.addLine(to: CGPoint(x: width * shadowWidth, y: height + (height * shadowHeight)))
    shadowPath.addLine(to: CGPoint(x: width * -(shadowWidth - 1), y: height + (height * shadowHeight)))
    // Add shadow
    someView.layer.shadowPath = shadowPath.cgPath
    someView.layer.shadowRadius = shadowRadius
    someView.layer.shadowOffset = .zero
    someView.layer.shadowOpacity = 0.2

这会输出这个

或者，如果您想要一个更简单的解决方案，您可以选择更少的选项

   let buttonHeight = someButton.frame.height
    let buttonWidth = someButton.frame.width

    let shadowSize: CGFloat = 15
    let contactRect = CGRect(x: -shadowSize, y: buttonHeight - (shadowSize * 0.2), width: buttonWidth + shadowSize * 2, height: shadowSize)
    someButton.layer.shadowPath = UIBezierPath(ovalIn: contactRect).cgPath
    someButton.layer.shadowRadius = 5
    someButton.layer.shadowOpacity = 0.6

哪个会输出这个

此处为示例

https://github.com/hemo87/ExampleShadow/tree/master

【讨论】：

从技术上讲，这是在您使用UIBezierPath 绘制的形状上创建阴影，而不是在 UIView 的底部。纯粹是在画一个跟原来的UIView没有关系的新东西。但这可能正是 op 想要实现的目标。

【解决方案7】：

class ViewBottomShadow: UIView {
  init() {
    super.init(frame: .zero)
    backgroundColor = .white
    layer.masksToBounds = false
    layer.shadowRadius = 2
    layer.shadowOpacity = 1
    layer.shadowColor = UIColor.gray.cgColor
    layer.shadowOffset = CGSize(width: 0 , height:2)
  }

  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
}

【讨论】：

【解决方案8】：

只要画出常规的阴影，然后倒置旋转，就这么简单

@objc func shadowView() -> UIView {
        let shadowView = UIView(frame: .zero)
        shadowView.backgroundColor = .white
        shadowView.layer.shadowColor = UIColor.grey.cgColor
        shadowView.layer.shadowOffset = CGSize(width: 0, height: 2)
        shadowView.layer.shadowOpacity = 1.0
        shadowView.layer.shadowRadius = 4
        shadowView.layer.compositingFilter = "multiplyBlendMode"
        return shadowView
    }

func idtm_addBottomShadow() {
        let shadow = shadowView()
        shadow.transform = transform.rotated(by: 180 * CGFloat(Double.pi))
        shadow.transform = transform.rotated(by: -1 * CGFloat(Double.pi))
        shadow.translatesAutoresizingMaskIntoConstraints = false
        addSubview(shadow)
        NSLayoutConstraint.activate([
            shadow.leadingAnchor.constraint(equalTo: leadingAnchor),
            shadow.trailingAnchor.constraint(equalTo: trailingAnchor),
            shadow.bottomAnchor.constraint(equalTo: bottomAnchor),
            shadow.heightAnchor.constraint(equalToConstant: 1),
            ])
    }

【讨论】：

【解决方案9】：

这只会在底部添加阴影。作为 UIView 的扩展实现

extension UIView {
func addBottomShadow() {
    layer.masksToBounds = false
    layer.shadowRadius = 4
    layer.shadowOpacity = 1
    layer.shadowColor = UIColor.gray.cgColor
    layer.shadowOffset = CGSize(width: 0 , height: 2)
    layer.shadowPath = UIBezierPath(rect: CGRect(x: 0,
                                                 y: bounds.maxY - layer.shadowRadius,
                                                 width: bounds.width,
                                                 height: layer.shadowRadius)).cgPath
}
}

【讨论】：