UIKit：具有卡片样式单元格的TableView

今天，我们将学习如何将每个单元格作为Card（圆角和阴影）制作一个UITableView。 这是最终结果：

好吧，让我们用一个原型单元设置一个表格视图。 为了获得类似于卡片的单元格，我们需要在单元格的“ 内容视图”中使用一个以上的视图，以充当所有单元格内容的容器，并在其中应用圆角和阴影。 因此，视图层次结构应如下所示：

如您所见，我在原型单元cardCell的Content View下添加了一个名为Container View的视图 。

然后，我创建UITableViewCell的子类，其中包含单元格内容的出口，在其中执行以下操作：

  @IBOutlet 
 弱var containerView：UIView！  { 
  didSet { 
  //使其像卡片一样 
  containerView.layer.cornerRadius = 10 
  containerView.layer.shadowOpacity = 1 
  containerView.layer.shadowRadius = 2 
  containerView.layer.shadowColor = UIColor（named：“ Orange”）?. cgColor 
  containerView.layer.shadowOffset = CGSize（宽度：3，高度：3） 
  containerView.backgroundColor = UIColor（名称：“红色”） 
  } 
  } 

好了，谁看过我以前的文章UIKit：Rounded Views和UIKit：View Shadow，这些代码应该很熟悉，无论如何，此代码所做的就是将容器视图的角四舍五入并设置其阴影。

哇，这很简单吗？！ 让我们运行代码并查看结果……

最佳意大利队队长布冯的卡片，即尤文图斯😛，具有与卡片颜色相同的图像视图（队长带），并且不会被裁剪，从而使卡片的右上角看起来像不四舍五入。 让我们使用containerView.layer.masksToBounds = true使图像视图固定在卡片范围内。 再次运行代码，看看是否能解决问题：

Mo！ 图像被剪裁，阴影也被剪裁。 好了，通过Internet浏览，似乎唯一可行的解​​决方案是在单元格视图层次结构中拥有另一个视图，在该视图上将阴影应用于裁剪其内容的容器视图下，如下所示：

所以这是问题所在：将图层的属性masksToBounds为true时，其所有子图层以及拥有该图层的视图的所有子视图（我认为都是相同的，因为该视图只是图层的代表）会被裁剪，因此解决方案是将阴影放在最上面的视图上 ， 并在其下面的视图上设置圆角和masksToBounds 。 因此，在此示例中，“ 容器视图”具有阴影，“ 裁剪视图”具有圆角，用于裁剪单元格的内容。

  @IBOutlet 
 弱var containerView：UIView！  { 
  didSet { 
  containerView.backgroundColor = UIColor.clear 
  containerView.layer.shadowOpacity = 1 
  containerView.layer.shadowRadius = 2 
  containerView.layer.shadowColor = UIColor（named：“ Orange”）?. cgColor 
  containerView.layer.shadowOffset = CGSize（宽度：3，高度：3） 
  } 
  } @IBOutlet 
 弱var ClippingView：UIView！  { 
  didSet { 
  ClipingView.layer.cornerRadius = 10 
  ClipingView.backgroundColor = UIColor（名称：“红色”） 
  ClipingView.layer.masksToBounds = true 
  }} 

而已。 我希望能对某人有所帮助，因为我看到很多人在表视图中使用这种样式，即使该解决方案看起来很简单，我也花了很多时间来解决它。 希望您节省了一些时间，可以在应用程序的创作过程中使用。

再见👋

---

Github上的代码

Donald90 /快速药丸

SwiftPills – XCode项目，其中包含有关Medium的Swift Pills系列中介绍的每个概念的示例。

github.com

---

参考文献

UIView带有圆角和阴影？

我已经尽力尝试了所有可能的方法，但是它们都不能用于自定义UIView……我只想要一个空白的白色视图……

stackoverflow.com

---

以前的帖子

1. UIKit：圆形视图
2. UIKit：查看阴影