Question

我有一个具有水平滚动的UICollectionView。我需要将所有集合视图单元格放置在两行中，并且两者都应水平滚动。布局如屏幕截图所示。

如上面的屏幕快照所示，我将必须构建两行水平滚动，即两行将沿相同方向一起滚动。

之前我曾考虑过在滚动视图中使用节，但是滚动可能是独立的，因此，我希望找到一个更好的解决方案。

我在这里查看了此链接：A similar post

此链接使用一个表视图来保存多个集合视图。尽管解决方案似乎不错，但我真的不确定是否可以解决问题，但我想知道是否有更好的选择。我查看了与此相关的其他堆栈溢出帖子（虽然不记得是哪个），但是它们并没有太大帮助。

现在，正常情况下，集合视图中将有两列，并且我们可以垂直滚动。除了这种行为，还有什么办法可以在UICollectionView中包含两行，这些行可以水平并同时滚动？

我应该考虑使用两个集合视图，并且具有一些绑定两个视图滚动的逻辑吗？（我不想有两个UICollectionview只是为了解决这个问题）此外，我是通过纯代码来完成此操作的。没有使用情节提要或Xib文件。

Answer 1

您可以尝试以下代码吗？

我能够做到这一点

class CollectionViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setUpCollectionView()
    }

    fileprivate func setUpCollectionView() {

        let collectionFlowLayout = UICollectionViewFlowLayout()

        collectionFlowLayout.scrollDirection = .horizontal
        collectionFlowLayout.itemSize = CGSize(width: 145, height: 145)
        collectionView.setCollectionViewLayout(collectionFlowLayout, animated: true)
        collectionView.delegate = self
        collectionView.dataSource = self
    }
}

extension CollectionViewController: UICollectionViewDelegate, UICollectionViewDataSource {

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath)

        if indexPath.row % 2 == 0 {
            cell.contentView.backgroundColor = UIColor.red
        } else {
            cell.contentView.backgroundColor = UIColor.green
        }

        return cell
    }
}

注意：我已将collectionView的高度设置为300

输出

Answer 2

使用2 collectionView

    let CellId1 = "CellId1"
    lazy var collectionViewOne: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 0
        let width = collectionView.frame.width
        let collectionViewOne = UICollectionView(frame: CGRect(x: 0, y: 100, width: width, height: 100), collectionViewLayout: layout)
        collectionViewOne.showsHorizontalScrollIndicator = false
        collectionViewOne.backgroundColor = .red
        return collectionViewOne
    }()

    let CellId2 = "CellId2"
    lazy var collectionViewTwo: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 0
        let collectionViewTwo = UICollectionView(frame: CGRect(x: 0, y: 250, width: width, height: 100), collectionViewLayout: layout)
        collectionViewTwo.backgroundColor = .blue
        return collectionViewTwo
    }()

然后获取numberOfItem和cellForRow：

   override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        if collectionView == self.collectionViewOne {
            return 10
        } else if collectionView == self.collectionViewTwo {
            return 20
        } 

    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        if collectionView == self.collectionViewOne {
            let Cell1 = collectionViewOne.dequeueReusableCell(withReuseIdentifier: CellId1, for: indexPath)
Cell1.backgroundColor = .green

            return Cell1

        } else if collectionView == self.collectionViewTwo {
            let Cell2 = collectionViewTwo.dequeueReusableCell(withReuseIdentifier: CellId2, for: indexPath )
Cell2.backgroundColor = .purple
            return Cell2
        } 

    }

并且不要忘记在viewDidLoad（）中注册collectionView


    collectionViewOne.delegate = self
        collectionViewOne.dataSource = self

        collectionViewTwo.delegate = self
        collectionViewTwo.dataSource = self

collectionViewOne.register(Cell1.self, forCellWithReuseIdentifier: storyCell)
        collectionViewTwo.register(Cell2.self, forCellWithReuseIdentifier: cardCell)

我正在实现具有两行单元格的UICollectionView，我需要两者都可以同时水平滚动

2 个答案: