当前位置: 首页 > 面试题库 >

UITableViewCell:圆角和阴影

许焕
2023-03-14
问题内容

我正在更改UITableViewCell的宽度,以使单元格较小,但用户仍可以沿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

到目前为止一切都很好。问题发生在阴影处。边界被遮盖,因此阴影显然不会出现。我查询了其他答案,但似乎无法弄清楚如何沿边界拐角 显示阴影。

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

所以我的问题–如何减小宽度,圆角并同时向UITableViewCell添加阴影?

更新: 尝试R Moyer的答案

尝试R
Moyer的答案


问题答案:

这个问题适时出现了!我实际上只是自己解决了同样的问题。

  1. 在单元格的“内容视图”中创建一个UIView(让我们称其为mainBackground)。这将包含您单元格的所有内容。放置它并在情节提要中应用必要的约束。
  2. 创建另一个UIView。这将是一个带有阴影的阴影(我们将其称为shadowLayer)。完全按照您的方式放置它mainBackground,但是在它后面,并应用相同的约束。
  3. 现在,您应该能够如下设置圆角和阴影:
        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为阴影定义一个,然后对其进行栅格化。因此,您可能需要这样做:

    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调用时间之前边界没有正确设置。因此,您需要调整shadowPath基于shadowLayer的范围。做到这一点的最佳方法是将其子类化UIView,并将属性观察器添加到bounds属性中。然后在中设置阴影的所有属性didSet。切记shadowLayer在情节提要中更改您的类以匹配新的子类。

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
    }
}


 类似资料:
  • 问题内容: 我有一个三行的tableview。我试图使表行具有圆角,并且在整个tableview周围也有阴影效果。出于某种原因,我无法使tableview都具有圆角和阴影效果,但是如果我注释掉负责其中一个功能的代码,则可以单独进行处理。这是我正在使用的代码: 问题答案: 您可以将表视图添加到容器视图,并将阴影添加到该容器视图: 编辑 Swift 3.0:

  • 问题内容: 我必须创建一个将具有圆角,边框,阴影的自定义,其方法被重写以提供自定义绘图代码,并通过该代码将多条直线绘制到视图中(我在这里需要使用快速,轻便的方法,因为许多这些视图中的一个可以呈现)。 我当前面临的问题是,一旦在视图类中进行覆盖(即使其中没​​有任何自定义代码),阴影也将不再适用于圆角。请参见附件中的图片: 在视图控制器中,我使用以下代码: 在覆盖的情况下,我将使用类似: 但是如上所

  • 在将此标记为副本之前,我想说,我已经浏览了这么多类似于此、此和此的帖子。但我还没有找到适合我的解决方案。 我正在尝试使用创建一个弹出窗口。我想使用圆角和下拉阴影(如

  • 问题内容: 我已经看到了很多代码,但是似乎没有一个代码可以很好地工作或根本无法工作。我已经使用了图片作为圆角,但是我需要代码,以使其能够围绕的边界。我针对此问题找到的唯一解决方案是在边框周围的单元格中具有图像。我还能尝试什么吗? 问题答案: 尝试: 这将在Firefox,Safari,Chrome和任何其他CSS3兼容浏览器中运行。为此创建一个单独的类可能会更容易-完全兼容需要3条语句。 另外,请

  • 问题内容: 我希望图像具有圆角。我实现此xml代码,并在我的图像视图中使用它。但图像与形状重叠。我正在通过异步任务下载图像。 问题答案: 我使用通用图像加载器库下载图像并绕过图像的角落,它对我有用。

  • 主要内容:border-*-radius,border-radius在制作网页的过程中,有时我们可能需要实现圆角的效果,以前的做法是通过切图(将设计稿切成便于制作成页面的图片),使用多个背景图像来实现圆角。在 CSS3 出现之后就不需要这么麻烦了,CSS3 中提供了一系列属性来设置元素的圆角效果,如下所示: border-top-left-radius:为元素左上角设置圆角效果; border-top-right-radius:为元素右上角设置圆角效果; bord