僅在底部 UIView 上設置陰影

Question

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

無論如何只能在底部創建陰影嗎？ 任何幫助，將不勝感激。 謝謝！

Answer 1

我認為陰影的正確思考方式是，陰影屬於對象，即按鈕，uiview，而不僅僅是側面的一部分。 想象有一個虛擬光源。 你真的不能只為一側創建一個陰影。

話雖如此，陰影將始終是整個視圖的陰影。 但是，您可以更改陰影偏移以使其朝向底部。

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

這意味着您希望光源從頂部射出光以將陰影投射到底部。 您仍然在頂部看到一些陰影的原因是陰影半徑。 這是為了模擬光的diffuse 。 光線越漫射，陰影就越柔和，因此您仍會看到頂部陰影。

view.layer.shadowRadius = 1 or 0.5

也盡量減少半徑。 它會給你一個更好的視覺效果。

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

Answer 2

此代碼適用於 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)

Answer 3

改變你的shadowOffset

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

Answer 4

如果您真的只想在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 。 在這些情況下，我建議使用圖像視圖或蒙版圖層。

希望這可以幫助，

Answer 5

這只會在底部添加陰影。 作為 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
}
}

Answer 6

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

Answer 7

老問題，但似乎沒有一個答案能真正回答這個問題。 雖然上述答案適用於低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

Answer 8

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

Answer 9

只需繪制規則陰影並將其倒置，就這么簡單

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