以编程方式将 UIImage 添加到集合视图单元中

Posted 2023-03-14

【中文标题】以编程方式将 UIImage 添加到集合视图单元中

【英文标题】：Programmatically adding UIImage into collection view cell

【发布时间】：2017-04-14 14:31:30

【问题描述】：

这是我的集合视图单元格的自定义类：

import UIKit

class NavBarCell: UICollectionViewCell 

    var avatarImageView: UIImageView = 
        var avatarView = UIImageView()
        avatarView.contentMode = .scaleAspectFit

        return avatarView
    ()

    override init(frame: CGRect) 
        super.init(frame: frame)

        avatarImageView = UIImageView()
        contentView.addSubview(avatarImageView)
    

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

然后在我的控制器的viewDidLoad 中，我有

    let layout:UICollectionViewFlowLayout = UICollectionViewFlowLayout.init()
    navBarCollectionView.setCollectionViewLayout(layout, animated: true)
    navBarCollectionView.backgroundColor = UIColor.clear
    navBarCollectionView.register(NavBarCell.self, forCellWithReuseIdentifier: "cell")
    navBarCollectionView.delegate = self
    navBarCollectionView.dataSource = self
    layout.scrollDirection = .horizontal
    self.navigationController?.navigationBar.addSubview(navBarCollectionView)
    navBarCollectionView.reloadData()

在cellForItem 我有：

        let navBarCell = (collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)) as! NavBarCell

        var image : UIImage = UIImage(named: "TestImage")!
        navBarCell.avatarImageView.image = image
        navBarCell.avatarImageView.layer.borderWidth = 1
        navBarCell.avatarImageView.layer.borderColor = UIColor.getRandomColor().cgColor
        navBarCell.avatarImageView.layer.cornerRadius = 20

        return navBarCell

但是图像视图没有显示出来。如果我添加navBarCell.backgroundColor = UIColor.red，那么会显示单元格，但不会显示图像。

我遗漏了什么，或者没有正确实施？

【问题讨论】：

初始化时需要设置avatarImageView的框架。如果您希望 imageView 缩放到单元格的框架，请在 cellForItem 处重置框架或使用约束。

【参考方案1】：

UICollectionViewCell已经是一个视图，你可以直接添加avatarImageView：

addSubview(avatarImageView)

你也可以设置约束，例如：

avatarImageView.translatesAutoresizingMaskIntoConstraints = false
avatarImageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
avatarImageView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
avatarImageView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
avatarImageView.heightAnchor.constraint(equalToConstant: 300).isActive = true

【讨论】：

完美，谢谢。我没有意识到您可以直接添加子视图。现在一切都很好，再次感谢！

这不太对。您应该将图像视图添加到单元格的 contentView，而不是单元格本身，就像在问题代码中所做的那样。

【参考方案2】：

最佳实践是您创建一个原型单元格并在界面构建器中添加您的图像视图。在这种特定情况下，我认为错误在于您没有将图像视图的框架设置为缩放到您的单元格框架。

尝试打印出图像视图的框架，它可能会显示 0,0,0,0。