为具有圆角的UIImageView创建阴影？

Question

我试图创建一个ImageView圆角和阴影给它一些深度.我能够为它创建一个阴影UIImageView,但每当我添加代码也使它有圆角时,它只有圆角而没有阴影.我有一个IBOutlet名字myImage,它在viewDidLoad函数内部.有没有人对如何使其有效有任何想法？我究竟做错了什么？

override func viewDidLoad() {
    super.ViewDidLoad() 
    myImage.layer.shadowColor = UIColor.black.cgColor
    myImage.layer.shadowOpacity = 1 
    myImage.layer.shadowOffset = CGSize.zero
    myImage.layer.shadowRadius = 10
    myImage.layer.shadowPath = UIBezierPath(rect: myImage.bounds).cgPath
    myImage.layer.shouldRasterize = false
    myImage.layer.cornerRadius = 10
    myImage.clipsToBounds = true
}

Answer 1

如果设置clipsToBounds为true,则会围绕角落,但会阻止阴影出现.要解决此问题,您可以创建两个视图.容器视图应该有阴影,其子视图应该有圆角.

容器视图已clipsToBounds设置为false,并已应用阴影属性.如果你想要阴影也被舍入,请使用UIBezierPath带有roundedRect和的构造函数cornerRadius.

let outerView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
outerView.clipsToBounds = false
outerView.layer.shadowColor = UIColor.black.cgColor
outerView.layer.shadowOpacity = 1
outerView.layer.shadowOffset = CGSize.zero
outerView.layer.shadowRadius = 10
outerView.layer.shadowPath = UIBezierPath(roundedRect: outerView.bounds, cornerRadius: 10).cgPath

接下来,将图像视图(或任何其他类型UIView)设置clipsToBounds为与容器视图相同的大小,设置为true,并为其指定cornerRadius.

let myImage = UIImageView(frame: outerView.bounds)
myImage.clipsToBounds = true
myImage.layer.cornerRadius = 10

最后,请记住使图像视图成为容器视图的子视图.

outerView.addSubview(myImage)

结果应如下所示:

Answer 2

斯威夫特 5：

您可以使用以下扩展名：

extension UIImageView {
    func applyshadowWithCorner(containerView : UIView, cornerRadious : CGFloat){
        containerView.clipsToBounds = false
        containerView.layer.shadowColor = UIColor.black.cgColor
        containerView.layer.shadowOpacity = 1
        containerView.layer.shadowOffset = CGSize.zero
        containerView.layer.shadowRadius = 10
        containerView.layer.cornerRadius = cornerRadious
        containerView.layer.shadowPath = UIBezierPath(roundedRect: containerView.bounds, cornerRadius: cornerRadious).cgPath
        self.clipsToBounds = true
        self.layer.cornerRadius = cornerRadious
    }
}

如何使用：

1. 在情节提要上拖动 UIView
2. 在 UIView 中拖动一个 ImageView

故事板应如下所示：

3. 为两个视图创建 IBOutlet，在 ImageView 上调用扩展，并将上面创建的 UIView 作为参数传递。

这是输出：

Answer 3

最后这里是如何

正确地有一个图像视图，带有圆角和阴影。

就这么简单：

class ShadowRoundedImageView: UIView {
    @IBInspectable var image: UIImage? = nil {
        didSet {
            imageLayer.contents = image?.cgImage
            shadowLayer.shadowPath = (image == nil) ? nil : shapeAsPath }}
    var imageLayer: CALayer = CALayer()
    var shadowLayer: CALayer = CALayer()
    var shape: UIBezierPath {
        return UIBezierPath(roundedRect: bounds, cornerRadius:50) }
    var shapeAsPath: CGPath {
        return shape.cgPath }
    var shapeAsMask: CAShapeLayer {
        let s = CAShapeLayer()
        s.path = shapeAsPath
        return s }
    override func layoutSubviews() {
        super.layoutSubviews()
        clipsToBounds = false
        backgroundColor = .clear
        self.layer.addSublayer(shadowLayer)
        self.layer.addSublayer(imageLayer) // (in that order)
        imageLayer.frame = bounds
        imageLayer.contentsGravity = .resizeAspectFill // (as preferred)
        imageLayer.mask = shapeAsMask
        shadowLayer.shadowPath = (image == nil) ? nil : shapeAsPath
        shadowLayer.shadowOpacity = 0.80 // etc ...
    }
}

这里是

解释

1. UIImageView 没用，你用一个 UIView

2. 你需要两层，一层用于阴影，一层用于图像

3. 要使图像层变圆，请使用蒙版

4. 要使阴影层变圆，请使用路径

对于阴影质量，显然添加您认为合适的代码

    shadowLayer.shadowOffset = CGSize(width: 0, height: 20)
    shadowLayer.shadowColor = UIColor.purple.cgColor
    shadowLayer.shadowRadius = 5
    shadowLayer.shadowOpacity = 0.80

对于实际形状（bez 路径），使其成为您想要的任何形状。

（例如这个技巧/sf/answers/2908764911/显示了如何只使一个或两个角变圆。）

概括：

• 在 UIView 上使用两层

使您的贝塞尔曲线和...

•在图像层上使用蒙版

•在阴影层上使用路径

Answer 4

这是swift 2.0中的另一个解决方案(测试代码)

如果将clipsToBounds设置为true,则会对角进行圆角处理,但会阻止阴影出现.因此,您可以在imageview后面的storyboard中添加相同大小的视图,我们可以为该视图添加阴影

SWIFT 2.0

outerView.layer.cornerRadius = 20.0
outerView.layer.shadowColor = UIColor.blackColor().CGColor
outerView.layer.shadowOffset = CGSizeMake(0, 2)
outerView.layer.shadowOpacity = 1
outerView.backgroundColor = UIColor.whiteColor()