如何為 UICollectionViewCell 制作陰影？

Question

我需要為 CollectionViewCell 制作陰影。 我向 collectionview 單元格添加了一個視圖，但無法像這樣制作適當的陰影：我想要獲得的陰影和半徑，這是我的陰影我的半徑和陰影

這是一個寫的代碼：`

    let gray = UIColor.gray.cgColor
    viewCollectionView.layer.cornerRadius = 30
    viewCollectionView.layer.borderWidth = 0.1
    viewCollectionView.layer.borderColor = gray
    
    viewCollectionView.layer.shadowRadius = 100.0
    viewCollectionView.layer.shadowColor = gray
    viewCollectionView.layer.shadowOpacity = 0.2
    viewCollectionView.layer.shadowOffset = .zero
    viewCollectionView.clipsToBounds = false`

Answer 1

獲得“陰影效果”的一種方法是向單元格的內容視圖添加“圓角”視圖，將 imageView 和標簽添加到該圓角視圖，然后將陰影屬性添加到圓角視圖。

您需要充分插入圓角視圖，以便您的陰影不會被單元格本身剪裁。

所以，看看這個單元格 class：

class ShadowedCollectionViewCell: UICollectionViewCell {
    
    let roundedCornerView = UIView()

    let imageView = UIImageView()
    let labelA = UILabel()
    let labelB = UILabel()
    let labelC = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() {
        contentView.backgroundColor = .white
        roundedCornerView.backgroundColor = .white
        roundedCornerView.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(roundedCornerView)
        
        let g = contentView.layoutMarginsGuide
        NSLayoutConstraint.activate([
            roundedCornerView.topAnchor.constraint(equalTo: g.topAnchor, constant: 8.0),
            roundedCornerView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 8.0),
            roundedCornerView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -8.0),
            roundedCornerView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -8.0),
        ])
        
        roundedCornerView.layer.cornerRadius = 30.0
        
        roundedCornerView.layer.shadowRadius = 6.0
        roundedCornerView.layer.shadowColor = UIColor.gray.cgColor
        roundedCornerView.layer.shadowOpacity = 0.2
        roundedCornerView.layer.shadowOffset = CGSize(width: 0.0, height: 4.0)
        
        // add labels, imageView, etc to roundedView
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.distribution = .equalSpacing
        
        imageView.contentMode = .scaleAspectFit
        
        imageView.translatesAutoresizingMaskIntoConstraints = false
        stackView.translatesAutoresizingMaskIntoConstraints = false

        roundedCornerView.addSubview(imageView)
        roundedCornerView.addSubview(stackView)
        
        NSLayoutConstraint.activate([

            imageView.topAnchor.constraint(equalTo: roundedCornerView.topAnchor, constant: 8.0),
            imageView.leadingAnchor.constraint(equalTo: roundedCornerView.leadingAnchor, constant: 16.0),
            imageView.trailingAnchor.constraint(equalTo: roundedCornerView.trailingAnchor, constant: -16.0),
            imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor),
            
            stackView.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 8.0),
            stackView.leadingAnchor.constraint(equalTo: roundedCornerView.leadingAnchor, constant: 8.0),
            stackView.trailingAnchor.constraint(equalTo: roundedCornerView.trailingAnchor, constant: -8.0),
            stackView.bottomAnchor.constraint(equalTo: roundedCornerView.bottomAnchor, constant: -16.0),

        ])

        labelA.textAlignment = .center
        labelB.textAlignment = .center
        labelC.textAlignment = .center

        labelA.font = .systemFont(ofSize: 12, weight: .light)
        labelB.font = .systemFont(ofSize: 10, weight: .light)
        labelC.font = .systemFont(ofSize: 12, weight: .light)

        labelB.textColor = .gray
        
        stackView.addArrangedSubview(labelA)
        stackView.addArrangedSubview(labelB)
        stackView.addArrangedSubview(labelC)

    }
    
}

和示例視圖 controller：

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    
    var collectionView: UICollectionView!
    var cvCurWidth: CGFloat = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let fl = UICollectionViewFlowLayout()
        fl.scrollDirection = .vertical
        
        // cell width will be set in viewDidLayoutSubviews
        fl.itemSize = CGSize(width: 100, height: 250)
        
        fl.minimumLineSpacing = 0
        fl.minimumInteritemSpacing = 0
        
        collectionView = UICollectionView(frame: .zero, collectionViewLayout: fl)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(collectionView)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: g.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: g.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: g.bottomAnchor),
        ])
        
        collectionView.register(ShadowedCollectionViewCell.self, forCellWithReuseIdentifier: "c")
        collectionView.dataSource = self
        collectionView.delegate = self
    }
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        if cvCurWidth != collectionView.frame.width {
            cvCurWidth = collectionView.frame.width
            if let fl = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
                fl.itemSize.width = (collectionView.frame.width - fl.minimumInteritemSpacing) * 0.5
                collectionView.collectionViewLayout = fl
            }
        }
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let c = collectionView.dequeueReusableCell(withReuseIdentifier: "c", for: indexPath) as! ShadowedCollectionViewCell
        
        if let img = UIImage(named: "cvPic") {
            c.imageView.image = img
        }
        c.labelA.text = "LabelA: \(indexPath.item)"
        c.labelB.text = "LabelB: \(indexPath.item)"
        c.labelC.text = "LabelC: \(indexPath.item)"
        
        return c
    }
    
}

結果如下所示：