【问题标题】:How to have custom cell in UICollectionView如何在 UICollectionView 中有自定义单元格
【发布时间】:2020-09-15 02:04:54
【问题描述】:

我有一个 UICollectionView,我想让 3 个自定义单元格出现。

我已阅读文档,但无法解决此问题。

我有什么遗漏吗?

      func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 1
}

我尝试将 return 1 更改为 3 以使 3 个自定义单元格出现,但它只会使第一个自定义单元格出现 3 次。

我制作了一个视频并链接了下面的视频来解释我的情况。

https://www.loom.com/share/9b5802d6cc7b4f9a93c55b4cf7d435bb

编辑我使用了@Asad Farooq 方法,它似乎对我有用。我添加了如下所示的 CollectionView,现在我可以制作自定义单元格了!

    if(indexPath.item==0)
    {
        let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "DailyCollectionViewCell", for: indexPath) as! DailyCollectionViewCell
        return cell
    }
    if(indexPath.item==1)
    {
        let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "WeeklyCollectionViewCell", for: indexPath) as! WeeklyCollectionViewCell
        return cell
        
    }
    else {
    
        let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "MonthlyCollectionViewCell", for: indexPath) as! MonthlyCollectionViewCell
        return cell
    }
}

【问题讨论】:

  • 您是在为您的自定义 collectionViewCell 创建子类,还是为单元格分配任何重用标识符并将它们注册到您的 collectionView?
  • 我没有做任何一个,但我想我将使用重用标识符来单元格并将它们注册到我的集合视图。感谢您的建议,我感谢您的洞察力。我是 IOS 编程新手。
  • 那么你必须接受我的回答,如果它对你有用。

标签: ios swift uicollectionview uicollectionviewcell


【解决方案1】:

从苹果的documentation可以看出,

您通常不会自己创建此类的实例。相反,您使用单元注册来注册您的特定单元子类(或包含您的类的配置实例的 nib 文件)。当你想要一个新的单元类实例时,调用集合视图对象的 dequeueConfiguredReusableCell(using:for:item:) 方法来检索一个。

在使用之前我们要先将cell注册到collectionView,例如:

class CustomCollectionViewCell: UICollectionViewCell {
    // my custom collection view cell
}

然后我们将它注册到集合视图中:

class MyViewController: UIViewController {
    ...
    override func viewDidLoad(){
        super.viewDidLoad()
        ...
        self.myCollectionView.dataSource = self
        // register the cells, so the collectionView will "know" which cell you are referring to.
        self.myCollectionView.register(UINib(nibName: "CustomCollectionViewCell", bundle: nil), forCellReuseIdentifier: "customReuseIdentifier")
        // register all type of cell you wanted to show.
    }

}

extension MyViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // return number of cell you wanted to show, based on your data model
        return 3
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = routineCollectionView.dequeueReusableCell(withReuseIdentifier: "customReuseIdentifier", for: indexPath) as! CustomCollectionViewCell
        // cast the cell as CustomCollectionViewCell to access any property you set inside the custom cell.
        // dequeue cell by the reuseIdentifier, "explain" to the collectionView which cell you are talking about.
        return cell
    }
}

上面的代码sn-p只是一个简单的例子,但我希望能解释一下这个想法。

如果您有多种类型的自定义单元格,则必须为它们创建类(UICollectionViewCell 的子类),将它们注册到您的 collectionView,然后在 collectionView(cellForRowAt:) 中将它们出列。

网上有很多教程,这里分享一个我最喜欢的: https://www.raywenderlich.com/9334-uicollectionview-tutorial-getting-started

编辑:

如果你使用storyboard只是为了添加你的自定义collectionViewCell,你不需要再次注册cell,cell已经存在于collectionView中(抱歉上面的代码只是我的偏好)。只需设置单元格的类和标识符,然后使用 collectionView(cellForRowAt:) 中的标识符将单元格出列。

【讨论】:

    【解决方案2】:

    在使用之前,我们必须将三个不同的自定义单元格注册到 collectionView 中,然后在此函数中添加此代码

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    
        if(indexPath.item==0)
        {
           let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "cell1", for: indexPath) as! cell1
    return cell1
        }
    if(indexPath.item==1)
        {
           let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "cell2", for: indexPath) as! cell2
    return cell2
        
    }
    else
    {
    let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "cell3", for: indexPath) as! cell3
    return cell3
        }
    

    【讨论】:

      猜你喜欢
      • 2017-05-07
      • 2018-08-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-07
      • 2016-10-29
      相关资源
      最近更新 更多