ios 仅在底部 UIView 上设置阴影

Set Shadow on Bottom UIView only

提问by Sonic Master

I want to create bottom only shadow on UIView. Right now with this function, will create shadow in top, bottom, left, and right.

我想在 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
}

Is there anyway to only create shadow in the bottom? Any help would be appreciated. Thank you!

无论如何只能在底部创建阴影吗？任何帮助，将不胜感激。谢谢！

回答by Elvin

I think the proper way of thinking of shadow is, the shadow belongs to the object, which is the button, the uiview, not just part of the side. Imagining there is a virtual light source. You can't really just create a shadow for one side.

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

With that being said, the shadow will always be the shadow of the view as a whole. However, you can change the shadow offset to make it towards to the bottom.

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

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

This means you want the light source shoot the light from top to make the shadow to the bottom. The reason you still see some shadow at the top is the shadow radius. which is to simulate the diffuseof the light. The more diffuse the light is, the softer the shadow will be so you will see top shadow still.

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

view.layer.shadowRadius = 1 or 0.5

try to reduce the radius also. it will give you a better visual result.

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

To understand umbra, penumbra and antumbra if you need, check out https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra

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

回答by Srinivasan.M

This code working for swift 4 and shadow applying for view Bottom:

此代码适用于 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)

回答by Luan Tran

Change your shadowOffset

改变你的 shadowOffset

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

回答by Hemang

Here's the proper way of applying shadow in Swift:

这是在 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

回答by Zedenem

If you really want a shadow only on one side of your UIView, you should set your view.layer.shadowPathto a UIBezierPath.

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

Here is an example which will only display a shadow at the bottom of the view:

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

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

Deconstructing the CGRectvalue, you get:

解构CGRect价值，你得到：

• xand widthmake sure the shadow takes the full horizontal width of your view (you might want to adjust them, for example using the layer.shadowRadiusvalue as a basis for your offsetting)
• yand heightmake sure the shadow starts as low as possible and then is only as big as the radius

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

Of course, there are some cases where this won't work, for example when you want a shadowRadiuslarger than your view's height. In these cases, I would recommend using an image view or a masked layer.

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

Hope this helps,

希望这可以帮助，

回答by M.Hem

Old question but it seems none of the answers really answer the question. While the above answers will work with a low shadowRadiusyou don't really get a 'shadow' effect.

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

You can absolutely add a shadow to just the bottom by using UIBezierPath

您绝对可以使用以下方法在底部添加阴影 UIBezierPath

Heres how -

就是这样 -

    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

This outputs this

这输出这个

Or if you wanted a simpler solution, with less options you could go with this

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

   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

Which will output this

哪个会输出这个

Example here

示例在这里

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

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

回答by Исмаил Хасбулатов

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")
  }
}

回答by iago849

Just draw regular shadow and rotate it upside down, as simple as that

只需绘制规则阴影并将其倒置，就这么简单

@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),
            ])
    }