FSPagerView 使用及其详解

之前做项目的时候用过几个轮播的组件，总体来说都还不错，但是功能比较强大，感觉设计比较好的，首推FSPagerView。下面简单说下FSPagerView的用法和注意事项。

集成方式，我是使用 cocopod 集成的在 Podfile 文件中添加

pod 'FSPagerView'

cd 到工程文件，执行pod install 即可

FSPagerView 可以支持市场上一些主流样式的开发，下面分样式说一下代码的实现。

样式一

常规样式.gif

直接上代码

(1)懒加载滚动图片浏览器

// 懒加载滚动图片浏览器
    private lazy var pagerView : FSPagerView = {
        let pagerView = FSPagerView()
        pagerView.delegate = self
        pagerView.dataSource = self
        pagerView.automaticSlidingInterval =  3
        pagerView.isInfinite = !pagerView.isInfinite
        pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "ShopBannerCell")
        return pagerView        
    }()

(2)懒加载滚动图片下标指示器,就是下面的小白点

// 懒加载滚动图片浏下标
    lazy var pagerControl:FSPageControl = {
        let pageControl = FSPageControl()
        //设置下标的个数
//        pageControl.numberOfPages = 5
        //设置下标位置
        pageControl.contentHorizontalAlignment = .center
        //设置下标指示器边框颜色（选中状态和普通状态）
        pageControl.setStrokeColor(.lightGray, for: .normal)
        pageControl.setStrokeColor(.darkGray, for: .selected)
        //设置下标指示器颜色（选中状态和普通状态）
        pageControl.setFillColor(.lightGray, for: .normal)
        pageControl.setFillColor(.darkGray, for: .selected)
        
        //设置下标指示器图片（选中状态和普通状态）
        //pageControl.setImage(UIImage.init(named: "1"), for: .normal)
        //pageControl.setImage(UIImage.init(named: "2"), for: .selected)
        
        //绘制下标指示器的形状 (roundedRect绘制绘制圆角或者圆形)
//        pageControl.setPath(UIBezierPath.init(roundedRect: CGRect.init(x: 0, y: 8, width: 8, height: 5),cornerRadius: 4.0), for: .normal)
        
        pageControl.setPath(UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 6, height: 6)), for: .normal)
        pageControl.setPath(UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 6, height: 6)), for: .selected)
        return pageControl

    }()

下标的位置，形状，背景色，边框颜色都可以完全自定制。另外可以支持设置图片，使用UIBezierPath绘制，支持各种各样的样式。代码注释已经写得很详细，大家有兴趣可以分别试试。

(3)将滚动视图和下标控件分别添加到父视图，并添加约束。

self.addSubview(self.pagerView)
self.addSubview(self.pagerControl)
self.pagerView.snp.makeConstraints { (make) in
         make.left.top.right.equalToSuperview()
         make.height.equalToSuperview()
 }
self.pagerControl.snp.makeConstraints { (make) in
         make.width.equalTo(80)
         make.height.equalTo(30)
         make.bottom.equalTo(pagerView.snp.bottom).offset(0)    
         make.centerX.equalTo(self.pagerView)
 }

(4)遵循代理 FSPagerViewDelegate, FSPagerViewDataSource，实现代理方法，其实封装的是UICollectionView，完全可以当成UICollectionView 去理解

extension BannerView: FSPagerViewDelegate, FSPagerViewDataSource {
    // - FSPagerView Delegate
    func numberOfItems(in pagerView: FSPagerView) -> Int {
        return self.slidesList!.count 
    }
    
    func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
        let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "ShopBannerCell", at: index)
        cell.imageView?.kf.setImage(with: URL(string:(self.slidesList?[index].image)!))
        return cell
    }
    
    func pagerView(_ pagerView: FSPagerView, willDisplay cell: FSPagerViewCell, forItemAt index: Int) {
        self.pagerControl.currentPage = index

    }
    
    func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int) {
        backGoodId?((self.slidesList?[index].goodsId!)!)
        
    }
}

这个方法必须设置，不然图片和浏览器滚动不一致。

 func pagerView(_ pagerView: FSPagerView, willDisplay cell: FSPagerViewCell, forItemAt index: Int) {
     self.pagerControl.currentPage = index
}

另外需要注意的是，下面的方法在拿到数据的方法中设置

self.pagerControl.numberOfPages = self.slidesList!.count

样式二 淡入淡出.交叉渐变

Untitled.gif

在懒加载滚动视图的代码中增加以下代码

pagerView.transformer = FSPagerViewTransformer(type: .crossFading)

样式三

Untitled.gif

在懒加载滚动视图的代码中增加以下代码

 pagerView.itemSize = CGSize.init(width: ScreenWidth - 60, height: 140)
 pagerView.transformer = FSPagerViewTransformer(type: .zoomOut)

样式四

Untitled.gif

在懒加载滚动视图的代码中增加以下代码

 pagerView.transformer = FSPagerViewTransformer(type: .depth)

样式五

Untitled.gif

在懒加载滚动视图的代码中增加以下代码

pagerView.itemSize = CGSize.init(width: ScreenWidth - 60, height: 140)
pagerView.transformer = FSPagerViewTransformer(type: .overlap)

各种样式的改变主要根据以下代码改变,就不一一列举了。

 /*
         case crossFading
         case zoomOut
         case depth
         case overlap
         case linear
         case coverFlow
         case ferrisWheel
         case invertedFerrisWheel
         case cubic
         */
  pagerView.transformer = FSPagerViewTransformer(type: .overlap)
  pagerView.interitemSpacing = 30
  pagerView.itemSize = CGSize.init(width: ScreenWidth - 60, height: 140)

项目地址请移步: githup地址

关于swift的更多知识

请点击 swift文集!