UIView shadow not working with custom extension

Question

I am trying to add a shadow to my UIViews using a custom extension that I created for the UIView class. Here is the code for the extension:

extension UIView {
    func round(_ radius : CGFloat = 10) {
        layer.cornerRadius = radius
        clipsToBounds = true
    }

    func addBorder(color: UIColor, width: CGFloat) {
        layer.borderColor = color.cgColor
        layer.borderWidth = width
    }

    func addShadow(opacity: Float, size: Double, radius: Double, color: UIColor ) {
        layer.shadowColor = color.cgColor
        layer.shadowOpacity = opacity
        layer.shadowOffset = CGSize(width: size, height: size)
        layer.shadowRadius = radius
        layer.masksToBounds = true
    }
}

The round and addBorder functions work perfectly fine, but the addShadow function does not seem to be working. I have tried calling the function on a UIView instance like this:

let myView = UIView()
myView.addShadow(opacity: 0.5, size: 2, radius: 4, color: .black)

But the shadow does not show up on the view

I have tested this extension with other types of views, such as buttons and labels, and the shadow works perfectly fine. It seems to be a problem only with UIViews.

Does anyone know what might be causing this issue? Any help would be greatly appreciated. Thank you in advance

score 3 · Accepted Answer · edited Mar 20 '23 at 08:10

3

The issue may be caused by the layer.masksToBounds = true line in the addShadow function. This property clips the sublayers of the layer to the layer's bounds, which could be preventing the shadow from being displayed.

You can try setting masksToBounds to false before adding the shadow to the layer.

edited Mar 20 '23 at 08:10

Eric Aya

69,473
35
181
253

answered Mar 20 '23 at 04:01

Md. Asif Nawaz

48
4

If I make it false then whats about other views such as TableViewCell..? – Yasir Arefin Tusher Mar 20 '23 at 04:05
@YasirArefinTusher What do you mean by "what about TableViewCell"? What are you asking about table view cells? – Sweeper Mar 20 '23 at 04:07
If I make this false then other views like TableViewCell or Buttons shadow not shows.. But in this situation UIViews shadows are works well. Thanks in advance. – Yasir Arefin Tusher Mar 20 '23 at 04:10
1

@YasirArefinTusher Well if you actually wanted to ask about `UITableViewCell`, *ask about that instead*. [It has been asked before though](https://stackoverflow.com/q/37645408/5133585). – Sweeper Mar 20 '23 at 04:12
@Sweeper Actually I was trying to add shadow using extensions. So that I don't write shadow code everywhere. – Yasir Arefin Tusher Mar 20 '23 at 04:16
1

@YasirArefinTusher In that case. You should make layer.masksToBounds to false again after adding shadow. By that I mean, yourXibCell.addShadow(opacity: 0.5, size: 2, radius: 4, color: .black) yourXibCell.layer.masksToBounds = true – Md. Asif Nawaz Mar 20 '23 at 04:23
@Md.AsifNawaz do you asking to override masksToBounds in the tableviewCell? – Yasir Arefin Tusher Mar 20 '23 at 04:29

score 3 · Answer 2 · answered Mar 20 '23 at 05:11

By setting layer.masksToBounds = true, you are telling the view's layer to clip any content that goes beyond its bounds, which would include the shadow you are trying to add.

func addShadow(opacity: Float, size: Double, radius: Double, color: UIColor ) {
layer.shadowColor = color.cgColor
layer.shadowOpacity = opacity
layer.shadowOffset = CGSize(width: size, height: size)
layer.shadowRadius = radius }
// remove this line: layer.masksToBounds = true

If that doesn't work, you might want to try changing the backgroundColor attribute of the view to a color that isn't translucent. If there is no content to render, the shadow won't be seen since shadows are produced by displaying the content of the layer.

score 2 · Answer 3 · edited Mar 28 '23 at 13:58

If we use clipsToBounds = true it will clip the frame and the shadow was cut off just replace the line with clipsToBounds = false will fix it. here is the modified code

extension UIView {
    extension UIView {
        func round(_ radious: CGFloat = 10) {
            layer.cornerRadius = radious
            clipsToBounds = false
        }

        func addBorder(color: UIColor, width: CGFloat) {
            layer.borderColor = color.cgColor
            layer.borderWidth = width
        }

        func addShadow(opecity: Float, size: Double, radius: Double, color: UIColor ) {
            layer.shadowColor = color.cgColor
            layer.shadowOpacity = opecity
            layer.shadowOffset = CGSize(width: size, height: size)
            layer.shadowRadius = radius
            layer.masksToBounds = true
        }
    }
}

score 1 · Answer 4 · answered Mar 20 '23 at 04:06

1

yasir I have the same difficulty with shadows. I have solved it with this extension. Try it.

extension UIView {
    /// show drop shadow under view
    /// - Parameter scale: bool variable to enable scaling
    func dropShadow(scale: Bool = true) {
        layer.masksToBounds = false
        layer.shadowColor = UIColor.gray.cgColor
        layer.shadowOpacity = 0.2
        layer.shadowOffset = CGSize.zero
        layer.shadowRadius = 10
        layer.shouldRasterize = true
        layer.rasterizationScale = scale ? UIScreen.main.scale : 1

    }
}

answered Mar 20 '23 at 04:06

S. S. Saruar Jahan

150
9

1

But this can’t be used along with rounded corners. Right? – HangarRash Mar 20 '23 at 04:14
I need to verify it @HangarRash Thank you – Yasir Arefin Tusher Mar 20 '23 at 04:19

score 1 · Answer 5 · answered Mar 20 '23 at 04:36

1

layer.masksToBounds should be false to disables the layer's mask to display the shadow outside of the view's bounds.

layer.masksToBounds = false

answered Mar 20 '23 at 04:36

Md. Ashikur Rahman

95
7

If I disable this other functions such as addBorder not works correctly. – Yasir Arefin Tusher Mar 20 '23 at 04:39
you can create a separate CALayer to serve as the border layer. – Md. Ashikur Rahman Mar 20 '23 at 04:49
In my CustomView or In the Extension ? – Yasir Arefin Tusher Mar 20 '23 at 05:06

UIView shadow not working with custom extension

5 Answers5