停止单个UICollectionView单元格流到屏幕中心 [英] Stop Single UICollectionView cell Flowing to the centre of the screen

问题描述

我试图理解为什么集合视图"使中心仅对齐集合中的最后一个单元格.
我创建了一个简单的基于Flow布局的集合视图.我正在使用自动布局"标志-我不确定是引起此问题的原因.

I am trying to understand why Collection View keeps centre aligning just the last cell in a collection.
I have created a simple Flow layout based collection view. I am using the Autolayout flag - which I am not sure is causing this issue.

每当我从集合"视图中删除一个单元格时，前几个单元格似乎就可以正常工作并向左滚动.但是，当我删除倒数第二个时，最后一个单元格突然从左对齐变为居中对齐. 有人有解释吗?看起来很奇怪.

Whenever I remove a cell from the Collection view - the first few seem to work fine and roll to the left. However when I remove the second last one, then suddenly the last cell changes from being left aligned to being centre aligned. Does anyone have an explanation? It seems strange.

如何使所有单元格向左滚动并保持与左侧对齐.

How do I make it so that all the cells will roll to the left and stay aligned to the left.

这是视图层调试的视图: http://imgur.com/a/NxidO

here is the view hierachy debugging: http://imgur.com/a/NxidO

这是行为"视图

我制作了一个简单的github对其进行演示: https://github.com/grantkemp/CollectionViewIssue

I have made a simple github to demo it: https://github.com/grantkemp/CollectionViewIssue

这是代码:

        var dataforCV = ["short","longer phrase", "Super long Phrase"]

override func viewDidLoad() {
        super.viewDidLoad()
        demoCollectionView.reloadData()
    let layout = UICollectionViewFlowLayout()

    // Bug Description  - > UICollectionViewFlowLayoutAutomaticSize will center Align the layout if it has only a single cell - but it will left align the content if there is more than one cell.

    // I would expect this behaviour to be consistently left aligning the content.

    //How to repeat: If you comment out UICollection​View​Flow​Layout​Automatic​Size then the collection view will show 3 cells being left aligned and it will continue to left align all the content no matter how many cells you remove.

    // But: if you leave turn UICollection​View​Flow​Layout​Automatic​Size on - then it will intially show 3 cells being left aligned, and then as you click to remove each cell they will stay left aligned until the last single cell will suddenly center align in the collection view

    //  see here for the screen recording:https://i.stack.imgur.com/bledY.gif
    //  see here for the view hierachy debuggins screen: http://imgur.com/a/NxidO

    layout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize


    // <-- End Bug Description
    demoCollectionView.collectionViewLayout = layout
}

    //MARk: CollectionView

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as? collectionCell
        cell?.text.text  = dataforCV[indexPath.row]

        return cell!

    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dataforCV.count
    }
    //Remove the item from the array if selected
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        dataforCV.remove(at: indexPath.row)
        demoCollectionView.deleteItems(at: [indexPath])
    }

推荐答案

我设法通过以下两个步骤解决了这个问题:

I managed to solve this using the below two steps:

1. 与Apple一起记录了一个有关我奇怪的行为的错误，我注意到有关使用UICollectionViewFlowLayoutAutomaticSize
时单元格行为发生的变化
2. 我通过创建修改后的CustomViewFlowLayout(无法找到原来的SO/github问题，在其中我看到了使用此方法的地方-如果找到它便添加了它)找到了解决方法，然后添加了UICollectionViewFlowLayoutAutomaticSize设置-而且效果很好.

1. Logged a bug with Apple about the strange behaviour I noticed about the cell behaviour changing when using the UICollectionViewFlowLayoutAutomaticSize
2. I did a workaround by creating a modified CustomViewFlowLayout ( can't find the original SO/github question where I saw this approach used - I will add it if I find it) I then added the UICollectionViewFlowLayoutAutomaticSize setting - and it's working beautifully.

示例代码:

class MyLeftCustomFlowLayout:UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

        let attributes = super.layoutAttributesForElements(in: rect)

        var leftMargin = sectionInset.left
        var maxY: CGFloat = 2.0

        let horizontalSpacing:CGFloat = 5

        attributes?.forEach { layoutAttribute in
            if layoutAttribute.frame.origin.y >= maxY
                || layoutAttribute.frame.origin.x == sectionInset.left {
                leftMargin = sectionInset.left
            }

            if layoutAttribute.frame.origin.x == sectionInset.left {
                leftMargin = sectionInset.left
            }
            else {
                layoutAttribute.frame.origin.x = leftMargin
            }

            leftMargin += layoutAttribute.frame.width + horizontalSpacing
            maxY = max(layoutAttribute.frame.maxY, maxY)
        }

        return attributes
    }

在ViewController中-您必须将流布局添加到集合视图中以使其起作用:

In the ViewController - you have to add the flow layout to the collection view to make it work:

let layout = MyLeftCustomFlowLayout() 
layout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize
myCollectionViewReference.collectionViewLayout = layout

我认为可以完全简化Collection View的实现，但是我将对其进行更多的研究，因为我看到它的功能强大.

I think the implementation for Collection View can definitely be simplified but I am going to look into it more as I can see how powerful it is.

这篇关于停止单个UICollectionView单元格流到屏幕中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！