ios - 将 collectionView 滚动为 AppStore 游戏部分

Question

我有一个启用了水平滚动方向和分页的 collectionView，现在我想让它像 AppStore 上的游戏部分一样平滑滚动。

更具体地说，这就是我希望第一个单元格的样子:

编辑

I actually achieved both of the next images one with the smaller width of the cell and the next with the .centeredHorizontally in selectItem, my problem is the non smoothly scrolling.

如您所见，出现了第二个单元格的一小部分。

这是下一个单元格:



正如您现在所看到的，上一个和下一个单元格正在出现。

我设法通过设置这部分代码来做到这一点，但弹跳不如 AppStore 顺利。

这是我使用的代码:

       func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
            var visibleRect = CGRect()

            visibleRect.origin = collectionView.contentOffset
            visibleRect.size = collectionView.bounds.size

            let visiblePoint = CGPoint(x: visibleRect.midX, y: visibleRect.midY)

            let visibleIndexPath: IndexPath = collectionView.indexPathForItem(at: visiblePoint) ?? IndexPath()
            let indexPath = IndexPath(item: visibleIndexPath[1], section: 0)
            collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally )

        }

这是我的 collectionView 代码:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        let frameSize = collectionView.frame.size
        return CGSize(width: frameSize.width - 30, height: frameSize.height - 40)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 20, right: 0)
    }

Answer 1

Example project here

在类属性

     var itemSize = CGSize(width: 0, height: 0)
     @IBOutlet weak var collectionViewHeight: NSLayoutConstraint!
     @IBOutlet weak var collectionView: UICollectionView!
     fileprivate let sectionInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

在 viewDidLoad 或 awakeFormNib 中(如果在 collectionViewCell 或 tableViewCell 中)

    if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
    }
    collectionView.contentInset = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 8)
    collectionView.isPagingEnabled = false
    layoutIfNeeded()

    let width = collectionView.bounds.size.width-24
    let height = width * (3/4)
    itemSize = CGSize(width: width, height: height)
    layoutIfNeeded()

实现 UICollectionViewDelegateFlowLayout

    func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    insetForSectionAt section: Int) -> UIEdgeInsets {

        return sectionInsets
    }

    func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {
        return itemSize
    }

实现 ScrollViewDelegate

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    let pageWidth = itemSize.width
    targetContentOffset.pointee = scrollView.contentOffset
    var factor: CGFloat = 0.5
    if velocity.x < 0 {
        factor = -factor
        print("right")
    } else {
        print("left")
    }

    let a:CGFloat = scrollView.contentOffset.x/pageWidth
    var index = Int( round(a+factor) )
    if index < 0 {
        index = 0
    }
    if index > collectionViewDataList.count-1 {
        index = collectionViewDataList.count-1
    }
    let indexPath = IndexPath(row: index, section: 0)
    collectionView?.scrollToItem(at: indexPath, at: .left, animated: true)
}

在过去的游乐设施部分查看我的项目的示例屏幕截图
我在 collectionViewCell 中实现了 uicollectionview