Shadow UIview and clipsToBounds

Question

I would like to set the shadow to my container UIView. I use this code to make it:

- (id)initWithCoder:(NSCoder*)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {

        //-> drop shadow
        [self.layer setShadowColor:[UIColor blackColor].CGColor];
        [self.layer setShadowOpacity:0.6];
        [self.layer setShadowRadius:2.0];
        [self.layer setShadowOffset:CGSizeMake(2.0, 2.0)];
    }

    return self;
}

This works well. But, when I use _containerView.clipsToBounds = YES; on this container UIView, I can't see my shadow. Why?

You can read about `clipsToBounds` here : http://stackoverflow.com/questions/20449256/clipstobounds-how-does-it-work — megimix, May 20 '14 at 13:23

score 30 · Answer 1 · edited May 23 '17 at 12:02

30

the clipsToBounds also clips your shadow. In order to prevent this you can add _containerView.layer.masksToBounds = NO which disables clipping of sublayers (see more here).

edited May 23 '17 at 12:02

Community

1
1

answered May 20 '14 at 13:25

Gad

2,867
25
35

2

Thanks for the `masksToBounds` – Islam Aug 27 '15 at 13:15

score 11 · Answer 2 · answered Nov 27 '20 at 13:35

If you have to use clipsToBounds = true because you don't want subviews to exceed your view's border, but at the same time you need a shadow on your view, I recommend adding an extra view behind your view and set the shadow properties on the extra view.

//run this in viewDidLoad() or your initialisation code
private func setupShadowContainer() {
    let containerShadow = UIView()
    parentView.addSubview(containerShadow)
    containerShadow.dropShadow()
    //using SnapKit here, you can use NSLayoutConstraint in a similar way to constraint the containerShadow behind your View
    containerShadow.snp.makeConstraints { (make) in
        make.edges.equalTo(yourView.snp.edges)
    }
}

//dropShadow method
extension UIView {
    func dropShadow() {
        self.translatesAutoresizingMaskIntoConstraints = false
        self.layer.shadowRadius = 3
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
        self.layer.shadowOpacity = 0.5
        self.layer.masksToBounds = false
    }
}

If shadow's not showing, you might have to set a random background color on containerShadow too — Lexon Li, Nov 28 '20 at 07:00
"I recommend adding an extra view behind your view and set the shadow properties on the extra view." Good solution. Thanks — Ali Ihsan URAL, Apr 04 '22 at 00:09

score 1 · Answer 3 · answered Oct 17 '19 at 14:40

Here is the UIView extension.

extension UIView {
    func addShadowAndRoundCorner(cornerRadius : CGFloat) {
        self.layer.shadowOffset = .zero
        self.layer.shadowOpacity = 0.5
        self.layer.shadowRadius = 3
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.masksToBounds = false
        self.layer.cornerRadius = cornerRadius
    }
}

Call this function after creation of view as follows:

let roundView = UIView()
roundView.frame = CGRect.init(x: 0, y: 0, width: 100, height: 100)
roundView.addShadowAndRoundCorner(cornerRadius: 100/2)

score -3 · Answer 4 · answered May 20 '14 at 13:44

- (void)layoutSubviews
{
    [super layoutSubviews];

    CAGradientLayer *l = [CAGradientLayer layer];
    l.frame = self.bounds;
    l.colors = [NSArray arrayWithObjects:(id)[UIColor clearColor].CGColor, (id)[UIColor whiteColor].CGColor, (id)[UIColor whiteColor].CGColor,(id)[UIColor whiteColor].CGColor,(id)[UIColor whiteColor].CGColor,(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor,(id)[UIColor clearColor].CGColor, nil];
    l.startPoint = CGPointMake(0.0f, 1.0f);
    l.endPoint = CGPointMake(1.0f, 1.0f);
    self.layer.mask = l;
}

Couldn't throw in even a short sentence explaining this? – nenchev Feb 20 '18 at 18:24 — nenchev, Feb 20 '18 at 18:24

Shadow UIview and clipsToBounds

4 Answers4

Linked