Swift - 常用輪播圖封裝，滿足你的日常需求

MQZHot發表於2017-11-30
Swift封裝

使用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

相關文章