UITableViewCell:圆角和阴影 [英] UITableViewCell: rounded corners and shadow

问题描述

我正在更改 UITableViewCell 的宽度，以便单元格更小，但用户仍然可以沿着 tableview 的边缘滚动.

I'm changing the width of a UITableViewCell so that the cell is smaller but the user can still scroll along the edges of the tableview.

override func layoutSubviews() {        
    // Set the width of the cell
    self.bounds = CGRectMake(self.bounds.origin.x, self.bounds.origin.y, self.bounds.size.width - 40, self.bounds.size.height)
    super.layoutSubviews()
}

然后我绕过拐角:

cell.layer.cornerRadius = 8
cell.layer.masksToBounds = true

到目前为止一切都很好.问题发生在阴影上.边界被屏蔽了，所以阴影显然不会出现.我已经查找了其他答案，但似乎无法弄清楚如何沿边界圆角并显示阴影.

All good so far. Problem happens with the shadow. The bounds are masked, so the shadow obviously won't show up. I've looked up other answers but can't seem to figure out how to round the corners along the bounds and show the shadow.

cell.layer.shadowOffset = CGSizeMake(0, 0)
cell.layer.shadowColor = UIColor.blackColor().CGColor
cell.layer.shadowOpacity = 0.23
cell.layer.shadowRadius = 4

那么我的问题是——如何同时减小宽度、圆角并为 UITableViewCell 添加阴影?

So my question – how do I reduce the width, round the corners, and add a shadow to a UITableViewCell at the same time?

更新:尝试 R Moyer 的答案

Update: Trying R Moyer's answer

推荐答案

这个问题来得正是时候！我真的只是自己解决了同样的问题.

This question comes at a good time! I literally JUST solved this same issue myself.

1. 在单元格的内容视图中创建一个 UIView(我们将其称为 mainBackground).这将包含您单元格的所有内容.在故事板中放置它并应用必要的约束.
2. 创建另一个UIView.这将是带有阴影的那个(让我们将其称为 shadowLayer).完全按照您在 mainBackground 中所做的放置它，但在它后面，并应用相同的约束.

3. 现在您应该可以如下设置圆角和阴影:

1. Create a UIView (let's refer to it as mainBackground) inside your cell's Content View. This will contain all of your cell's content. Position it and apply necessary constraints in the Storyboard.
2. Create another UIView. This one will be the one with the shadow (let's refer to it as shadowLayer). Position it exactly as you did mainBackground, but behind it, and apply the same constraints.

3. Now you should be able to set the rounded corners and the shadows as follows:

cell.mainBackground.layer.cornerRadius = 8  
cell.mainBackground.layer.masksToBounds = true

cell.shadowLayer.layer.masksToBounds = false
cell.shadowLayer.layer.shadowOffset = CGSizeMake(0, 0)
cell.shadowLayer.layer.shadowColor = UIColor.blackColor().CGColor
cell.shadowLayer.layer.shadowOpacity = 0.23
cell.shadowLayer.layer.shadowRadius = 4

然而，这里的问题是:计算每个单元格的阴影是一项缓慢的任务.当您滚动表格时，您会注意到一些严重的滞后.解决此问题的最佳方法是为阴影定义一个 UIBezierPath，然后对其进行光栅化.所以你可能想要这样做:

However, the problem here is: calculating the shadow for every single cell is a slow task. You'll notice some serious lag when you scroll through your table. The best way to fix this is to define a UIBezierPath for the shadow, then rasterize it. So you may want to do this:

cell.shadowLayer.layer.shadowPath = UIBezierPath(roundedRect: cell.shadowLayer.bounds, byRoundingCorners: .AllCorners, cornerRadii: CGSize(width: 8, height: 8)).CGPath
cell.shadowLayer.layer.shouldRasterize = true
cell.shadowLayer.layer.rasterizationScale = UIScreen.mainScreen().scale

但这又产生了一个新问题！UIBezierPath 的形状取决于 shadowLayer 的边界，但是在调用 cellForRowAtIndexPath 时边界没有正确设置.因此，您需要根据 shadowLayer 的边界调整 shadowPath.最好的方法是将 UIView 子类化，并在 bounds 属性中添加一个属性观察器.然后在 didSet 中设置阴影的所有属性.请记住更改故事板中 shadowLayer 的类以匹配您的新子类.

But this creates a new problem! The shape of the UIBezierPath depends on shadowLayer's bounds, but the bounds are not properly set by the time cellForRowAtIndexPath is called. So, you need to adjust the shadowPath based on shadowLayer's bounds. The best way to do this is to subclass UIView, and add a property observer to the bounds property. Then set all the properties for the shadow in didSet. Remember to change the class of your shadowLayer in the storyboard to match your new subclass.

class ShadowView: UIView {
    override var bounds: CGRect {
        didSet {
            setupShadow()
        }
    }

    private func setupShadow() {
        self.layer.cornerRadius = 8
        self.layer.shadowOffset = CGSize(width: 0, height: 3)
        self.layer.shadowRadius = 3
        self.layer.shadowOpacity = 0.3
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 8, height: 8)).cgPath
        self.layer.shouldRasterize = true
        self.layer.rasterizationScale = UIScreen.main.scale
    }
}

这篇关于UITableViewCell:圆角和阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！