功能強大的輪播器-SBCycleScrollView

Lucky_Xu發表於2019-03-01

SBCycleScrollView

☆☆☆ “功能強大的圖片、文字輪播器,支援純文字、網路圖片、本地圖片、圖片加文字以及各種圓點樣式” ☆☆☆

支援pod匯入

pod `SBCycleScrollView`,`~> 0.0.8`

SBCycleScrollView是一個簡單好用的圖片輪播器,支援網路圖片,本地圖片,文字,滑動方向,storyboard以及各種樣式.

Github地址,歡迎star?

使用方式

使用cocoapods匯入,pod `SBCycleScrollView`,`~>0.0.4`,如果發現pod search SBCycleScrollView 搜尋出來的不是最新版本,請先執行pod setup指令,獲取最新資料來源就可以了.

提供三種初始化方式

通過網路圖片地址初始化
let cycleScrollView = CycleScrollView.initScrollView(frame: frame, imageNamesGroup: imageUrls, cycleOption: CycleOption())
複製程式碼
通過本地圖片名稱或地址初始化
let cycleScrollView = CycleScrollView.initScrollView(frame: frame, imageNamesGroup: localImages, cycleOptions: CycleOptions())
複製程式碼
通過文字陣列初始化
let cycleScrollView = CycleScrollView.initScrollView(frame: frame, titleGroup: titles, cycleOption: CycleOption())
複製程式碼
推薦方式,通過代理和佔點陣圖初始化,常用於圖片非同步獲取的時候
let cycleScrollView = CycleScrollView.initScrollView(frame: frame, delegate: self, placehoder: UIImage.init(named: "place.png"), cycleOptions: CycleOptions())
cycleScrollView.imageURLStringsGroup = imageUrls
複製程式碼

通過單獨抽取一個struct來管理各種輪播器的各個屬性

import UIKit

public enum PageControlStyle {
    case classic,aji,aleppo,chimayo,jalapeno,jaloro,paprika,puya
}
public enum PageControlAliment {
    case center,right
}

public struct CycleOption {
    public  var scrollDirection:UICollectionViewScrollDirection = UICollectionViewScrollDirection.horizontal
    public  var showPageControl: Bool = true//是否顯示pageControl,預設顯示
    public  var isOnlyDisplayText: Bool = false//只顯示文字,預設false
    public  var imageViewMode: UIViewContentMode = UIViewContentMode.scaleToFill //圖片填充樣式,預設fill
    public  var scrollTimeInterval: TimeInterval = 2.0//滑動間隔時間
    public  var titleLabelBackgroundColor: UIColor = .init(red: 0, green: 0, blue: 0, alpha: 0.2)//label背景顏色
    public  var textColor: UIColor = .white//文字顏色
    public  var textFont: UIFont = UIFont.systemFont(ofSize: 14)//文字字型大小
    public  var titleLabelHeight: CGFloat = 30//label高度,預設30
    public  var textAlignment: NSTextAlignment = NSTextAlignment.left//文字預設居左
    public  var numberOfline = 1 // 文字行數,預設一行
    public  var radius: CGFloat = 5//pageControl圓點半徑
    public  var pageAliment: PageControlAliment = PageControlAliment.center//pageControl位置,預設居中
    public  var bottomOffset: CGFloat = 0//pageControl距離底部距離
    public  var rightOffset: CGFloat = 0//pageControl距離右側距離
    public  var padding: CGFloat = 7 //pagecontol間距
    public  var pageStyle: PageControlStyle = PageControlStyle.classic//pageControl樣式,預設系統樣式
    public  var currentPageDotColor: UIColor = .white//當前pageControl圓點的顏色
    public  var pageDotColor: UIColor = .gray//其他pageControl圓點的顏色
}
複製程式碼

點選圖片代理

代理名稱SBCycleScrollViewDelegate,代理方法

func didSelectedCycleScrollView(_ cycleScrollView: SBCycleScrollView, _ Index: NSInteger) {
        print("點選了第(Index)張圖片")
    }
複製程式碼

####修改配置屬性,達到你想要的效果

\先配置再初始化
        var option = CycleOption()
        option.currentPageDotColor = .blue
        option.radius = 10
        option.pageStyle = PageControlStyle.jalapeno
        let cycleScrollView = CycleScrollView.initScrollView(frame: view.frame, imageURLsGroup: imageUrls, cycleOption: option)
\初始化後再修改配置
        let cycleScrollView = CycleScrollView.initScrollView(frame: view.frame, imageURLsGroup: imageUrls, cycleOption: CycleOption())
        var option = CycleOption()
        option.currentPageDotColor = .blue
        option.radius = 10
        option.pageStyle = PageControlStyle.jalapeno
        cycleScrollView.option = option
複製程式碼

####點選圖片代理
代理名稱SBCycleScrollViewDelegate,代理方法

 func didSelectedCycleScrollView(_ cycleScrollView: CycleScrollView, _ Index: NSInteger) {
        print("點選了第(Index)張圖片")
    }
複製程式碼

效果圖展示:

功能強大的輪播器-SBCycleScrollView
功能強大的輪播器-SBCycleScrollView
功能強大的輪播器-SBCycleScrollView
功能強大的輪播器-SBCycleScrollView
功能強大的輪播器-SBCycleScrollView
功能強大的輪播器-SBCycleScrollView
功能強大的輪播器-SBCycleScrollView
功能強大的輪播器-SBCycleScrollView

結語

如果這個元件能夠幫助到你我會非常開心,當然我也希望有大佬能夠幫我指出我程式碼中的問題,畢竟我學swift時間不久,程式碼還有很多不足的地方,如果可以,非常感謝.

希望大家能給個star,你們的鼓勵是我前進的動力.

Github地址,歡迎star?

相關文章