UICollectionView“流向”

时间:2018-11-01 16:31:10

标签: ios swift uicollectionview uicollectionviewlayout uicollectionviewflowlayout

UICollectionView的典型流程是“先移动然后再向下”

enter image description here

我很好奇是否有一种方法可以逆转“流”的顺序,即“先降”(对于最大行,然后越过)。类似于此:

enter image description here

2 个答案:

答案 0 :(得分:2)

  

我很好奇是否有一种方法可以逆转“流”的顺序,即“先降”(对于最大行,然后越过)。

没有办法使UICollectionFlowLayout以列优先顺序排列单元格-它先使单元格“流动”,然后向下。如果您考虑一下,那是有道理的-UICollectionFlowLayout在开始第二列之前如何知道要在第一列中放置多少个单元格?照原样,它会在移至下一行之前将尽可能多的行放置在该行中。但是,由于您希望滚动方向保持垂直,因此没有任何理由停止将单元格添加到第一列。

但是UICollectionView会很高兴将单元格放置在您喜欢的任何地方-您只需要创建自己的自定义布局对象即可告诉它将它们放置在何处。那并不一定要听起来那么令人生畏……在网格上布置单元并不是火箭科学,而且您的集合布局对象不必像UICollectionFlowLayout那样健壮-它只需要满足您的特定需求即可。

答案 1 :(得分:0)

感谢@Caleb启发了我。我尝试了以下设置

class ViewController: UIViewController {
    let items = ["A", "B", "C", "D", "E"]

    // other unnecessary stuff for this demonstration
}

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if section == 0 {
            return ((items.count + 1) / 2) // just ceiling, after dividing by 2
        } else  if section == 1 {
            return items.count - ((items.count + 1) / 2) // calculating the remainder item
        } else {
            return 0
        }
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

        var text = "";
        if indexPath.section == 0 {
            // take the even part
            text = items[indexPath.row * 2]
        } else {
            // take the odd part
            text = items[(indexPath.row * 2) + 1]
        }

        (cell.subviews[0].subviews[0] as? UILabel)?.text = text

        return cell
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 2
    }
}

我将滚动方向设置为vertical,输出看起来像。它将同时适用于奇数个项目和偶数个项目。

Output

很明显,这不是OP所寻找的。在这里,我使用了两个不同的部分,但OP希望在一个部分内制作锯齿形图案。这肯定是不可能的,因为@Caleb不能进行分类,如果不按宽度填充,我们就不能沿垂直方向下降。