swift 如何为UICollectionViewCell制作阴影?

z9smfwbn  于 2022-12-28  发布在  Swift
关注(0)|答案(1)|浏览(246)

我需要为CollectionViewCell创建一个阴影。我向CollectionView单元格添加了一个视图,但无法创建如下所示的适当阴影:这是我的影子
下面是a写的代码:'

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`
w9apscun

w9apscun1#

获得“阴影效果”的一种方法是向单元格的内容视图添加“圆角”视图,向该圆角视图添加imageView和标签,然后向圆角视图添加阴影属性。
你需要插入足够的圆角视图,这样你的阴影就不会被单元格本身剪切。
看看这类细胞

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)

    }
    
}

以及示例视图控制器:

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

结果如下所示:

相关问题