【问题标题】:Grouped table view with shadow带阴影的分组表视图
【发布时间】:2021-08-03 04:38:20
【问题描述】:

我想实现一个分组的 tableView 以及与下图相同的阴影。

为了将圆角和阴影一起归档,我只是在主视图后面添加了一个单独的 UIView 并从各个侧面将其与主视图固定在一起,就像这样

在阴影视图上应用阴影,并根据单元格的索引圆角通过主视图上的蒙版。这样就成功实现了带阴影的蒙版圆角。

但是单元格的阴影是重叠的:

为了解决这个问题,顶部单元格应在顶部、右侧和左侧有阴影,中间单元格只有右侧和左侧,底部单元格应在右侧、左侧和底部有阴影。

【问题讨论】:

  • 实现此目的的一种方法是自定义阴影路径。看看Set Shadow on Bottom UIView only。您将需要一个在侧面添加阴影的功能,以及在顶部和底部边缘添加的 2 个功能。然后根据要添加阴影的单元格使用正确的函数...
  • 另外,请添加用于自定义单元格的代码和tableView(_:cellForRowAt:) 代码。

标签: ios swift uitableview shadow


【解决方案1】:

我搞砸了很久,最终修改了一些 Objc 代码以获得您想要的结果。

我从来没有意愿让它也适用于单细胞。总是有一些错误。但是对于两个或更多单元格,请在单元格本身上使用此扩展名,而不是 contentView

单元格内layoutSubviews

backgroundView = UIView(frame: contentView.frame)
backgroundView?.clipsToBounds = false
backgroundView?.backgroundColor = .clear

addShadowToCellInTableView(lastIndex: lastIndex, atIndexPath: indexPath)
public extension UITableViewCell {
    /** adds a drop shadow to the background view of the (grouped) cell */
    func addShadowToCellInTableView(lastIndex: Int, atIndexPath indexPath: IndexPath!) {
        let isFirstRow: Bool = indexPath.row == 0
        let isLastRow: Bool = (indexPath.row == lastIndex - 1)

        guard let backgroundView = self.backgroundView else { return }

        let backBounds = backgroundView.bounds
        // the shadow rect determines the area in which the shadow gets drawn
        var shadowRect: CGRect = backBounds.insetBy(dx: 0, dy: -10)
        if isFirstRow {
            shadowRect.origin.y += 10
        } else if isLastRow {
            shadowRect.size.height -= 10
        }

        // the mask rect ensures that the shadow doesn't bleed into other table cells
        var maskRect: CGRect = backBounds.insetBy(dx: -20, dy: 0)
        if isFirstRow {
            maskRect.origin.y -= 10
            maskRect.size.height += 10
        } else if isLastRow {
            maskRect.size.height += 10
        }

        // now configure the background view layer with the shadow
        let layer: CALayer = backgroundView.layer
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowRadius = 4
        layer.shadowOpacity = 0.23
        layer.shadowPath = UIBezierPath(rect: shadowRect).cgPath
        layer.masksToBounds = false

        // and finally add the shadow mask
        let maskLayer = CAShapeLayer()
        maskLayer.path = UIBezierPath(rect: maskRect).cgPath
        layer.mask = maskLayer
    }

    func addShadowToSingleCell() {
        layer.shadowOpacity = 0.23
        layer.shadowRadius = 4
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowColor = UIColor.black.cgColor

        layer.shadowPath = UIBezierPath(roundedRect: contentView.frame,
                                        cornerRadius: contentView.layer.cornerRadius).cgPath
    }
}

【讨论】:

    猜你喜欢
    • 2011-09-01
    • 1970-01-01
    • 2023-04-02
    • 2013-02-17
    • 2014-02-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-24
    相关资源
    最近更新 更多