如何在分组的UITableView中添加阴影(如官方Twitter应用程序中所示)？

Question

我有一个标准的分组表视图.我想在它周围添加一个阴影(即在每个tableview部分的边缘) - 如果你不确定我的意思,那么请参阅官方Twitter应用程序(如下)作为示例.它非常微妙,但绝对是一个阴影而不是边界.

我怎样才能达到这个效果？

除了使用内置阴影的图像作为每个单元格的背景 - 这将不允许像我需要的动画单元格大小调整 - 我还没有想出办法.

Answer 1

我有两个可能有帮助的解决方案.由于圆角,我认为你必须将阴影效果应用于单元格,并定位它们,使阴影不会在y轴上重叠.所以...

解决方案1(复杂的解决方案):如果您要设置cornerRadius的动画,或者不确定单元格部分的确切形状,我认为这是可行的解决方案.您是否尝试过使用像Ecarrion建议的shadowPath,但是将它应用到您的自定义UITableView单元格？想象一下中心单元(不是顶部和底部)的路径,它比x轴上的单元略宽,而在y轴上更短.

然后你必须确保阴影投射在截面的顶部和底部,而不会使每个单独的阴影重叠,对吧？因此,对于顶部和底部单元格,您在y轴上使阴影路径更大,让我们说大4点.然后在y轴上调整这些单元格的shadowOffset属性,也可以调整4个点.如果中心单元的shadowOffset是(0,0),则顶部单元格是(0,-4),底部单元格是(0,4).

如果是我,我会将各种尺寸和偏移调整放在一个plist中,这样我就可以修改小细节而无需编辑代码.只需将plist加载到字典或自定义类中,然后使用这些值设置属性.使小调整不那么烦躁.

编辑:除了使用shadowPath之外,您还可以为tableview创建一个复合单元格,其透明背景图层是一个稍小的阴影图层,还有一个用于添加文本和图像的较小图层.阴影层基于文本/图像层,可能稍宽,更高,更短等.对该图层应用模糊,然后使用矩形蒙版对其进行遮罩,以便一个阴影层结束,下一个阴影层开始.对于顶层和底层,遮罩必须向上或向下延伸到阴影效果出现的y轴上的最高/最低点(您仍然需要遮住邻接下一个单元格的一侧).这取决于你愿意在多大程度上达到一个确切的效果......也许这会给你一些更多的弹药.

解决方案2(更简单的解决方案):如果您确切知道cornerRadius在顶部和底部单元格上的位置,并且您唯一不知道的是单元格的长度和/或宽度,则可以使用旧的"拉伸一像素图形"技巧.

首先你Photoshop/Gimp一个角落阴影的图像.如果宽度始终相同,则此图像可以是整个单元格顶部的阴影.通过旋转,可以将相同的图像用于其他角落或单元格的底部.

现在的伎俩.拍摄用于角落阴影的1 x 5部分模糊或渐变效果.如果您的阴影效果为3像素,请将其设置为1x3等.导出为PNG或首选格式,并检查如果将其边缘对角图像的边缘无缝排列(模糊或渐变具有相同的颜色值,而不是一个可见的缝隙).

所有单元格都以1x5图像作为图层内容,在单元格的可见部分(左侧和右侧)旁边获得一个图层.也可以是一个拉伸的UIImageView,你的选择.这些排列使左右阴影.

将角落阴影放在该部分的第一个和最后一个单元格中 - 它们可以是不同的自定义单元格,或者您可以设计您的单元格,以便在创建时将其索引传递给它并适当地自行排列.对齐侧面阴影,使它们从角落阴影结束处开始,然后向下延伸到细胞的底部.如果您还要更改单元格的宽度,则在两个角落图像之间执行相同的操作,在x轴上拉伸渐变.

好吧,一张图片说了千言万语,所以既然我似乎在推动那么多的话就是一张图片来说明:

Answer 2

前几天我在自己的应用程序中需要这个效果.实际上,只需将CALayer阴影属性与CALayer蒙版结合使用即可轻松实现.我在Github上组建了一个简单的示例项目:

https://github.com/schluete/GroupedTableViewWithShadows

该效果在UITableViewCell类别UITableViewCell + CellShadows.m中实现.

第一步是创建一个阴影矩形.放大取决于在节细胞的位置(顶部,中部,底部),以防止圆角从被在错误的拐角(线18-23)可见的矩形.然后将阴影添加到单元格的背景视图中(第35-41行).

现在有一个很好的阴影效果,但第一个细胞的阴影"流血"到第二个细胞.为防止出血,只需添加一个图层蒙版即可切除阴影中所有不必要的部分(第25-32行和第43-46行).就是这样,我们有了我们的影子!