UICollectionView单元格未对齐

时间:2018-01-10 19:09:47

标签: ios uicollectionview

屏幕截图显示了UICollectionView的一部分。集合视图的宽度为294.0,其最小项间间距为0.每行的单元格宽度为117.0, 58.0, 58.0,58.0。这些宽度是由UICollectionViewDelegateFlowLayout动态计算的,我认为这是必要的,因为并非所有单元都具有相同的宽度。垂直黑线是集合视图的背景。出于某种原因,最后一行中的单元格不与其他行上的单元格对齐。可能导致这种情况的原因,我该如何解决?

编辑:代码在这里:https://gist.github.com/csimmons0/ef7933730905d57fb347d803df2d77dd

Misaligned

1 个答案:

答案 0 :(得分:0)

我认为如果将值设置为minimumInteritemSpacing并且单元格大小并未真正反映minimumInteritemSpacing,则会发生这种情况。即)如果您的单元格大小创建项目间距1,并且如果将minimumInteritemSpacing设置为0,则会导致您遇到问题。希望有人可以解释这个,但这是我在玩自己的集合视图后发现的。

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
        collectionView.dataSource = self
        if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            layout.minimumInteritemSpacing = minItemSpacing
        }

        collectionView.register(DemoCell.self, forCellWithReuseIdentifier: "DemoCell")

        collectionView.reloadData()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

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

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

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        if indexPath.item % 4 == 0 {
            return CGSize(width: firstColumnWidth, height: view.frame.size.height / CGFloat(numberOfRows))
        } else {
            return CGSize(width: regularColumnWidth, height: view.frame.size.height / CGFloat(numberOfRows))
        }
    }

    var minItemSpacing: CGFloat {
        return 1
    }

    var numberOfColumns: Int {
        return 4
    }

    var numberOfRows: Int {
        return 8
    }

    var firstColumnWidth: CGFloat {
        return 117
    }

    var regularColumnWidth: CGFloat {
        return (collectionView.frame.size.width - firstColumnWidth - CGFloat(numberOfColumns - 1) * minItemSpacing) / CGFloat(numberOfColumns - 1)
    }
}

class DemoCell: UICollectionViewCell {

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

此代码完美无缺。如果更改layout.minimumInteritemSpacing = 0,则最后一行中的单元格全部对齐到左侧。我创建了变量,因此您可以使用它。希望这会对你有所帮助。