TableView rounded corners and shadow

Question

I have a tableview with three rows. I am trying to make the table rows have rounded corners and also a shadow effect around the entire tableview. For some reason, I cannot make the tableview both have the rounded corners and shadow effect but I could do them separately if I comment out the code responsible for one of the features. Here is the code I am using:

//this is for shadow effect

tableView.backgroundColor = UIColor.clearColor()

tableView.layer.shadowColor = UIColor.darkGrayColor().CGColor   

tableView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0

tableView.layer.shadowOpacity = 1.0

tableView.layer.shadowRadius = 2

// This is for rounded corners

tableView.layer.cornerRadius = 10

tableView.layer.masksToBounds = true

Scholz

Possible duplicate of UIView with shadow, rounded corners and custom drawRect – Smew

That doesn't work quite well since I am using a table view. – Scholz

It should work, you're still editing the view layer. – Smew

I am a bit confused as to how I could use my tableview instance. Could I make an IBOutlet for my table view and somehow use that in the answer from the link you provided? – Scholz

Are you using UITableViewController or UITableView ? – Smew

I am using a UITableView inside a view controller. – Scholz

Then Yes, just drag and drop it and create an IBOutlet – Smew

What would I replace in the link you provided with my uitableview? Would it be the superview variable or something else that I can't seem to figure out? – Scholz

Yes, instead of UIView, you use UITableView, All you need to do is create an IBOutlet by drag and dropping it into your class file and in your viewDidLoad: method just do the same as the link i send you. – Smew

I can't seem to get it still. Tried to change superview and shadow view to equal tableview but doesn't work. Here is what I currently have: pastee.org/8dh33 – Scholz

Answer 1

You can add your table view to a container view and add drop shadow to that container view:

let containerView:UIView = UIView(frame:CGRect(x: 10, y: 100, width: 300, height: 400))
self.tableView = UITableView(frame: containerView.bounds), style: .Plain)
containerView.backgroundColor = UIColor.clearColor()
containerView.layer.shadowColor = UIColor.darkGrayColor().CGColor   
containerView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
// This is for rounded corners
self.tableView.layer.cornerRadius = 10
self.tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
containerView.addSubview(self.tableView)

Edit

Swift 3.0:

let containerView:UIView = UIView(frame:CGRect(x: 10, y: 100, width: 300, height: 400))
self.tableView = UITableView(frame: containerView.bounds, style: .plain)
containerView.backgroundColor = UIColor.clear
containerView.layer.shadowColor = UIColor.darkGray.cgColor
containerView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
    
self.tableView.layer.cornerRadius = 10
self.tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
containerView.addSubview(self.tableView)

Leff

containerView:UIView = UIView(frame:self.tableView.frame) is giving me an issue.. Don't seem to know what it is. If I change the first line to: "let containerView = UIView(frame:self.tableView.frame)", it force closes. – Scholz

Be warned that this code will make the delete functionality stop working. – Waly

@JohnDoe You're going to have to be more specific. I just ran this code and deleting worked fine. See the gif I attached to my answer. – Leff

That is odd. Yesterday I could swipe but not tap the delete button. But now the swipe would not work at all on my actual project. Just now I created a fresh project, swipe does work but tapping delete does nothing. I tried putting the code in viewDidAppear, viewWillAppear, viewWillLayoutSubviews. Removing the code makes it work, or by changing the last line to self.view.addSubview(tableView) similar to the next answer – Waly

@JohnDoe This is the code I used to test that. ¯_(ツ)_/¯ – Leff

I commented out the references to PlaygroundSupport and it does indeed work – Waly

I know now why the code above does not work for me. You need to change the hard-coded first line to let containerView:UIView = UIView(frame: tableView.frame) – Waly

I had it that way before when you first mentioned it didn't work, but that won't make sense for all case, so I changed it to something arbitrary. I thought it was implied to use something sensible. Like the container view can have some origin, but if you are adding the table view as a subview of the container view, then the table view's origin should be CGPoint.zero and the table view and container view's size should be equal. I'll make that more clear in my answer. Sorry for the confusion. – Leff

Nice solution, neat way to get a border on a table. – Exuberant

Answer 2

The RDC's answer is good, but for me the result didnt resolve my case, follow is my fix :

//for table view border
tableView.layer.borderColor = UIColor .grayColor().CGColor
tableView.layer.borderWidth = 1.0

//for shadow
let containerView:UIView = UIView(frame:self.tableView.frame)
//dont use clear color,fit blue color
containerView.backgroundColor = UIColor.blueColor()
//shadow view also need cornerRadius
containerView.layer.cornerRadius = 10
containerView.layer.shadowColor = UIColor.lightGrayColor().CGColor
containerView.layer.shadowOffset = CGSizeMake(-10, 10); //Left-Bottom shadow
//containerView.layer.shadowOffset = CGSizeMake(10, 10); //Right-Bottom shadow
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2

//for rounded corners
tableView.layer.cornerRadius = 10
tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
self.view.addSubview(tableView)

Tudela

I appreciate your efforts :) – Alphonso

This worked for me when the above answer didn't. Thanks – Anastigmatic

Answer 3

i tried above solution but in my application tableview didSelectRowAt was not working.

use this Extension for UITabeleView for corner for shadow

//if u want shadow for all side use (shadowOffset = .zero)

extension UITableView {
    func addCorner(){
        self.layer.cornerRadius = 15
        self.clipsToBounds = true
    }

    func addShadow(){
        self.layer.shadowColor = UIColor.lightGray.cgColor
        self.layer.shadowRadius = 5
        self.layer.shadowOpacity = 0.5
        self.layer.shadowOffset = .zero
        self.layer.masksToBounds = false
    }
}

How to use::

   self.tableView.addCorner()
   self.tableView.addShadow()

Urey

this way tableview cell goes over the navigation bar when swiped. how to fix it? – Daddylonglegs

Answer 4

Thanks to @beyowulf

I have upgraded for me with Swift 2.2, to

• set Border,
• Rounded corner and

• Drop shadow to the table view

  //for table view border
  tableView.layer.borderColor = UIColor .grayColor().CGColor
  tableView.layer.borderWidth = 1.0
  
  //for shadow
  let containerView:UIView = UIView(frame:self.tableView.frame)
  containerView.backgroundColor = UIColor.clearColor()
  containerView.layer.shadowColor = UIColor.lightGrayColor().CGColor
  containerView.layer.shadowOffset = CGSizeMake(-10, 10); //Left-Bottom shadow
  //containerView.layer.shadowOffset = CGSizeMake(10, 10); //Right-Bottom shadow
  containerView.layer.shadowOpacity = 1.0
  containerView.layer.shadowRadius = 2
  
  //for rounded corners
  tableView.layer.cornerRadius = 10
  tableView.layer.masksToBounds = true
  self.view.addSubview(containerView)
  containerView.addSubview(tableView)
  

result looks like

Alphonso

the code works but y position strange, let's try modify clearColor() line to containerView.backgroundColor = UIColor.blueColor(); add containerView.layer.cornerRadius = 10; modify containerView.addSubview(tableView) to [code]self.view.addSubview(tableView);[/code] – Tudela