Adding drop shadow to UITableView

Question

I've a plain UITableView (not grouped) that I want to add a dropshadow to left and to the right.

enter image description here

How can I achieve this? I've tried:

[self.tableView.layer setShadowColor:[[UIColor whiteColor] CGColor]];
[self.tableView.layer setShadowOffset:CGSizeMake(0, 0)];
[self.tableView.layer setShadowRadius:5.0];
[self.tableView.layer setShadowOpacity:1];

but it doesn't work.

Have you made sure that `clipToBounds` and `maskToBounds` are set to `NO` (for the view and layer respectively)? — mattjgalloway, Jan 25 '12 at 23:50
Thanks guy, you're right! If you add an answer I'll mark it as correct answer. — Fred Collins, Jan 26 '12 at 00:00
[**TableView rounded corners and Shadow Swift**](http://stackoverflow.com/questions/33793211/tableview-rounded-corners-and-shadow-swift/36399505#36399505) — swiftBoy, Apr 04 '16 at 10:01

score 53 · Accepted Answer · edited Sep 24 '12 at 17:52

53

You need to make sure clipsToBounds and masksToBounds are set to NO on the view and layer respectively.

self.tableView.clipsToBounds = NO;
self.tableView.layer.masksToBounds = NO;

edited Sep 24 '12 at 17:52

Tim Büthe

62,884
17
92
129

answered Jan 26 '12 at 00:06

mattjgalloway

34,792
12
100
110

7

Thanks for the info. But if I set tableView.layer.masksToBounds = NO; & tableView.clipsToBounds = NO; , my tableviewcell moves above tableviews bounds. I have tableview , imageview in my viewController. So some part is used by table view & some part is used by iamgeview. Can you help me with it ? – iOSAppDev Jun 06 '12 at 13:25
@iOSAppDev Please take a look at my answer. It will prevent the problem you are running into. – the_critic Mar 30 '13 at 14:01
3

You d'better put an UIView behind the UITableView and add the shadow to the UIView. – filou Jun 19 '13 at 23:47
I am facing a strange issue when I set the cliptoBounds and masktoBounds to false for my dynamic sized UItableVIew. Here is a recoded video for the same https://drive.google.com/file/d/1_BGThAIbJgY8blxLLFDKD8_H76Vdx7Q5/view?usp=sharing – Yaseen Majeed Nov 02 '20 at 13:30

the_critic · Answer 2 · 2013-05-24T17:33:18.573

I would like to share my solution: This requires you to subclass UITableView and add a property, for the sake of demonstration let's call it showShadow. Add this to your table view's .h file:

@property (nonatomic,assign) BOOL showShadow;

and its corresponding @synthesize in the .m file to create getter and setter methods:

@synthesize showShadow;

Then add an iVar UIView *shadowView; to the table view's .h file. Now in the - (id)initWithFrame:(CGRect)frame method of your subclassed UITableView add the following piece of code to set up the view that will eventually cast the shadow:

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        shadowView = [[UIView alloc]initWithFrame:self.frame];
        shadowView.backgroundColor = [UIColor whiteColor];
        shadowView.layer.shadowOpacity = 0.1;
        shadowView.layer.shadowOffset = CGSizeMake(3, 3);
        shadowView.layer.shadowRadius = 1;



    }
    return self;
}

And, finally, write the setter method to show/hide the shadow:

-(void)setShowShadow:(BOOL)s{

    showShadow = s;

    if(s){
        [self.superview insertSubview:shadowView belowSubview:self];
    }else{
        [shadowView removeFromSuperview];
    }
}

Additionally if you would like to move the table (for whatever reason), you should override the -setFrame: method to also move the shadowView along with it (as it is not in the table view's view hierarchy):

-(void)setFrame:(CGRect)frame{

     [super setFrame:frame];
     shadowView.frame = frame;

}

You have successfully enabled shadows ! Use it like this :

MySubclassedTableView *table = [[MySubclassedTableView alloc]initWithFrame:CGRectMake(20, 200, 280, 200)];
        [self.view addSubview:table];
        table.showShadow = YES;

WARNING:

You have to set the showShadow property AFTER you add your table view, because the line table.showShadow will call the line [self.superview insertSubview:shadowView belowSubview:self]; which requires the table view to be existent.

score 0 · Answer 3 · answered Aug 19 '20 at 09:16

Adding Swift version of solution (which helped me a lot) provided by @mattjgalloway

your_TableView.clipsToBounds = false
your_TableView..layer.masksToBounds = false
your_TableView..layer.shadowColor = UIColor.lightGray.cgColor
your_TableView..layer.shadowOffset = CGSize(width: 0, height: 0)
your_TableView..layer.shadowRadius = 5.0
your_TableView..layer.shadowOpacity = 0.5

score 0 · Answer 4 · answered Jan 25 '12 at 23:58

0

Isn't the white glow I am seeing the shadow? You have no offset set, so it is doing exactly what you want. For a shadow, set the color to black, and give it an offset of maybe 3,5 or something.

answered Jan 25 '12 at 23:58

Jeshua Lacock

5,730
1
28
58

No, that image is what I've tried to achieve. Now I've fixed with mattjgalloway comment. Thanks anyway. – Fred Collins Jan 26 '12 at 00:00

Adding drop shadow to UITableView

4 Answers4

Linked