【问题标题】:Swift - Shadow for a irregular shape of a ViewSwift - 不规则形状视图的阴影
【发布时间】:2019-02-05 23:10:49
【问题描述】:

我正在努力为自定义形状添加阴影。

这是我想要构建的图片: (不要介意文字和符号)

您可以看到右侧带有弯曲角的自定义形状,左侧带有阴影的矩形形状。 我正在使用 UIView,并在左侧添加了角。

这是我到目前为止的代码,可以正确地塑造视图:

 View1.backgroundColor = .green //green color is just to see the shape well
    let path = UIBezierPath(roundedRect:View1.bounds,
                            byRoundingCorners:[.topRight, .bottomRight],
                            cornerRadii: CGSize(width: self.frame.height/2, height:  self.frame.height/2))

    let maskLayer = CAShapeLayer()

我尝试给它添加阴影,但阴影没有出现。 这是我尝试添加阴影的代码:

    View1.layer.masksToBounds = false
    View1.layer.layer.shadowPath = maskLayer.path
    View1.layer.shadowColor = UIColor.black.cgColor
    View1.layer.shadowOffset = CGSize(width: 0.0, height: 3.0)
    View1.layer.shadowOpacity = 0.5
    View1.layer.shadowRadius = 1.0

如何为这个形状添加阴影?

【问题讨论】:

  • 网上对此有一些决定,但您可能需要四处看看。似乎最常用的“解决方案”也使用了两个视图,一个是蒙版的,一个是阴影的
  • 请删除剪辑以绑定属性。它会起作用的。

标签: ios swift uiview shadow


【解决方案1】:

您可以通过使用单个 UIView (shadowView)、添加 shapeLayer 子层并设置 shadowView 层的阴影来实现。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
    }
    
    @IBOutlet var shadowView: UIView!
    func setup() {
        // setup irregular shape
        let path = UIBezierPath.init(roundedRect: shadowView.bounds, byRoundingCorners: [.topRight, .bottomRight], cornerRadii: CGSize.init(width: 20, height: 20))
        let layer = CAShapeLayer.init()
        layer.frame = shadowView.bounds
        layer.path = path.cgPath
        layer.fillColor = UIColor.white.cgColor
        layer.masksToBounds = true
        shadowView.layer.insertSublayer(layer, at: 0)

        // setup shadow
        shadowView.layer.shadowRadius = 8
        shadowView.layer.shadowOpacity = 0.2
        shadowView.layer.shadowOffset = CGSize.init(width: 0, height: 2.5)
        shadowView.layer.shadowColor = UIColor.black.cgColor
        shadowView.layer.shadowPath = path.cgPath
    }
}

注意:

  1. shadowView.clipToBounds 必须是 false 才能使阴影生效。

  2. 要查看layer.fillColor,请将shadowView.backgroundColor 设置为.clear

    您可以通过设置“Background”属性并取消选中“Clip to Bounds”复选框,通过 Interface Builder 轻松实现上述目标。

【讨论】:

  • 完美的解释!奇迹般有效!谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-12-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多