ios - 如何在用户滑动但不足以显示其他单元格时将 Collection View 单元格居中

Question

我正在尝试重新创建 iOS Gallery 应用程序，其中用户有两个 Collection View Controller ，第一个显示所有可用图像，第二个在用户点击图像(单元格)时显示，同一个图像显示在另一个具有以下功能的 Collection View Controller 中:

DispatchQueue.main.async {
        self.collectionView?.scrollToItem(at: self.customIndexPath, at: UICollectionView.ScrollPosition.centeredHorizontally, animated: false)
    }
}

当用户在上一个 Collection View Controller 中选择一个项目时，自定义 indexPath 被设置。

问题是，在第二个 Collection View Controller (图像单独显示)中，我不知道如何做到这一点，所以当用户向右或向左滑动时，会显示下一张/上一张图像并居中，就像在该图像上调用了上述函数一样。

我尝试在下面的代码中调用上面的函数

        func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {

    let newIndexPath = IndexPath(item: indexPath.item, section: 0)
    print("Item at \(indexPath.item)")
    self.collectionView?.scrollToItem(at: newIndexPath, at: UICollectionView.ScrollPosition.centeredHorizontally, animated: true)
}

但是它调用得太早了，一旦用户开始向前或向后收集 View ，图像就会被下一张图像替换，我更愿意在用户滑动或至少移动时显示下一张图像并居中水平方向，超过一半的前一张图片未显示，超过一半的下一张图片显示，用户释放并自动将下一张图片居中

import UIKit

class ViewController: UIViewController {


@IBOutlet weak var collectionView: UICollectionView!

var customIndexPath = IndexPath()

let images:[UIImage] = [

    UIImage(named: "image_1")!,
    UIImage(named: "image_2")!,
    UIImage(named: "image_3")!,
    UIImage(named: "image_4")!,
    UIImage(named: "image_5")!,
    UIImage(named: "image_6")!,
    UIImage(named: "image_7")!,
    UIImage(named: "image_8")!,


]

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.delegate = self
    // Do any additional setup after loading the view, typically from a nib.
}

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    print(customIndexPath)
    DispatchQueue.main.async {
        self.collectionView?.scrollToItem(at: self.customIndexPath, at: UICollectionView.ScrollPosition.centeredHorizontally, animated: false)
    }
}


}


extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {


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

    return images.count
}

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

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    cell.userImageView.image = images[indexPath.item]
    return cell
}

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {

    let newIndexPath = IndexPath(item: indexPath.item, section: 0)
    print("Item at \(indexPath.item)")
    self.collectionView?.scrollToItem(at: newIndexPath, at: UICollectionView.ScrollPosition.centeredHorizontally, animated: true)
}





}

结果应该在非常基本的层面上与 iOS Gallery App 非常相似，当用户滑动时，下一张图像必须显示并居中，而不是像现在这样 float 或部分显示，如果用户滑动缓慢且下一个单元格(下一张图片)至少有一半内容未显示，则 Collection View 必须显示并居中上一张图片，就像 iOS Gallery App

到目前为止我的项目可以在以下链接中找到:

https://github.com/francisc112/Gallery-Test

在此先感谢，如果有任何教程可以让我学会这样做，请指出。

Answer 1

我只是尝试使用一种有点不同的方法来解决这个问题。我只使用 scrollViewWillEndDragging 和 scrollViewDidEndDragging 方法。我还使用 previousCollectionViewContentOffsetX 属性，该属性用于在拖动结束时告诉我们是否应该滚动到下一个或上一个单元格，以防用户快速滚动(这是 PhotosApp 的行为)。

最后我设置了一个快速的减速率来模拟分页功能:

collectionView.decelerationRate = .fast

可以看到这个解决方案in the pull request i've just made in your repo .

另一个更简单的解决方案是将 collectionView 的单元格和行的最小间距设置为零并启用 collectionView 的分页。我们失去了 PhotosApp 显示的照片之间的边距，但避免触及 ScrollView 代表。如果您愿意，我可以使用此解决方案提出拉取请求。