在 Swift 中分别在单个列中显示多个 CollectionView Cell

Posted 2023-03-11

【中文标题】在 Swift 中分别在单个列中显示多个 CollectionView Cell

【英文标题】：Show multiple CollectionView Cell in single column respectively to its section in Swift

【发布时间】：2021-08-18 06:05:49

【问题描述】：

我在集合视图中有 4 个部分，所以我需要 4 个集合视图单元。当 numberOfItemsInSection 增加时，它显示在下一行，但我想分别在单列的同一部分显示。它的滚动方向是垂直的。

这是我工作的图像。

enter image description here

enter image description here

import UIKit

class CollectionVC: UIViewController, UICollectionViewDelegate , 
UICollectionViewDataSource, UICollectionViewDelegateFlowLayout 



@IBOutlet weak var collectionView:UICollectionView!


var englishArray = ["You", "Apple" , "Me" , "Developer",  "Phone" , "Time"]
var hindiArray = ["आप","सेब","मैं","डेवलपर","फ़ोन","समय"]

var emptyArray = ["1","2","3","4","5","6"]

override func viewDidLoad() 
    super.viewDidLoad()




func numberOfSections(in collectionView: UICollectionView) -> Int 
    return 4


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
    
    if section == 0 
        return englishArray.count
     else if section == 1 
        return englishArray.count
     else if section == 2 
        return englishArray.count
     else 
        return englishArray.count
    
    
    


func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    
    if indexPath.section == 0 
        
        let  Cell  =  collectionView.dequeueReusableCell(withReuseIdentifier: "EnglishCollectionViewCell", for: indexPath) as! EnglishCollectionViewCell
        return Cell
        
        
        
     else if indexPath.section == 1 
        
        let  Cell  =  collectionView.dequeueReusableCell(withReuseIdentifier: "AnswerCollectionViewCell", for: indexPath) as! AnswerCollectionViewCell
        return Cell
     else if indexPath.section == 2 
        
        let  Cell  =  collectionView.dequeueReusableCell(withReuseIdentifier: "StatusCollectionViewCell", for: indexPath) as! StatusCollectionViewCell
        return Cell
     else 
        
        let  Cell  =  collectionView.dequeueReusableCell(withReuseIdentifier: "HindiCollectionViewCell", for: indexPath) as! HindiCollectionViewCell
        return Cell
    
    
    


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize


    if indexPath.section == 0 
        

        let width  = (view.frame.width-10)/4
        return CGSize(width: width, height: width)
        
        
     else if indexPath.section == 1 
        let width  = (view.frame.width-10)/4
        return CGSize(width: width, height: width)

      
     else if indexPath.section == 2 
        let width  = (view.frame.width-10)/4
        return CGSize(width: width, height: width)

      
     else 
        let width  = (view.frame.width-10)/4
        return CGSize(width: width, height: width)
    
    
      



@IBAction func resetButton(sender:UIButton) 
    hindiArray.shuffle()
    collectionView.reloadData()
    

请帮我解决这个问题。

【问题讨论】：

当项目数超过 4 在这种情况下你想做水平滚动或其他什么？

我想在收藏视图中垂直滚动

如果每个部分有 4 个以上怎么办？

请看这张图片，你会知道我想怎么做 - [2]：i.stack.imgur.com/0LDHZ.png

为此，您必须在 vortical collectionview 单元格中添加水平 collectionview

【参考方案1】：

对于您想要的输出，您必须使用嵌套集合视图的概念。 用简单的语言你必须在collectionviewcell中使用collectionview。

这里有mainCollectionView。然后在这个集合的每个单元格上创建并初始化一个新的UICollectionView 并且正确的地方是在 UICollectionView 的以下委托中

例如，我在这里初始化MainCollectionViewCell，然后MainCollectionViewCell 处理创建新UICollectionView 的逻辑

guard let collectionViewCell = cell as? MainCollectionViewCell else  return 
    
    collectionViewCell.delegate = self
    
    let dataProvider = ChildCollectionViewDataSource()
    dataProvider.data = data[indexPath.row] as NSArray
    
    let delegate = ChildCollectionViewDelegate()
    
    collectionViewCell.initializeCollectionViewWithDataSource(dataProvider, delegate: delegate, forRow: indexPath.row)
    
    collectionViewCell.collectionViewOffset = storedOffsets[indexPath.row] ?? 0

这是MainCollectionViewCell 上的初始化程序，它创建了一个新的UICollectionView

func initializeCollectionViewWithDataSource<D: protocol<UICollectionViewDataSource>,E: protocol<UICollectionViewDelegate>>(dataSource: D, delegate :E, forRow row: Int) 
    
    self.collectionViewDataSource = dataSource
    
    self.collectionViewDelegate = delegate
    
    let flowLayout = UICollectionViewFlowLayout()
    flowLayout.scrollDirection = .Horizontal
    
    let collectionView = UICollectionView(frame: self.bounds, collectionViewLayout: flowLayout)
    collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseChildCollectionViewCellIdentifier)
    collectionView.backgroundColor = UIColor.whiteColor()
    collectionView.dataSource = self.collectionViewDataSource
    collectionView.delegate = self.collectionViewDelegate
    collectionView.tag = row
    
    self.addSubview(collectionView)
    
    self.collectionView = collectionView
            
    collectionView.reloadData()

希望对你有所帮助... :)

你也可以参考完整的代码：-https://github.com/irfanlone/Collection-View-in-a-collection-view-cell

【讨论】：

你可以投票或勾选它。欢迎:)