VTAutoSlideView

无论是在新闻 APP、商城 APP、音乐 APP 还是社交 APP，我们经常能看到一种视图——无限循环滚动视图😆。

这类视图通常用来展示照片、新闻、商品，常用度相信不用我再做过多阐述了🙂。所以这也是 VTAutoSlideView 出现的原因，接下来让我们看看如何使用它😊

要求

• iOS 9.0+
• Xcode 8.0+
• Swift 3.0+

安装

CocoaPods

• 将 pod 'VTAutoSlideView' 添加到您的 Podfile 中。
• 运行 pod install 或 pod update。

快速上手

Storyboard / Xib (使用Storyboard 或 Xib创建，目前仅支持横向轮播)

1. 在 Storyboard 或 Xib 中拖拽一个 View，将此 View 设置为 VTAutoSlideView。

2. 创建一个 UICollectionViewCell，并设置自己的布局。

3. 在 ViewController 中注册你的 Cell，并设置 VTAutoSlideView 的 dataSource 和 dataList。

   @IBOutlet weak var slideView: VTAutoSlideView!
       
   // 你的数据源
   lazy var imageList = {
       (1...4).map{ "0\($0)" }.map{ UIImage(named: $0) }.filter{ $0 != nil }.map{ $0! }
   }()
   
   override func viewDidLoad() {
       super.viewDidLoad()
       // 先注册你的 CollectionViewCell
       // 如果是Xib创建的用下面这个方法注册
       slideView.register(nib: UINib(nibName: "DisplayImageCell", bundle: nibBundle))
       
       // 或者如果是用代码创建的，用下面这个方法注册
       //slideView.register(cellClass: DisplayImageCell.self)
       
       slideView.dataSource = self
       slideView.dataList = imageList
   }

4. 实现 VTAutoSlideViewDataSource 的 configuration(cell:for:) 方法，配置你的 cell。

   extension ViewController: VTAutoSlideViewDataSource {
   	func configuration(cell: UICollectionViewCell, for index: Int)
   	{
          guard let cell = cell as? DisplayImageCell else {
           	   return
       	 }
       	 cell.imageView.image = imageList[index]
   	}
   }

5. 现在你可以运行你的项目了。如果一切都没有设置错，应该就可以成功运行。🍻🍻

代码

1. 创建 VTAutoSlideView，设置横向或纵向，同时设置 dataSource let slideView = VTAutoSlideView(direction: .vertical, dataSource: self)

2. 注册 Cell，设置 dataList。

   slideView.register(nib: UINib(nibName: "DisplayImageCell", bundle: nibBundle))
   slideView.dataList = imageList
   slideView.activated = false // 关闭自动轮播功能
   view.addSubview(slideView)
   slideView.translatesAutoresizingMaskIntoConstraints = false
       
   // add constraints
   slideView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
   slideView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: 20).isActive = true
   slideView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
   slideView.heightAnchor.constraint(equalToConstant: view.bounds.height * 0.5).isActive = true

3. 实现 VTAutoSlideViewDataSource 的 configuration(cell:for:) 方法，配置你的 cell（参考 Storyboard / Xib 中的代码）。

4. 如果没有配置错误，一切也已经可以正常运行起来了。

演示

• 更新至 27/08/2018。 修复了一个会导致崩溃的 bug，修改 demo 以适配 iPhone X。
• 更新至 18/05/2017。 修改了只包含一张图片时不允许轮播的问题。
• 更新至 28/03/2017。 添加了处理 CollectionView bounds 变化的功能，例如屏幕旋转时的处理。
• 更新至 09/02/2017。 添加了自动轮播功能，并添加了纯代码中使用的 demo。🍻🍻
• 更新至 07/02/2017。 目前只演示了在 Storyboard 中的使用，后续将会补充纯代码中的使用方法。😋

有问题？

请联系我 Email: [email protected]

许可

VTAutoSlideView是在MIT许可下发布的。有关详细信息，请参阅LICENSE。