Swift - 常用轮播图封装,满足你的日常需求

3,871 阅读2分钟

使用UICollectionView实现常见图片/文字无限轮播,支持自定义pageControl,自定义文字样式,以及轮播样式,代码简单,使用方便
GitHub: https://github.com/MQZHot/ZCycleView

demo
demo

基本使用

let cycleView = ZCycleView(frame: frame)
cycleView.placeholderImage = UIImage(named: "placeholder")
cycleView.setUrlsGroup(["http://...", "http://...", "http://..."], titlesGroup: ["...", "..."])
view.addSubview(cycleView)

可以设置本地图片、图片url以及只显示文字

设置文字的时候,可以选择titlesGroup或者attributedTitlesGroup,都是数组,如果两者都设置了,优先attributedTitlesGroup

/// image
func setImagesGroup(_ imagesGroup: Array<UIImage?>, titlesGroup: [String?]? = nil, attributedTitlesGroup: [NSAttributedString?]? = nil)
/// image url
func setUrlsGroup(_ urlsGroup: Array<String>, titlesGroup: [String?]? = nil, attributedTitlesGroup: [NSAttributedString?]? = nil)
/// text only
func setTitlesGroup(_ titlesGroup: Array<String?>?, attributedTitlesGroup: [NSAttributedString?]? = nil)
`

如果想在文字左侧添加图片,如下图,需要调用下面的方法
注意:一定要设置图片的尺寸,否则不显示

pic1.png
pic1.png

func setTitleImagesGroup(_ titleImagesGroup: [UIImage?], sizeGroup:[CGSize?])
///或者
func setTitleImageUrlsGroup(_ titleImageUrlsGroup: [String?], sizeGroup:[CGSize?])

设置图片item

/// 大小
var itemSize: CGSize?
/// 中间item的放大比例
var itemZoomScale: CGFloat = 1
/// item的间距
var itemSpacing: CGFloat = 0
/// 圆角
var itemCornerRadius: CGFloat = 0
/// 边框颜色
var itemBorderColor: UIColor = UIColor.clear
/// 边框宽度
var itemBorderWidth: CGFloat = 0

例子,中间item放大1.2倍

cycleView.itemSize = CGSize(width: 240, height: 90)
cycleView.itemZoomScale = 1.2

pic2.png
pic2.png

设置文字

上图设置了attributedTitlesGroup,如果需要显示多行,需要设置titleNumberOfLines = 0
下图是默认的样式

pic5.png
pic5.png

pic6.png
pic6.png

/// 文字的高度
var titleViewHeight: CGFloat = 25
/// 对齐方式
public var titleAlignment: NSTextAlignment = .left
/// 字体大小
public var titleFont: UIFont = UIFont.systemFont(ofSize: 13)
/// 背景颜色
public var titleBackgroundColor: UIColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
/// 文字颜色
public var titleColor: UIColor = UIColor.white
/// 显示行数
public var titleNumberOfLines = 1
/// 断行方式
public var titleLineBreakMode: NSLineBreakMode = .byWordWrapping

设置pageControl

pageControl可以自定义选中未选中的大小,颜色,形状等,也可以设置图片

pic3.png
pic3.png

pic4.png
pic4.png

/// 是否隐藏pageControl
var pageControlIsHidden = false
/// 圆点颜色
var pageControlIndictirColor = UIColor.gray
/// 选中圆点的颜色
var pageControlCurrentIndictirColor = UIColor.white
/// 选中圆点图片
var pageControlCurrentIndictorImage: UIImage?
/// 圆点图片
var pageControlIndictorImage: UIImage?
/// pageControl的高度
var pageControlHeight: CGFloat = 25
/// PageControl的背景颜色
var pageControlBackgroundColor = UIColor.clear
/// 圆点大小
var pageControlItemSize = CGSize(width: 8, height: 8)
/// 选中圆点大小
var pageControlCurrentItemSize: CGSize?
/// 圆点之间的距离
var pageControlSpacing: CGFloat = 8
/// 对齐方式
var pageControlAlignment: ZCyclePageControlAlignment = .center
/// 圆角
var pageControlItemRadius: CGFloat?
/// 选中圆角
var pageControlCurrentItemRadius: CGFloat?

点击事件/滑动事件使用了闭包

/// click
var didSelectedItem: ((Int)->())?
/// scroll
var didScrollToIndex: ((Int)->())?

其他的属性

/// 自动滚动
var isAutomatic: Bool = true
/// 是否无限滚动
var isInfinite: Bool = true
/// 滚动的时间间隔
var timeInterval: Int = 2
/// 滚动方向
var scrollDirection: UICollectionViewScrollDirection = .horizontal
/// 占位图
var placeholderImage: UIImage? = nil

依赖

Kingfisher

详细的使用请看demo,有问题欢迎反馈
GitHub: https://github.com/MQZHot/ZCycleView