Grouped table view with shadow

Question

I want to achieve a grouped tableView along with shadow same as in the below image.

To archive rounded corners along with shadow, I have simply added a separate UIView behind my main view and pinned it with main view from all side, like this

Applying shadow on shadow view and depending on cell's index rounded corners via masking on main view. And this way successfully achieving masked rounded corners with shadow.

But the shadows of cells are overlapping:

In order to resolve this, the top cell should have shadow on the top, right and left, the middle cell only right and left side and the bottom cell should have shadow on right, left and bottom side.

One way to achieve this would be customizing the shadow path. Take a look at [Set Shadow on Bottom UIView only](https://stackoverflow.com/questions/43107798/set-shadow-on-bottom-uiview-only). You will need one function that adds shadow to sides, and 2 that add at the top and bottom edge. Then use the correct functions based on which cell you are adding shadows too... — Parth, May 12 '21 at 19:49
Also, please add the code you use to customize your cells and your `tableView(_:cellForRowAt:)` code. — Parth, May 12 '21 at 19:51

score 0 · Accepted Answer · answered May 13 '21 at 00:04

I messed around with this for ages, and eventually altered some Objc code to have your desired result.

I never had the will to make it work for single cells too. Always a few bugs. However for two or more cells, use this extension on the cell itself and not the contentView.

Inside cells layoutSubviews

backgroundView = UIView(frame: contentView.frame)
backgroundView?.clipsToBounds = false
backgroundView?.backgroundColor = .clear

addShadowToCellInTableView(lastIndex: lastIndex, atIndexPath: indexPath)

public extension UITableViewCell {
    /** adds a drop shadow to the background view of the (grouped) cell */
    func addShadowToCellInTableView(lastIndex: Int, atIndexPath indexPath: IndexPath!) {
        let isFirstRow: Bool = indexPath.row == 0
        let isLastRow: Bool = (indexPath.row == lastIndex - 1)

        guard let backgroundView = self.backgroundView else { return }

        let backBounds = backgroundView.bounds
        // the shadow rect determines the area in which the shadow gets drawn
        var shadowRect: CGRect = backBounds.insetBy(dx: 0, dy: -10)
        if isFirstRow {
            shadowRect.origin.y += 10
        } else if isLastRow {
            shadowRect.size.height -= 10
        }

        // the mask rect ensures that the shadow doesn't bleed into other table cells
        var maskRect: CGRect = backBounds.insetBy(dx: -20, dy: 0)
        if isFirstRow {
            maskRect.origin.y -= 10
            maskRect.size.height += 10
        } else if isLastRow {
            maskRect.size.height += 10
        }

        // now configure the background view layer with the shadow
        let layer: CALayer = backgroundView.layer
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowRadius = 4
        layer.shadowOpacity = 0.23
        layer.shadowPath = UIBezierPath(rect: shadowRect).cgPath
        layer.masksToBounds = false

        // and finally add the shadow mask
        let maskLayer = CAShapeLayer()
        maskLayer.path = UIBezierPath(rect: maskRect).cgPath
        layer.mask = maskLayer
    }

    func addShadowToSingleCell() {
        layer.shadowOpacity = 0.23
        layer.shadowRadius = 4
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowColor = UIColor.black.cgColor

        layer.shadowPath = UIBezierPath(roundedRect: contentView.frame,
                                        cornerRadius: contentView.layer.cornerRadius).cgPath
    }
}

Grouped table view with shadow

1 Answers1