FSPagerView 使用及其详解
2020-09-23 本文已影响0人
木子雨廷t
之前做项目的时候用过几个轮播的组件，总体来说都还不错，但是功能比较强大，感觉设计比较好的，首推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)
