如何在 UICollectionView 中拥有自定义单元格
How to have custom cell in UICollectionView
我有一个 UICollectionView,我想让它显示 3 个自定义单元格。
我已阅读文档,但无法解决此问题。
有没有我遗漏的东西?
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 1
}
我尝试将 return 1 更改为 3 以显示 3 个自定义单元格,但它只会使第一个自定义单元格出现 3 次。
我已经创建了一个视频并链接到下面的视频来解释我的情况。
https://www.loom.com/share/9b5802d6cc7b4f9a93c55b4cf7d435bb
Edit I have used @Asad Farooq method and it seems to have worked for me. I added my CollectionView's shown below and I can now make custom cells!
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
}
}
从Apple的documentation可以看出,
You typically don’t create instances of this class yourself. Instead, you register your specific cell subclass (or a nib file containing a configured instance of your class) using a cell registration. When you want a new instance of your cell class, call the dequeueConfiguredReusableCell(using:for:item:) method of the collection view object to retrieve one.
我们必须在使用之前将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
}
}
上面的代码片段只是一个简短的例子,但我希望能解释这个想法。
如果您有多种类型的自定义单元格,则必须为它们创建 classes(UICollectionViewCell 的sub-class),将它们注册到您的 collectionView,并在 collectionView( cellForRowAt:).
网上有很多教程,这里分享我最喜欢的一个:
https://www.raywenderlich.com/9334-uicollectionview-tutorial-getting-started
编辑:
如果您仅使用情节提要来添加自定义 collectionViewCell,则无需再次注册单元格,该单元格已存在于 collectionView 中(抱歉,以上代码只是我的偏好)。只需设置单元格的 class 和标识符,并使用 collectionView(cellForRowAt:).
中的标识符使单元格出列
我们必须在使用之前将三个不同的自定义单元格注册到 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
}
我有一个 UICollectionView,我想让它显示 3 个自定义单元格。
我已阅读文档,但无法解决此问题。
有没有我遗漏的东西?
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 1
}
我尝试将 return 1 更改为 3 以显示 3 个自定义单元格,但它只会使第一个自定义单元格出现 3 次。
我已经创建了一个视频并链接到下面的视频来解释我的情况。
https://www.loom.com/share/9b5802d6cc7b4f9a93c55b4cf7d435bb
Edit I have used @Asad Farooq method and it seems to have worked for me. I added my CollectionView's shown below and I can now make custom cells!
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
}
}
从Apple的documentation可以看出,
You typically don’t create instances of this class yourself. Instead, you register your specific cell subclass (or a nib file containing a configured instance of your class) using a cell registration. When you want a new instance of your cell class, call the dequeueConfiguredReusableCell(using:for:item:) method of the collection view object to retrieve one.
我们必须在使用之前将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
}
}
上面的代码片段只是一个简短的例子,但我希望能解释这个想法。
如果您有多种类型的自定义单元格,则必须为它们创建 classes(UICollectionViewCell 的sub-class),将它们注册到您的 collectionView,并在 collectionView( cellForRowAt:).
网上有很多教程,这里分享我最喜欢的一个: https://www.raywenderlich.com/9334-uicollectionview-tutorial-getting-started
编辑:
如果您仅使用情节提要来添加自定义 collectionViewCell,则无需再次注册单元格,该单元格已存在于 collectionView 中(抱歉,以上代码只是我的偏好)。只需设置单元格的 class 和标识符,并使用 collectionView(cellForRowAt:).
中的标识符使单元格出列我们必须在使用之前将三个不同的自定义单元格注册到 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
}