水平滚动后，CollectionView Cell 向右移动 [英] CollectionView Cell gets shifted to right after horizontal Scrolling

问题描述

我有一个与我的 CollectionView 大小相同的 collectionView 单元格，即一次一个单元格显示在屏幕上，我希望单元格之间的最小间隔为 10，问题是当我滚动单元格时，单元格不是"t 正确贴合整个屏幕，每次滚动后都会增加单元格的移动.(查看屏幕截图以更好地理解)

I have a collectionView Cell that is of the same size of my CollectionView i.e. one Cell at a time is displayed on the screen and I want minimum separation of 10 between cells, the problem is when I scroll the cell the cells aren't properly fitting the whole screen, and the shifting of cell is increased after every scroll. (Check screenshots for better understanding)

推荐答案

我假设您已经为集合视图设置了 pagingEnabled.它从 UIScrollView 继承了这个属性(因为 UICollectionView 是 UIScrollView 的子类).

I assume you have set pagingEnabled for the collection view. It inherits this property from UIScrollView (because UICollectionView is a subclass of UIScrollView).

问题是集合视图使用自己的宽度(在您的帖子中为 320 点)作为页面的宽度.您的每个单元格与集合视图的宽度相同，但是您在单元格之间有一个 10 点的装订线".这意味着从单元格 0 的左边缘到单元格 1 的左边缘的距离是 320 + 10 = 330 个点.所以当你滚动显示单元格 1 时，集合视图在偏移 320(它自己的宽度)处停止滚动，但单元格 1 实际上从偏移 330 开始.

The problem is that the collection view uses its own width (320 points in your post) as the width of a page. Each of your cells is the same width as the collection view, but then you have a 10 point "gutter" between the cells. This means that the distance from the left edge of cell 0 to the left edge of cell 1 is 320 + 10 = 330 points. So when you scroll to show cell 1, the collection view stops scrolling at offset 320 (its own width), but cell 1 actually starts at offset 330.

最简单的解决方法可能是关闭 pagingEnabled 并通过覆盖集合视图委托中的 scrollViewWillEndDragging(_:withVelocity:targetContentOffset:) 自己实现分页，如下所示:

The easiest fix is probably to turn off pagingEnabled and implement paging yourself by overriding scrollViewWillEndDragging(_:withVelocity:targetContentOffset:) in your collection view delegate, like this:

override func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    guard let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout else { return }

    let pageWidth = scrollView.bounds.size.width + flowLayout.minimumInteritemSpacing

    let currentPageNumber = round(scrollView.contentOffset.x / pageWidth)
    let maxPageNumber = CGFloat(collectionView?.numberOfItems(inSection: 0) ?? 0)

    // Don't turn more than one more page when decelerating, and don't go beyond the first or last page.
    var pageNumber = round(targetContentOffset.pointee.x / pageWidth)
    pageNumber = max(0, currentPageNumber - 1, pageNumber)
    pageNumber = min(maxPageNumber, currentPageNumber + 1, pageNumber)
    targetContentOffset.pointee.x = pageNumber * pageWidth
}

您还需要设置项目大小以匹配设备屏幕大小，并将减速率设置为快速:

You'll also want to set the item size to match the device screen size, and set the deceleration rate to fast:

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    guard let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout, let collectionView = collectionView else { return }
    flowLayout.itemSize = collectionView.bounds.size

    collectionView.decelerationRate = UIScrollViewDecelerationRateFast
}

结果:

这篇关于水平滚动后，CollectionView Cell 向右移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！