在UIView外部绘制阴影 [英] Draw Drop Shadow Outside UIView

问题描述

我有一个具有以下属性的UIView:

I have a UIView with the following properties:

• alpha = 1
• backgroundColor =白色，不透明度为0.35
• 圆角
• 投影

这就是我创建投影的方式:(UIView扩展名)

This is how I create the drop shadow: (UIView extension)

self.layer.masksToBounds = false
self.layer.shadowColor = UIColor.darkGrayColor().CGColor
self.layer.shadowOffset = CGSizeMake(0, 5)
self.layer.shadowOpacity = 0.35
self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).CGPath

结果

结果如下:

Results

This results in the following:

...虽然我不想看到这样的视图下面的阴影:

...while I do not want to see the shadow beneath the view like this:

如何仅在视图外部绘制阴影以使其在其下方不可见?

How can I draw the shadow outside the view only so it is not visible below it?

提前谢谢！

推荐答案

这也许比需要的复杂一些，但这是一个解决方案.

This is perhaps slightly more complex than it would need to be, but here's one solution.

使用以下方法扩展UIView:

extension UIView {
    // Note: the method needs the view from which the context is taken as an argument.
    func dropShadow(superview: UIView) {
        // Get context from superview
        UIGraphicsBeginImageContext(self.bounds.size)
        superview.drawViewHierarchyInRect(CGRect(x: -self.frame.minX, y: -self.frame.minY, width: superview.bounds.width, height: superview.bounds.height), afterScreenUpdates: true)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        // Add a UIImageView with the image from the context as a subview
        let imageView = UIImageView(frame: self.bounds)
        imageView.image = image
        imageView.layer.cornerRadius = self.layer.cornerRadius
        imageView.clipsToBounds = true
        self.addSubview(imageView)

        // Bring the background color to the front, alternatively set it as UIColor(white: 1, alpha: 0.2)
        let brighter = UIView(frame: self.bounds)
        brighter.backgroundColor = self.backgroundColor ?? UIColor(white: 1, alpha: 0.2)
        brighter.layer.cornerRadius = self.layer.cornerRadius
        brighter.clipsToBounds = true
        self.addSubview(brighter)

        // Set the shadow
        self.layer.masksToBounds = false
        self.layer.shadowColor = UIColor.darkGrayColor().CGColor
        self.layer.shadowOffset = CGSizeMake(0, 5)
        self.layer.shadowOpacity = 0.35
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).CGPath
    }
}

用法，考虑将背景视图命名为view:

Usage, considering the background view is named view:

let shadowView = UIView(frame: CGRect(x: 100, y: 100, width: 300, height: 200))
shadowView.layer.cornerRadius = 15.0
shadowView.dropShadow(view)

view.addSubview(shadowView)

结果如下所示:

注意:不能从viewDidLoad调用dropShadow方法，因为这会导致图形上下文出现问题.因此，最早在viewWillAppear中使用此方法可获得上述结果.

Note: the dropShadow method can not be called from viewDidLoad as this causes issues with the graphics context. So, use this method in viewWillAppear earliest for the above result.

这是背景视图的代码，以防万一有人想在操场上进行测试:

Here's the code for the background view, just in case somebody wants to test in playgrounds:

let view = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 400))
view.backgroundColor = UIColor.clearColor()

let color1 = UIColor(hue: 0.39, saturation: 0.7, brightness: 1.0, alpha: 1.0).CGColor
let color2 = UIColor(hue: 0.51, saturation: 0.9, brightness: 0.6, alpha: 1.0).CGColor

let gradient = CAGradientLayer()
gradient.frame = view.frame
gradient.colors = [color1, color2]
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)
view.layer.insertSublayer(gradient, atIndex: 0)

这篇关于在UIView外部绘制阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！