繁体   English   中英

如何为 UIView 添加阴影?

[英]How to add shadow to UIView?

我得到的结果 对于UIView我给出了两侧的角半径并添加了阴影。 现在,我得到了两侧的角半径,但不是阴影。

这是我使用的代码:

@IBOutlet var myView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
   let shadowpath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 
   myView.frame.height, height: myView.frame.height), byRoundingCorners: 
   [.topRight, .bottomRight], cornerRadii: CGSize(width: 58.0, height: 0.0))

    myView.layer.shadowColor = UIColor.black.cgColor
    myView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you 
    control x and y
    myView.layer.shadowOpacity = 0.5
    myView.layer.shadowRadius = 5.0 //Here your control your blur
    myView.layer.masksToBounds =  false
    myView.layer.shadowPath = shadowpath.cgPath

截图: 在此处输入图片说明

关键是使用“容器”视图……您添加一个“阴影层”作为容器视图的子层,并将蒙版视图添加为容器的子视图。

这是一个您可以在 Playground 中运行的示例,它将为您提供您所显示的目标(您可能想要调整颜色值以及阴影半径和偏移量):

import UIKit
import PlaygroundSupport

class TestViewController : UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = UIColor.init(white: 0.8, alpha: 1.0)

        let myView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        myView.backgroundColor = .white

        let mask = CAShapeLayer()

        let shadowpath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width:
            myView.frame.height, height: myView.frame.height), byRoundingCorners:
            [.topRight, .bottomRight], cornerRadii: CGSize(width: 58.0, height: 0.0))

        mask.path = shadowpath.cgPath
        myView.layer.mask = mask

        let shadowLayer = CAShapeLayer()
        shadowLayer.frame = myView.bounds
        shadowLayer.path = shadowpath.cgPath
        shadowLayer.shadowOpacity = 0.5
        shadowLayer.shadowRadius = 5
        shadowLayer.shadowColor = UIColor(red: 0.2, green: 0.5, blue: 1.0, alpha: 1.0).cgColor
        shadowLayer.masksToBounds = false
        shadowLayer.shadowOffset = CGSize(width: 5.0, height: 1.0)

        let container = UIView(frame: CGRect(x: 40, y: 100, width: myView.bounds.width, height: myView.bounds.height))
        container.backgroundColor = .clear
        container.layer.addSublayer(shadowLayer)
        container.addSubview(myView)

        view.addSubview(container)

    }

}

let vc = TestViewController()
PlaygroundPage.current.liveView = vc

结果:

在此处输入图片说明

我通过给 layerMaxXMinYCorner 和 layerMaxXMaxYCorner 自己找到了答案

   myView.clipsToBounds = true
    myView.layer.cornerRadius = 58
    if #available(iOS 11.0, *) {
        myView.layer.maskedCorners = [.layerMaxXMinYCorner, 
  .layerMaxXMaxYCorner ]
    } else {
        // Fallback on earlier versions
    }

    let shadowpath = UIBezierPath(roundedRect: self.myView.bounds, 
    byRoundingCorners: [.topRight, .bottomRight], cornerRadii: CGSize(width: 
   58.0, height: 0.0))



    myView.layer.shadowColor = UIColor.black.cgColor
    myView.layer.shadowOffset = CGSize(width: 1, height: 1)  //Here you 
    control x and y
    myView.layer.shadowOpacity = 0.5
    myView.layer.shadowRadius = 15 //Here your control your blur
    myView.layer.masksToBounds =  false
    myView.layer.shadowPath = shadowpath.cgPath

直接从故事板使用的简单扩展。 斯威夫特 4+

@IBDesignable extension UIView {
    @IBInspectable var shadowColor: UIColor?{
        set {
            guard let uiColor = newValue else { return }
            layer.shadowColor = uiColor.cgColor
        }
        get{
            guard let color = layer.shadowColor else { return nil }
            return UIColor(cgColor: color)
        }
    }

    @IBInspectable var shadowOpacity: Float{
        set {
            layer.shadowOpacity = newValue
        }
        get{
            return layer.shadowOpacity
        }
    }

    @IBInspectable var shadowOffset: CGSize{
        set {
            layer.shadowOffset = newValue
        }
        get{
            return layer.shadowOffset
        }
    }

    @IBInspectable var shadowRadius: CGFloat{
        set {
            layer.shadowRadius = newValue
        }
        get{
            return layer.shadowRadius
        }
    }
}

添加 Swift 5+ 解决方案:

let tempView = UIView(frame: CGRect(x: 0, y: -50, width: self.view.frame.size.width/1.4, height: 300))

//below is the code you need to add, adjust Opacity as needed
        tempView.layer.shadowColor = UIColor.black.cgColor
        tempView.layer.shadowOpacity = 0.8
        tempView.layer.shadowOffset = .zero
        tempView.layer.shadowRadius = 10

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM