带有集合视图 POD 的 Swift Carousel

Question

所以我正在努力实现这样的目标：

一个轮播，我可以左右滑动，但我不确定如何实现这一点，我现在有一个带有水平滚动的集合视图所有设置。

还有其他方法吗？有 POD 或其他我可以使用的东西吗？它不需要使用我刚刚使用它测试过的集合视图。

任何帮助将不胜感激

Answer 1

我使用过的一个很棒的 pod 叫做“CollectionViewPagingLayout”，它非常简单

1. 在此处安装 pod (https://github.com/amirdew/CollectionViewPagingLayout#installation)
2. 创建自定义单元类。导入 CollectionViewPagingLayout 并符合可变形视图。然后遵循协议存根（转换）并根据需要自定义轮播，如下所示：

import UIKit
import CollectionViewPagingLayout

class MyCustomCell: UICollectionViewCell, TransformableView {

  func transform(progress: CGFloat) {
     //customize it however you want
  }
}

3. 如果您不想自定义您自己的，您可以使用他提供的 3 个预设选项。只需将“TransformableView”更改为“StackTransformView”、“SnaphotTransformView”或“ScaleTransformView”即可。然后将变换函数替换为他的预设变量之一，如下所示：

import UIKit
import CollectionViewPagingLayout

class MyCustomCell: UICollectionViewCell, ScaleTransformView {

    var scaleOptions = ScaleTransformViewOptions(
        minScale: 0.6,
        scaleRatio: 0.4,
        translationRatio: CGPoint(x: 0.66, y: 0.2),
        maxTranslationRatio: CGPoint(x: 2, y: 0),
    )
}

4. 现在转到您的ViewController（带有collectionView）并导入collectionViewpaginglayout。然后创建一个符合 CollectionViewPagingLayout 的布局常量。最后，在 view did load 下，将你的 collectionView 连接到布局类，如下所示：

import UIKit
import CollectionViewPagingLayout

class viewController: UIViewController {

//Outlets
@IBOutlet var myCollectionView: UICollectionView!

//Variables
let layout = CollectionViewPagingLayout()

//View did load
override func viewDidLoad() {
        super.viewDidLoad()
     //collectionViewPagingLayout setup
      layout.delegate = self
      myCollectionView.collectionViewLayout = layout
      myCollectionView.isPagingEnabled = true
}

}

5. 设置您的集合查看您通常如何处理代表等。一切都准备好了。您可以使用它提供的布局委托方法来执行诸如更改页面或计算您所在的页码之类的操作。如下所示：

extension ViewController: CollectionViewPagingLayoutDelegate {
    
    func onCurrentPageChanged(layout: CollectionViewPagingLayout, currentPage: Int) {
       print(currentPage)
    }
}

• 注 1 - 设置自定义 collectionView 单元格（在 Storyboard 或 nib 中）时，将约束添加为容器中的水平中心和容器中的垂直中心，否则不会显示其他 2 个单元格。
• 注 2 - 您可以将可见项目的数量设置为 int，这样它就不会一次加载所有单元格（这在 github 页面中有更好的解释）。例如：

   layout.numberOfVisibleItems = 3

  你可以把它放在 viewdidload() 中

Answer 2

在 Swift 3。

extension UICollectionView {

var centerPoint : CGPoint {

    get {

        return CGPoint(x: self.center.x + self.contentOffset.x, y: self.center.y + self.contentOffset.y);
    }
}

var centerCellIndexPath: IndexPath? {

    if let centerIndexPath = self.indexPathForItem(at: self.centerPoint) {

        return centerIndexPath
    }

    return nil
 }
}

要使用项目单元格制作

Curosel

：

func curosel() {

    if myCollectionView.centerCellIndexPath != nil {

        var index = (myCollectionView.centerCellIndexPath?.row)!

        if  myCollectionView.centerCellIndexPath! == IndexPath(item: 0, section: 0) {

            myCollectionView.cellForItem(at: myCollectionView.centerCellIndexPath!)?.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)

            index += 1

            myCollectionView.cellForItem(at: IndexPath(item: index, section: 0))?.transform = CGAffineTransform.identity

        } else {

            myCollectionView.cellForItem(at: myCollectionView.centerCellIndexPath!)?.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
            index -= 1
            myCollectionView.cellForItem(at: IndexPath(item: index, section: 0))?.transform = CGAffineTransform.identity
            index += 2
            myCollectionView.cellForItem(at: IndexPath(item: index, section: 0))?.transform = CGAffineTransform.identity
        }
        myCollectionView.scrollToItem(at:IndexPath(item: index-1, section: 0), at: .centeredHorizontally, animated: true)
     }
  }
}

Answer 3

使用CardCarousel，你可以轻松实现这种效果。示例：

import CardCarousel
import SwiftUI

struct SwiftUIView: View {
    @State var data = [...]

    var body: some View {
        CardCarouselView(data)
            .cardLayoutSize(widthDimension: .fractionalWidth(0.7), heightDimension: .fractionalHeight(0.7))
            .cardTransformMode(.liner(minimumScale: 0.9))
            .cardCornerRadius(10)
            .frame(height: 600)
    }
}