带有下一页预览的 Swift CollectionView 滑块答案

【问题标题】：Swift CollectionView slider with preview of next page带有下一页预览的 Swift CollectionView 滑块
【发布时间】：2019-07-12 09:09:34
【问题描述】：

我有在每个单元格上显示图像的滑块。我想要做的是在当前页面上显示下一张图片的 10% 并将其滑动到下一页。每张图片应在自己的页面中居中（共 3 张）。

extension OnboardingViewController: UICollectionViewDelegateFlowLayout {

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: view.frame.width - 200, height: view.frame.height)
}

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let cellWidth : CGFloat = view.frame.width - 200

    let numberOfCells = floor(self.view.frame.size.width / cellWidth)
    let edgeInsets = (self.view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)

    return UIEdgeInsets(top: 15, left: edgeInsets, bottom: 0, right: edgeInsets)
}

}

【问题讨论】：

在 iCarousel 中搜索 UICollectionView，你会明白的。
@McDonal_11 我做到了，如果有人需要，稍后会发布解决方案

标签： swift uicollectionview uipagecontrol

【解决方案1】：

我所做的是...我将左边缘插入。使我的单元格更小，例如初始大小的 0.74，当我拖动幻灯片时，我添加了 2 种方法来控制我的幻灯片... 然后我将动画添加到带有 previewed 标志的自定义单元格中。所以.. 我的初始幻灯片总是 previewed 并且大小为 1.0，所有其他幻灯片的大小为 0.9，当我拖动图像时，我将 previewed 状态更改为 false适用于所有幻灯片，仅适用于演示文稿。

0.74 是我的单元格的大小

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let cellWidth : CGFloat = view.frame.width * 0.74

    let numberOfCells = floor(self.view.frame.size.width / cellWidth)
    let edgeInsets = (self.view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)

    return UIEdgeInsets(top: 0, left: edgeInsets, bottom: 0, right: edgeInsets)
}

我找到了适合我的情况的自定义尺寸

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: view.frame.width * 0.74, height: view.frame.height)
}

我写了两个方法来控制我的幻灯片

func scrollViewWillEndDragging(_ scrollView: UIScrollView,
                               withVelocity velocity: CGPoint,
                               targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    let x = targetContentOffset.pointee.x

    pageControl.currentPage = Int(x / view.frame.width * 0.74)
    let last = viewModel.getNumberOfItems() - 1
    if pageControl.currentPage == last {
        btnStart.isHidden = false
        imbBtnStartBg.isHidden = false
    } else {
        btnStart.isHidden = true
        imbBtnStartBg.isHidden = true
    }

}

func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
    let pageWidth = view.frame.width * 0.74

    let page = floor((collectionView.contentOffset.x - pageWidth / 2) / pageWidth) + 1
    let xOffset: CGFloat = page * pageWidth
    collectionView.setContentOffset(CGPoint(x: xOffset, y: 0.0), animated: true)
    pageControl.currentPage = Int(page)
    if Int(page) == 2{
        btnStart.isHidden = false
        imbBtnStartBg.isHidden = false
    } else {
        btnStart.isHidden = true
        imbBtnStartBg.isHidden = true
    }
    for i in 0..<viewModel.onBoardingModels.count{
        viewModel.onBoardingModels[i].previewed = false
    }
    viewModel.onBoardingModels[Int(page)].previewed = true
    collectionView.reloadData()
}

我还向我的单元格添加了动画

UIView.animate(withDuration: 0.5, animations: {
        self.imgv.transform = model.previewed ? CGAffineTransform(scaleX: 1, y: 1) : CGAffineTransform(scaleX: 0.9, y: 0.9)
    })

【讨论】：