collectionview 单元格中的阴影与 swift 中的其他单元格的行为方式不同

Posted 2023-03-13

【中文标题】collectionview 单元格中的阴影与 swift 中的其他单元格的行为方式不同

【英文标题】：Shadow in collectionview cell is not acting the same way as the other cells in swift

【发布时间】：2020-10-04 03:05:11

【问题描述】：

我正在尝试使用 diffable 数据源在 collectionview 单元格上创建阴影，我可以这样做，但问题是某些单元格上的阴影与其他单元格不同。

我希望它看起来像第二个单元格，阴影在整个单元格周围有一个小阴影，而不是看起来像阴影在底部的第一个单元格。

这是我为影子创建的扩展：

    extension UIView 
    
    func shadowSetUp() 
        layer.masksToBounds = false
        clipsToBounds = false
        layer.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor
        layer.shadowOpacity = 1
        layer.shadowOffset = CGSize.zero
        layer.shadowRadius = 10.0
        layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    
    

我把这个扩展放在collectionview单元格视图中，像这样：

    private lazy var setUpView: Void = 
        contentView.addSubview(cellBackground)
        cellBackground.addSubview(title)
        cellBackground.addSubview(imgView)
        cellBackground.translatesAutoresizingMaskIntoConstraints = false
        imgView.translatesAutoresizingMaskIntoConstraints = false
        title.translatesAutoresizingMaskIntoConstraints = false
        self.clipsToBounds = false
        contentView.backgroundColor = colors.Colors.views
        cellBackground.backgroundColor = colors.Colors.views
        title.textColor = .label
        title.numberOfLines = 3
        title.textAlignment = .left
        title.adjustsFontSizeToFitWidth = true
        title.font = UIFontMetrics.default.scaledFont(for: UIFont.systemFont(ofSize: 25, weight: .bold))
        title.adjustsFontSizeToFitWidth = false
        title.adjustsFontForContentSizeCategory = true
        
        title.isHidden = true
        imgView.isHidden = true

        cellBackground.layer.cornerRadius = 15

        contentView.layer.cornerRadius = 15
        contentView.shadowSetUp() <---- This is where i put the shadow extension
        
        NSLayoutConstraint.activate([
            cellBackground.topAnchor.constraint(equalTo: topAnchor),
            cellBackground.leadingAnchor.constraint(equalTo: leadingAnchor),
            cellBackground.trailingAnchor.constraint(equalTo: trailingAnchor),
            cellBackground.bottomAnchor.constraint(equalTo: bottomAnchor),
            imgView.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 0.25),
            imgView.widthAnchor.constraint(equalTo: heightAnchor, multiplier: 0.25),
            imgView.topAnchor.constraint(equalTo: cellBackground.topAnchor, constant: 5),
            imgView.leadingAnchor.constraint(equalTo: cellBackground.leadingAnchor, constant: 10),
            title.leadingAnchor.constraint(equalTo: cellBackground.leadingAnchor, constant: 10),
            title.trailingAnchor.constraint(equalTo: cellBackground.trailingAnchor, constant: -10),
            title.topAnchor.constraint(equalTo: imgView.bottomAnchor, constant: 5),
            title.bottomAnchor.constraint(equalTo: cellBackground.bottomAnchor, constant: -5)
        ])
        
        
    ()
    

我尝试更改许多不同的东西，例如将阴影放在 cellBackground 上，将其设置为 shadowSetUp()，并将贝塞尔路径更改为不同的版本，例如使用：

layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: 15).cgPath

和

layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: <#T##UIRectCorner#>, cornerRadii: <#T##CGSize#>)

我也尝试删除 bezierPath，它确实有效，但我知道对于单元格最好使用 bezierPath，因为存在滞后问题。

我知道有人问过类似的问题，但是当我环顾四周时，似乎没有什么对我有用。 我看了看：

Shadow on UIView layer

https://gist.github.com/nor0x/076cef18b1e412d2f432da911b9a5bab

https://developer.apple.com/forums/thread/116678

Adding rounded corner and drop shadow to UICollectionViewCell

How to make UICollectionViewCells have rounded corners and drop shadows?

UICollectionView Cell Shadow

我只是想知道我哪里出错了。当我试图重新创建它时，我无法让它再次发生。 如果您有任何疑问，请询问。 谢谢

【问题讨论】：

如果您添加阴影的代码将正确的效果添加到 CollectionViewCell 之外的 UIView 并且问题仅在您将阴影添加到 CollectionViewCells 时发生，同时假设添加阴影的代码适用于所有类似地，我的猜测是您正在向同一个单元格多次添加阴影。因此，您必须确保，当您滚动浏览 CollectionView 时，您不会一次又一次地向同一个单元格添加阴影。

@Dogahe 我也有同样的想法，但是当我注释掉创建阴影的行时，阴影消失了。

【参考方案1】：

尝试使用下面的代码制作阴影。

    DispatchQueue.global(qos: .background).async 
        DispatchQueue.main.async 
            myView.layer.rasterizationScale = UIScreen.main.scale
            myView.layer.shouldRasterize = true
            //myView.layer.masksToBounds = true
            myView.layer.cornerRadius = 8
            myView.layer.shadowOffset = CGSize(width: 3, height: 3)
            myView.layer.shadowRadius = 8
            myView.layer.shadowColor = UIColor.gray.cgColor
            myView.layer.shadowOpacity = 0.4
        
    

【讨论】：

没有影子路径重要吗？

我刚试了下，给了个影子路径，还是不行