UITableViewCell shadows

Question

I'm trying to implement this design but all solutions I have browsed won't work and from what I understand it could be because of the spacing between the cells and the UITableView.
Here's the design:

So basically what I'm trying to achieve is to have shadows from all 4 sides as well as some spacing between each cell and the following cell. Thanks

Edit: Here's the code I tried.

let shadowSize : CGFloat = 5.0
let shadowPath = UIBezierPath(rect: CGRect(x: -shadowSize / 2,
                                           y: -shadowSize / 2,
                                           width: self.avatarImageView.frame.size.width + shadowSize,
                                           height: self.avatarImageView.frame.size.height + shadowSize))
self.avatarImageView.layer.masksToBounds = false
self.avatarImageView.layer.shadowColor = UIColor.black.cgColor
self.avatarImageView.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
self.avatarImageView.layer.shadowOpacity = 0.5
self.avatarImageView.layer.shadowPath = shadowPath.cgPath

Edit 2: I'd like to point out that all my cell's objects are inside a container UIView. All the above code is applied to this UIView.

Possible duplicate of [How to add spacing between UITableViewCell](https://stackoverflow.com/questions/6216839/how-to-add-spacing-between-uitableviewcell) — PGDev, Jun 05 '17 at 10:45
The main issue here is the shadows not working, not the spacing. It's not a duplicate. @PGDev — Tarek, Jun 05 '17 at 10:50
For shadow you can refer to: https://stackoverflow.com/questions/3546880/iphone-uitableviewcell-layer-shadow — PGDev, Jun 05 '17 at 10:50
try putting a custom view in the table view cell(make the custom view with shadow effects). Put all your components inside the custom view. — jegadeesh, Jun 05 '17 at 10:51
By custom view you mean another UIView that contains all the cell's stuff? Yes that's how my layout is. I'll add that to my question. — Tarek, Jun 05 '17 at 10:52
@Tarek check out the answer let me know if you have any confusion. — Salman Ghumsani, Jun 05 '17 at 10:57

Salman Ghumsani · Accepted Answer · 2017-08-01T07:25:25.567

10

You have to make a UIView inside UITableViewCell and work on that view.

FOR SHADOW I AM USING THIS IN UITableViewCell CLASS:-

viewDummy.addShadow() //use from any view

extension UIView {
    func addShadow(){
        self.layer.shadowColor = UIColor.blackColor().CGColor
        self.layer.shadowOpacity = 0.5
        self.layer.shadowRadius = 2.0
        self.layer.shadowOffset = CGSizeMake(1.0, 1.0)
    }
}

edited Aug 01 '17 at 07:25

answered Jun 05 '17 at 10:53

Salman Ghumsani

3,647
2
21
34

Worked flawlessly. I guess my main issue was that the containing UIView was pinned at 0 0 0 0 so the shadows never showed up. – Tarek Jun 05 '17 at 11:51
Yup. All good. I had to change the pinning of the containing view from 0 0 0 0 to something probably larger than the shadowRadius so 5 5 5 5 worked. – Tarek Jun 05 '17 at 12:06
cell.layer.masksToBounds = false; cell.clipsToBounds = false; is the main key to work – Apple_Magic Apr 06 '20 at 15:13

Biswajit Banik · Answer 2 · 2019-11-19T11:32:55.560

2

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    cell.layer.shadowOffset = CGSize(width: 0, height: 0)
    cell.layer.shadowColor = UIColor.black.cgColor
    cell.layer.shadowRadius = 5

    cell.layer.shadowOpacity = 0.40
    cell.layer.masksToBounds = false;
    cell.clipsToBounds = false;
    return cell
}

edited Nov 19 '19 at 11:32

answered Feb 26 '18 at 05:32

Biswajit Banik

99
2
10

Please edit your answer with an explanation of how it solves the question. – Omar Einea Feb 26 '18 at 05:54

UITableViewCell shadows

2 Answers2

Linked