Question

I’m adding a shadow to my view layer like so:

    self.view.layer.shadowOffset = CGSizeZero;
    self.view.layer.shadowOpacity = 0.10f;
    self.view.layer.shadowRadius = 5.0f;
    self.view.layer.shadowColor = [UIColor blackColor].CGColor;
    self.view.layer.shadowPath = [UIBezierPath bezierPathWithRect:
                                 CGRectMake(self.view.bounds.origin.x, self.view.bounds.origin.y, self.view.bounds.size.width - 5.0, self.view.bounds.size.height)].CGPath;
    self.view.clipsToBounds = NO;

What I want to do is somehow clip the shadow so that it does not extend beyond the width, but does extend beyond the height. Basically, I just want a 90 degree shadow rather than a shadow all around my bounds. I tried subtracting the shadowRadius amount from the bezierRect width, but this messes up the shadow flow on the bottom a little bit.

Any ideas how this can be accomplished?

Answer 1

You can add a new “container” view and add your view (the content view) as a subview. The container view should be higher than your view but the same width. If you set your container view to clip to its bounds it will clip the shadows on the side but allow shadows on the bottom and top.

 _________  
| _______ |  <-- container
||       ||
||       ||  <-- your view (inside container)
||_______||
|`````````|  <-- shadow of your view (inside container)
|_________|

---

In code this would look something like

// contentView is already created and configured...
UIView *containerView = [[UIView alloc] initWithFrame:
                                 CGRectInset([contentView frame], 
                                             0,         // keep the same width 
                                             -radius)]; // increase the height
[[self view] addSubview:containerView];
[contentView setCenter:CGPointMake(CGRectGetMidX([contentView bounds]), 
                                   CGRectGetMidY([contentView bounds]));
[containerView addSubview:contentView];
[containerView setClipsToBounds:YES];