tableView 如何对整个 Section 设置圆角

黑客技术 点击右侧关注，了解黑客的世界！

Java开发进阶 点击右侧关注，掌握进阶之路！

Linux编程 点击右侧关注，免费入门到精通！

作者丨chaolongsz
https://juejin.im/post/5d2e1b64f265da1b8812108c

初衷

早年我曾想实现一个类似 iPad 设置页面右方的 tableView 的风格。它的特点主要是在整个分组设置圆角，如下图所示

难点

由于 Section 并不是一个真实存在的 View，而是 tableView 便于管理设计的一个逻辑容器。那么如何对整个 Section 设置圆角呢？

还有，如果要利用 tableViewCell 的自带元素，那么 Cell 与父视图应该有一定的 padding，且高亮不能是完整的一行，这个也是我当初没考虑到的。

方案

当时在网上找了两种方案，一种是计算好 Section 的位置，在底下添加白底。

一种是在把每个 Section 当做一个 Row 处理，这样的坏处是要自己处理点击高亮，而且没有很好复用 Cell。

现在看来，这两种方案都不太优雅。

我想到了第三种方案，大概是这样的：Section 第一个 Cell 设置左上、右上圆角，最后一个 Cell 设置左下，右下边角，如果只有一个 Cell，设置全部圆角。

实现

首先，Row 的宽度不需要占满整个行，所以我需要对 Cell 的位置进行调整，调整完毕之后，设置圆角，圆角可以分3种情形来设置，还有一种不设置的情况。

调整 Cell 的位置

一开始，我设置了 tableView 的 contentInsets 属性，结果却让 tableView 可以左右滑动了，因为 tableView 继承于 scrollView，只不过他的 contentSize 的宽度与 frame 的宽度一致才没有左右滑动，设置了 contentInsets 的左右边距之后，tableView 不再跟预想一样了。

想想我的目标：调整 tableViewCell 的宽度，使之的 x 坐标不为 0。

那么这个任务就好办了，我可以在 layoutSubviews 里面去操作，反正任何布局代码都会到这里来，包括通过 AutoLayout 设置的布局。

然后我自定义了一个 TableViewCell，从而能够自定义 layoutSubviews 操作：

设置圆角

通过 Google，很容易找到了设置部分圆角的办法，然后我在此基础上添加了一个不设置圆角的方法以避免复用问题

经过刚才的分析，把这4种状态作为一个枚举：

然后在 layoutSubviews 里面设置就行了。由于这种圆角是通过 mask 设置的，不会造成离屏渲染问题，可以放心使用。

同时，需要在 tableViewCell 的数据源指定这个位置:

然后，再自定义分割线，细调一下，就OK啦！

 推荐↓↓↓ 

长

按

关

注

?【16个技术公众号】都在这里！

涵盖：程序员大咖、源码共读、程序员共读、数据结构与算法、黑客技术和网络安全、大数据科技、编程前端、Java、Python、Web编程开发、Android、iOS开发、Linux、数据库研发、幽默程序员等。

万水千山总是情，点个 “ 在看” 行不行