uiview drop shadow transparency issue

Question

I have an UITextView with a "dropshadow" and a tableView below it. The problem that I can't figure out is how to make the "dropshadow" transparent so that tableView and details below can be seen through the shadow (see image below). I tried playing with the opacity and radius but it's not working.

Here is my code to create the drop shadow:

postDetails.layer.shadowColor = [[UIColor blackColor] CGColor];
postDetails.layer.shadowOffset = CGSizeMake(0.0f, 3.0f);
postDetails.layer.shadowRadius = 3.0f;
postDetails.layer.shadowOpacity = 0.3f;
postDetails.layer.masksToBounds = NO;

EDIT: I think what is also contributing to the issue is the the layout. it is:

• UIView (superview)
• UITextview (subview of UIView)
• UITableView (subview of UIView)

The text should be able to be seen through the shadow for a cleaner look.

Answer 1

The way I was able to do this is through the .shouldRasterize property.

1. I create a view called shadow view.
2. Make sure it is not transparent in any way.

3. Configure the shadow in code:

    UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:_viewShadow.bounds]; _viewShadow.layer.masksToBounds = NO; _viewShadow.layer.shadowColor = [UIColor blackColor].CGColor; _viewShadow.layer.shadowOffset = CGSizeMake(0.0f, 0.0f); _viewShadow.layer.shadowOpacity = 1.0f; _viewShadow.layer.shadowPath = shadowPath.CGPath; _viewShadow.layer.shouldRasterize = true; 

4. Now we can make our shadow view transparent!

    _viewShadow.alpha = 0.8f; 

5. At this point you should see a transparent view where the drop shadow only shows outside of the borders of the image.

6. Lastly, we display our content on top of the shadow view so it is not effected by the alpha changes.

I basically use the .shouldRasterize property to render the layer before any alpha-blending is done with the parent layer.

Answer 2

Try using the below code:

postDetails.layer.shadowColor = [UIColor colorWithWhite:.5 alpha:1].CGColor;
postDetails.layer. shadowOpacity = 1.0f;

Answer 3

Drop shadow for the textView will not solve your problem since it wont extend to the full length of tableView. Instead of this you can put a transparent view to the top of tableView. Add a temporary view with background transparent background color during editing and remove after the editing done

self.overlayView.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.5];

Answer 4

Just set

postDetails.layer.borderColor = [[UIColor grayColor] CGColor]; // set color as you want
postDetails.layer.shadowOpacity = 0.3f; // set Opacity as you want
postDetails.layer.shadowOffset = CGSizeMake(0.0, -1.0); // set it as you want

Answer 5

I used an UIImageView to provide the shadow. I created an image of 1 pixel wide, by 12 pixels high. The image was black, but the alpha was a gradient from 0.5 at the top to 0.0 at the bottom eg. RGBA 1.0,1.0,1.0,0.5 -> 1.0,1.0,1.0,0.0 - I then placed the UIImageView just below the view needing the shadow, and stretched it horizontally across the width of the view. I have also used this when I needed to change the intensity of the shadow when a scroll view below is scrolling, by changing the UIImageView.alpha value