ios - 卡片式集合ViewCell

Question

所以我正在尝试构建一个卡片样式的collectionViewCell，就像这篇文章中看到的那样

https://medium.com/@phillfarrugia/building-a-tinder-esque-card-interface-5afa63c6d3db

经过多次搜索，我发现了一些代码，似乎可以模拟 Collection View 单元格的卡片状外观

cell.contentView.layer.cornerRadius = 8.0
cell.contentView.layer.borderWidth = 1.0
cell.contentView.layer.borderColor = UIColor.clear.cgColor
cell.contentView.layer.masksToBounds = true;

cell.layer.shadowColor = UIColor.lightGray.cgColor
cell.layer.shadowOffset = CGSize(width:0,height: 2.0)
cell.layer.shadowRadius = 2.0
cell.layer.shadowOpacity = 1.0
cell.layer.masksToBounds = false
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).cgPath

但是，当我运行代码时，我的单元格看起来像这样

看起来一点也不像卡片风格的用户界面。我还可以看到背后的阴影，所以我知道有些事情有点矛盾。我的代码单元并不复杂，但我一直在修改它，但没有看到任何真正的变化，任何人都可以帮助我。

import UIKit

class FeaturedEventCell: UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }

    public var backgroundImageView: UIImageView = {
        let firstImage = UIImageView()
        firstImage.clipsToBounds = true
        firstImage.translatesAutoresizingMaskIntoConstraints = false
        firstImage.contentMode = .scaleToFill
        firstImage.image = UIImage(named: "scott_7")
        firstImage.layer.cornerRadius = 20
        return firstImage
    }()

    @objc func setupViews(){
        setCellShadow()
        addSubview(backgroundImageView)
        backgroundImageView.snp.makeConstraints { (make) in
            make.edges.equalTo(self)
        }
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Answer 1

阴影绘制在 View 之外，在您的情况下，我认为它们被单元格剪切，即使您将 maskToBounds 设置为 false。

我这样做的方法是使单元格和 contentView 背景清晰，然后添加我自己的另一个 contentView，并在所有侧面插入所需大小的阴影。

然后我将其他 subview 添加到此单元格。

cell.backgroundColor = .clear
cell.contentView.backgroundColor = .clear

let shadowContentView = UIView( frame:cell.contentView.bounds.insetBy( dx:4.0, dy:4.0)
shadowContentView.layer.shadowColor = UIColor.lightGray.cgColor
shadowContentView.layer.shadowOffset = CGSize(width:0.0, height: 2.0)
shadowContentView.layer.shadowRadius = 2.0
shadowContentView.layer.shadowOpacity = 1.0
shadowContentView.layer.cornerRadius = 20.0
shadowContentView.layer.masksToBounds = false
shadowContentView.backgroundColor = .white 

let firstImageView = UIImageView()
firstImageView.layer.cornerRadius = 20.0
firstImageView .layer.masksToBounds = false
shadowContentView.addSubView( firstImageView)