TableView 圓角和陰影

Question

我有一個三行的 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

Answer 1

您可以將表視圖添加到容器視圖並為該容器視圖添加陰影：

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)

編輯

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

Answer 2

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)

Answer 3

我嘗試了上述解決方案，但在我的應用程序 tableview 中 didSelectRowAt 不起作用。

將此擴展用於 UITabeleView 用於陰影角

//如果你想要所有側面使用的陰影（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
    }
}

如何使用：：

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

Answer 4

感謝@beyowulf

我已經用Swift 2.2升級到

• 設置邊框，
• 圓角和

• 將陰影投影到表格視圖

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

結果看起來像