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

Question

我正在尝试创建一个带有圆角和阴影的ImageView来给它一些深度。我能够为UIImageView创建一个阴影，但每当我添加代码以使其具有圆角时，它只有圆角而没有阴影。我有一个名为IBOutlet的{​​{1}}，它位于myImage函数内。有没有人对如何使其有效有任何想法？我做错了什么？

viewDidLoad

Answer 1

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

容器视图的clipsToBounds设置为false，并且已应用阴影属性。如果您想要对阴影进行舍入，请使用UIBezierPath和roundedRect的{​​{1}}构造函数。

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，并为其设置{{ 1}}。

true

最后，请记住使图像视图成为容器视图的子视图。

cornerRadius

结果应如下所示：

Answer 2

这是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()

Answer 3

您可以使用我创建的简单类直接从Storyboard中添加带有圆角和阴影的图像

您可以找到课程here

Answer 4

2019

最后是如何操作

正确地显示图像视图，并带有圆角和阴影。

就这么简单：

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路径），使其具有所需的任何形状。

（例如，本技巧https://stackoverflow.com/a/41553784/294884展示了如何仅使一个或两个角变圆。）

摘要

•在UIView上使用两层

制作您的贝塞尔曲线和...

•在图像层上使用 mask

•在阴影层上使用 path

Answer 5

快捷键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

故事板应如下所示：

1. 为这两个视图创建IBOutlet，在您的ImageView上调用附加信息，并将上面创建的UIView作为参数传递。

以下是输出：