如何在 UICollectionView 中自定義單元格

Question

我有一個 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
    }
}

Answer 1

我們必須在使用它之前將三個不同的自定義單元注冊到 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
    }

Answer 2

正如我們從 Apple 的文檔中看到的，

您通常不會自己創建此類的實例。 相反，您可以使用單元注冊來注冊特定的單元子類（或包含類的已配置實例的 nib 文件）。 當你想要一個單元類的新實例時，調用集合視圖對象的 dequeueConfiguredReusableCell(using:for:item:) 方法來檢索一個。

在使用之前，我們必須將單元格注冊到 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
    }
}

上面的代碼片段只是一個簡短的例子，但我希望能解釋這個想法。

如果您有多種類型的自定義單元格，則必須為它們創建類（UICollectionViewCell 的子類），將它們注冊到您的 collectionView，並在 collectionView(cellForRowAt:) 中將它們出列。

網上有很多教程，這里分享一個我最喜歡的： https : //www.raywenderlich.com/9334-uicollectionview-tutorial-getting-started

編輯：

如果您僅使用 storyboard 添加自定義 collectionViewCell，則無需再次注冊單元格，該單元格已存在於 collectionView 中（抱歉，上面的代碼只是我的偏好）。 只需設置單元格的類和標識符，並使用 collectionView(cellForRowAt:) 中的標識符將單元格出列。