如何在分组的UITableView中添加阴影（如官方Twitter应用程序中所示）？ [英] How could I add a shadow to a grouped UITableView (as seen in the official twitter app)?

问题描述

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

I have a standard grouped table view. I would like to add a shadow around it (i.e. around the edge of each tableview section) - if you are not sure what I mean, then see the official twitter app (below) for an example. It's pretty subtle, but it's definitely a shadow as opposed to a border.

如何实现这种效果？

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

Save for using images with built in shadows as each cell's background - which won't allow animated cell resizing like I need - I haven't figured out a way.

推荐答案

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

I needed this effect in one of my own applications the other day. It's actually very easy to achieve by just using the CALayer shadow properties in combination with a CALayer mask. I've put together a simple example project at Github:

https://github.com/schluete/GroupedTableViewWithShadows

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

The effect is implemented in the UITableViewCell category UITableViewCell+CellShadows.m.

第一步是创建一个阴影矩形。根据单元格（顶部，中间，底部）中的单元格位置放大矩形，以防止在错误的角落中看到圆角（第18-23行）。然后将阴影添加到单元格的背景视图（第35-41行）。

The first step is to create a shadow rectangle. Enlarge the rectangle depending on the cell's position in the section (top, middle, bottom) to prevent the rounded corners from being visible in the wrong corners (lines 18-23). Then add the shadow to the background view of the cell (lines 35-41).

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

Now there's a nice shadow effect, but the shadow of the first cell "bleeds" into the second cell. To prevent the bleeding just add a layer mask to cut off all the unnecessary parts of the shadow (lines 25-32 and 43-46). That's it, we've got our shadow!

这篇关于如何在分组的UITableView中添加阴影（如官方Twitter应用程序中所示）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！