仅在底部UIView上设置阴影

Son*_*ter 28 shadow uiview ios

我想在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
}
Run Code Online (Sandbox Code Playgroud)

无论如何只有在底部创建阴影?任何帮助,将不胜感激.谢谢!

Elv*_*vin 38

我认为阴影的正确思考方式是,阴影属于对象,即按钮,uiview,而不仅仅是侧面的一部分.想象有一个虚拟光源.你不能真正为一方创造一个阴影.

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

view.layer.shadowOffset = CGSize(width: 0, height: 3)
Run Code Online (Sandbox Code Playgroud)

这意味着您希望光源从顶部拍摄光线以使阴影到达底部.你仍然在顶部看到一些阴影的原因是阴影半径.这是为了模拟diffuse光线.光线散射越多,阴影就越柔和,所以你仍会看到顶影.

view.layer.shadowRadius = 1 or 0.5
Run Code Online (Sandbox Code Playgroud)

尽量减少半径.它会给你一个更好的视觉效果.

要了解umbra,半影和antumbra,请查看https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra

  • 赞成解释。 (3认同)

Zed*_*nem 13

如果你真的只想在你的一侧有一个阴影UIView,你应该将你的设置view.layer.shadowPath为 a UIBezierPath

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

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

解构CGRect价值,你得到:

  • xwidth确保阴影占据视图的整个水平宽度(您可能需要调整它们,例如使用该layer.shadowRadius值作为偏移的基础)
  • yheight确保阴影开始时尽可能低,然后仅与半径一样大

当然,在某些情况下这是行不通的,例如当您想要一个shadowRadius大于视图的height. 在这些情况下,我建议使用图像视图或蒙版图层。

希望这可以帮助,


Lua*_*ran 12

改变你的 shadowOffset

 view.layer.shadowOffset = CGSize(width: 0, height: 3)
Run Code Online (Sandbox Code Playgroud)

  • 它仍然在这个视图的顶部给我一点阴影 (2认同)
  • 你能试着把 `height` 值调大一点吗? (2认同)
  • 添加高度 10 时工作正常。谢谢。 (2认同)

Pra*_*ghe 11

这只会在底部添加阴影。作为 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
}
}
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明


小智 9

这段代码适用于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)
Run Code Online (Sandbox Code Playgroud)

  • 请在您的答案中添加此说明,而不要添加评论。谁将阅读答案将更好地理解您的代码。 (6认同)

Hem*_*ang 7

这是在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
Run Code Online (Sandbox Code Playgroud)


小智 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
Run Code Online (Sandbox Code Playgroud)

这输出这个

在此处输入图片说明

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

   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
Run Code Online (Sandbox Code Playgroud)

哪个会输出这个

在此处输入图片说明

示例在这里

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