如何创建具有边距、圆角和阴影的 UITableView？

Question

我正在用 Swift 开发一个应用程序。 在我的故事板中，我有一个 UITableViewController。我想为我的表格应用左右边距以及第一个/最后一个单元格上的圆角以及表格视图周围的阴影。

我尝试了很多选项，但找不到合适的解决方案。现在，我正在使用 UITableViewCell 的子类，我在其中覆盖框架以使其更窄。我可以有圆角，但我不能有阴影。

这是我的子类代码：

class NarrowTableCell: UITableViewCell {

  override var frame: CGRect {
      get {
          return super.frame
      }
      set (newFrame) {
          var f = newFrame
          f.origin.x = 10
          if let w = superview?.frame.size.width {
              f.size.width = w - 20
          } else {
              f.size.width = newFrame.size.width - 20
          }
          super.frame = f
          super.layer.masksToBounds = true
      }
  }

  func applyNoCorners() {
      round(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 0)
  }

  func applyCorners() {
      round(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 5)
  }

  func applyTopCorners() {
      round(corners: [.topLeft, .topRight], radius: 5)
  }

  func applyBottomCorners() {
      round(corners: [ .bottomLeft, .bottomRight], radius: 5)
  }
}

我的大部分应用都是在 Storyboard 中完成的，我希望能够为动态和静态表格视图实现相同的结果。

我遇到的另一个问题是，当单元格框架更改时，我里面的标签没有正确更新。也就是说，它的内容被截断了。

这是我想做的：

Answer 1

我使用 UIView 的扩展来管理圆角和阴影。由于变量是@IBInspectable，所以一切都可以直接在storyboard中设置！

import UIKit

extension UIView {

    @IBInspectable var shadow: Bool {
        get {
            return layer.shadowOpacity > 0.0
        }
        set {
            if newValue == true {
                self.addShadow()
            }
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return self.layer.cornerRadius
        }
        set {
            self.layer.cornerRadius = newValue

            // Don't touch the masksToBound property if a shadow is needed in addition to the cornerRadius
            if shadow == false {
                self.layer.masksToBounds = true
            }
        }
    }


    func addShadow(shadowColor: CGColor = UIColor.black.cgColor,
               shadowOffset: CGSize = CGSize(width: 1.0, height: 2.0),
               shadowOpacity: Float = 0.4,
               shadowRadius: CGFloat = 3.0) {
        layer.shadowColor = shadowColor
        layer.shadowOffset = shadowOffset
        layer.shadowOpacity = shadowOpacity
        layer.shadowRadius = shadowRadius
    }
}

从故事板上您可以打开或关闭阴影效果并提供角半径以供查看。您可以提供任何视图阴影或半径。