Swift轮播控件快速入门——FSPagerView

最新推荐文章于 2024-08-10 07:01:52 发布

沸腾的泪水05314

最新推荐文章于 2024-08-10 07:01:52 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/sinat_21886795/article/details/79416068

转载自：https://blog.youkuaiyun.com/sinat_21886795/article/details/79416068

今天介绍一个IOS的轮播控件FSPagerView。

FSPagerView是一个优雅的轮播控件，它可以十分轻松有效地制作轮播视图、产品展示、欢迎/指南页面。

先上地址——Swift: https://github.com/WenchaoD/FSPagerView

OC: https://github.com/WenchaoD/FSPagerView/blob/master/README-OBJECTIVE-C.md

Cocoapods集成方式—— pod 'FSPagerView'

下载完成后导入FSPagerView：

import FSPagerView
初次导入时XCode会报错找不到项目，只要Build一下即可消除错误
使用方法—— 1.懒加载获取FSPagerView和FSPageControl的实例，在闭包中设置各个属性

FSPagerView是轮播视图类，FSPageControl是下标指示器类

lazy var viewPager: FSPagerView = {
let viewPager = FSPagerView()
viewPager.frame = frame1
viewPager.dataSource = self
viewPager.delegate = self
viewPager.register(FSPagerViewCell.self, forCellWithReuseIdentifier: cellId)
//设置自动翻页事件间隔，默认值为0（不自动翻页）
viewPager.automaticSlidingInterval = 1.0
//设置页面之间的间隔距离
viewPager.interitemSpacing = 8.0
//设置可以无限翻页，默认值为false，false时从尾部向前滚动到头部再继续循环滚动，true时可以无限滚动
viewPager.isInfinite = true
//设置转场的模式
viewPager.transformer = FSPagerViewTransformer(type: FSPagerViewTransformerType.depth)

return viewPager
}()
lazy var pagerControl:FSPageControl = {
let pageControl = FSPageControl(frame: frame2)
//设置下标的个数
pageControl.numberOfPages = 8
//设置下标位置
pageControl.contentHorizontalAlignment = .center
//设置下标指示器边框颜色（选中状态和普通状态）
pageControl.setStrokeColor(.white, for: .normal)
pageControl.setStrokeColor(.gray, for: .selected)
//设置下标指示器颜色（选中状态和普通状态）
pageControl.setFillColor(.white, for: .normal)
pageControl.setFillColor(.gray, 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: 0, width: 5, height: 5), cornerRadius: 4.0), for: .normal)
//pageControl.setPath(UIBezierPath(rect: CGRect(x: 0, y: 0, width: 8, height: 8)), for: .normal)
pageControl.setPath(UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 8, height: 8)), for: .selected)
return pageControl

}()

2.在viewDidLoad()方法中把viewPager和pageControl添加到主视图中

self.view.addSubview(viewPager)

self.view.addSubview(pagerControl)
3.实现FSPagerViewDataSource协议中的numberOfItems方法和

pageView(_ pagerView:FSPagerView,cellForItemAt index:Int)-> FSPagerViewCell方法，

通过这两个方法设置轮播页的个数和轮播的样式

/// Asks your data source object for the number of items in the pager view.
@objc(numberOfItemsInPagerView:)
func numberOfItems(in pagerView: FSPagerView) -> Int

/// Asks your data source object for the cell that corresponds to the specified item in the pager view.
@objc(pagerView:cellForItemAtIndex:)

func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell
4.实现pegerView(_ pagerView: FSPagerView, willDisplay cell:FSPagerViewCell, forItemAt Index:Int)方法

该方法可以获得将要显示的cell对象和index，通过index可控制指示器圆点的移动

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

}
5.Run Success！
————————————————
版权声明：本文为优快云博主「sinat_21886795」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/sinat_21886795/article/details/79416068