Swift - 經常使用輪播圖封裝,知足你的平常需求

使用UICollectionView實現常見圖片/文字無限輪播,支持自定義pageControl,自定義文字樣式,以及輪播樣式,代碼簡單,使用方便
GitHub: https://github.com/MQZHot/ZCycleView
git

demo
demo

基本使用

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

能夠設置本地圖片、圖片url以及只顯示文字

設置文字的時候,能夠選擇titlesGroup或者attributedTitlesGroup,都是數組,若是二者都設置了,優先attributedTitlesGroupgithub

/// 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)
`複製代碼

若是想在文字左側添加圖片,以下圖,須要調用下面的方法
注意:必定要設置圖片的尺寸,不然不顯示
swift

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能夠自定義選中未選中的大小,顏色,形狀等,也能夠設置圖片
app

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/ZCycleViewurl

相關文章
相關標籤/搜索