Dho99
Dho99

Reputation: 19

TableView that has a shadow in its cells

Hi I have normal TableView and I want to update it to be with spaces/gaps between each cell in TableView also from each side(up, down, left, right )

As you can see here: enter image description here

Upvotes: 0

Views: 526

Answers (1)

Victor Lucas
Victor Lucas

Reputation: 217

First of all, you need to create a new UITableViewCell that has one view inside it contentView. You need to make this view that you added smaller than your view and filled so you can create gapes between each tableviewCell.

Like that:

enter image description here

Than you create constraints that will make the view smaller and fit inside the cell like that:

enter image description here

After that you can use this extension here to create the shadow in the view:

https://stackoverflow.com/a/40720122/8792385

The code snippet is something like this:

extension UIView {

  // OUTPUT 1
  func dropShadow(scale: Bool = true) {
    layer.masksToBounds = false
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.5
    layer.shadowOffset = CGSize(width: -1, height: 1)
    layer.shadowRadius = 1

    layer.shadowPath = UIBezierPath(rect: bounds).cgPath
    layer.shouldRasterize = true
    layer.rasterizationScale = scale ? UIScreen.main.scale : 1
  }

}

then you just need to create a reference for your view and in your configuration cell method you call

view.dropShadow()

the result will look something like this:

enter image description here

Upvotes: 4

Related Questions