如何在集合视图中快速创建具有倾斜效果的对齐滑块？

问题描述

我正在尝试使用集合视图创建一个具有旋转木马之类的工作的水平滑块。这是我需要复制的图像：

它是一个水平滑块，有 N 个项目。 为此，我尝试使用 FSPagerView 和 UPCarouselFlowLayout，但无法完全得到我想要的。所以，我尝试使用集合视图手动创建它，但它仍然不能满足我的需要。这是代码。

 func collectionView(_ collectionView: UICollectionView,numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    func collectionView(_ collectionView: UICollectionView,cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellC",for: indexPath)as! cellC
        return cell
    }
    func collectionView(_ collectionView: UICollectionView,layout collectionViewLayout: UICollectionViewLayout,sizeforItemAt indexPath: IndexPath) -> CGSize {
        let widthTotal = self.collview.frame.size.width - 40
        let widthrequired = widthTotal/3
        return CGSize(width: widthrequired,height: widthrequired)
    }
    func collectionView(_ collectionView: UICollectionView,minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
    func collectionView(_ collectionView: UICollectionView,minimumLinespacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        scrollToNearestVisibleCollectionViewCell()
    }
    func scrollViewDidEndDragging(_ scrollView: UIScrollView,willDecelerate decelerate: Bool) {
        if !decelerate {
            scrollToNearestVisibleCollectionViewCell()
        }
    }
    func scrollToNearestVisibleCollectionViewCell() {
        collview.decelerationRate = UIScrollView.DecelerationRate.fast
        let visibleCenterPositionOfScrollView = Float(collview.contentOffset.x + (collview.bounds.size.width / 2))
        var closestCellIndex = -1
        var closestdistance: Float = .greatestFiniteMagnitude
        for i in 0..<collview.visibleCells.count {
            let cell = collview.visibleCells[i]
            let cellWidth = cell.bounds.size.width
            let cellCenter = Float(cell.frame.origin.x + cellWidth / 2)
            // Now calculate closest cell
            let distance: Float = fabsf(visibleCenterPositionOfScrollView - cellCenter)
            if distance < closestdistance {
                closestdistance = distance
                closestCellIndex = collview.indexPath(for: cell)!.row
            }
        }
        if closestCellIndex != -1 {
            collview.scrollToItem(at: IndexPath(row: closestCellIndex,section: 0),at: .centeredHorizontally,animated: true)
        }
        for cell in self.collview.visibleCells {
            let indexPath = collview.indexPath(for: cell)
            let cell = collview.cellForItem(at: indexPath!)as! cellC
            if indexPath!.row < closestCellIndex {
                //tilted effect on left side cell
                cell.bgview.backgroundColor = .red
            }
            if indexPath!.row > closestCellIndex {
                //tilted effect on right side cell
                cell.bgview.backgroundColor = .yellow
                let degrees = 30.0
                let radians = CGFloat(degrees * M_PI / 180)
                cell.transform = CGAffineTransform.init(scaleX: 1.1,y: 1.1)
            }
            if indexPath!.row == closestCellIndex {
                cell.bgview.backgroundColor = .green
                // no tilt effect on middle cell
                cell.transform = .identity
            }
        }
    }

任何人都请解释我如何才能实现确切的目标。谢谢！

解决方法

你可以使用 cocoapods 即“MMBannerLayout”来实现同样的事情