ios TableView 圆角和阴影

TableView rounded corners and shadow

提问by mitch94

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:

我有一个三行的 tableview。我试图使表格行具有圆角，并且在整个 tableview 周围也有阴影效果。出于某种原因，我不能让 tableview 都具有圆角和阴影效果，但是如果我注释掉负责其中一项功能的代码，我可以分别进行。这是我正在使用的代码：

//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

回答by beyowulf

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:

斯威夫特 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)

回答by Chris Ho

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

RDC 的回答很好，但对我来说结果并没有解决我的问题，以下是我的解决方法：

//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)

回答by swiftBoy

Thanks to @beyowulf

感谢@beyowulf

I have upgraded for me with Swift 2.2, to

我已经用Swift 2.2升级到

• set Border,
• Rounded cornerand

• Drop shadowto 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)
  

• 设置边框，
• 圆角和

• 将阴影投影到表格视图

  //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

结果看起来像

回答by Tej27

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

我尝试了上述解决方案，但在我的应用程序 tableview 中 didSelectRowAt 不起作用。

use this Extension for UITabeleView for corner for shadow

将此扩展用于 UITabeleView 用于阴影角

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

//如果你想要所有侧面使用的阴影（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()