以编程方式创建 UICollectionView

Posted 2023-03-07

【中文标题】以编程方式创建 UICollectionView

【英文标题】：Creating UICollectionView programmatically

【发布时间】：2016-11-10 14:47:23

【问题描述】：

我正在学习如何。我想在应用程序的另一部分创建从用户那里收集的图片网格。 这个示例代码能帮我完成这个吗？另外，如何配置数据以发出我想要的图像？我的源代码如下。

UICollectionView：

class PhotosViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource 
    override func viewDidLoad() 
        super.viewDidLoad()
        let imageStore = ImageStore()
    

    override func viewWillAppear(animated: Bool) 
        super.viewWillAppear(animated)

        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 10, right: 10)
        layout.itemSize = CGSize(width: 100, height: 100)

        let myCollectionView:UICollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
        myCollectionView.dataSource = self
        myCollectionView.delegate = self
        myCollectionView.registerClass(RDCellCollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")
        myCollectionView.backgroundColor = UIColor.whiteColor()
        self.view.addSubview(myCollectionView)
    

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return images.count
    

    var images: [UIImage] = [

    ]

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 
        let myCell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath) as! RDCellCollectionViewCell
        myCell.imageView.image = images[indexPath.item]
        myCell.backgroundColor = UIColor.grayColor()
        return myCell
    

    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
    
        print("User tapped on item \(indexPath.row)")
    

ImageStore.swift：

class ImageStore: NSObject 

    let cache = NSCache()

    func setImage(image: UIImage, forKey key: String) 
        cache.setObject(image, forKey: key)

        let imageURL = imageURLForKey(key)

        if let data = UIImageJPEGRepresentation(image, 0.5) 
            data.writeToURL(imageURL, atomically: true)
        
    
    func imageForKey(key: String) -> UIImage? 
        if let existingImage = cache.objectForKey(key) as? UIImage 
            return existingImage
        

        let imageURL = imageURLForKey(key)
        guard let imageFromDisk = UIImage(contentsOfFile: imageURL.path!) else 
            return nil
        

        cache.setObject(imageFromDisk, forKey: key)
        return imageFromDisk
    

    func deleteImageForKey(key: String) 
        cache.removeObjectForKey(key)

        let imageURL = imageURLForKey(key)
        do 
            try NSFileManager.defaultManager().removeItemAtURL(imageURL)
        
        catch let deleteError 
            print("Error removing the image from disk: \(deleteError)")
        
    

    func imageURLForKey(key: String) -> NSURL 
        let documentsDirectories =
        NSFileManager.defaultManager().URLsForDirectory(.DocumentDirectory, inDomains: .UserDomainMask)
        let documentDirectory = documentsDirectories.first!

        return documentDirectory.URLByAppendingPathComponent(key)
    

【参考方案1】：

你在正确的轨道上。您需要创建一个包含 UIImageView 的 UICollectionViewCell 子类；这将让您在 cellForItemAtIndexPath 中插入正确的 UIImage。

这描述了如何连接您的自定义单元格： Create UICollectionViewCell programmatically without nib or storyboard

至于获取正确的图像，您需要以某种方式将索引路径映射到图像存储，以便项目编号对应于正确的图像键。

【讨论】：

我查看了您链接的问题。我对此很陌生，仍然很困惑。我应该在我的子类中放什么？该应用程序的目标是创建用户在应用程序的另一部分上传的图片的 UICollectionView。

子类将包含一个 UIImageView。您的子类会将 UIImageView 添加为其内容视图的子视图，并且您还需要为 UIImageView 提供大小。然后，在 cellForRowAtIndexPath 中，您只需将适当的 UIImage 插入到单元格的 UIImageView 中。

这个教程看起来不错：randexdev.com/2014/08/uicollectionviewcell

我创建了子类，但我仍然不确定如何显示从用户那里收集的图像。我将我的子类添加到问题中。

在 viewWillAppear 中，确保注册 RDCellCollectionViewCell（使用集合视图的 registerClass 方法）。然后，在 cellForItemAtIndexPath 中，设置 myCell 时，将“as！RDCellCollectionViewCell”添加到 dequeue 行的末尾；这将确保 myCell 是您的子类的一个实例。然后你就可以将 cell.imageView.image 设置为你想在单元格中显示的 UIImage。

【参考方案2】：

如果任务是添加图像，您应该在 cellForItemAtIndexPath 中使用类似这样的内容：

let myCell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath)
myCell.backgroundColor = UIColor.blueColor()
let imageView = UIImageView(frame: cell.contentView.frame)
cell.contentView.addSubview(imageView)
imageView.image = //Here you should get right UIImage like ImageStore().imageForKey("YOUR_KEY")
return myCell

或者您可以使用 Joshua Kaden 所写的自定义 UICollectionViewCell 子类。

【讨论】：

我会在添加之前检查图像视图是否存在；否则你可能会在图像视图之上添加图像视图（因为单元格可能被重复使用）。