使用UICollectionView實現(xiàn)的swift輪播圖FYSliderView
- 帶有動畫效果的pageControl敢伸，可自定義pageControl元素之間的間距/大小/位置
- 可自定義文字標題的字體大小/顏色/內(nèi)邊距
- 有兩種風格的文字標題遮罩背景（漸變色背景/半透明背景）
項目結(jié)構(gòu)
目錄說明
├── FYSliderView ＃核心庫文件夾绍刮，如果不使用 CocoaPods 集成，請直接將這個文件夾拖拽帶你的項目中
└── FYSliderView.swift 核心類
└── FYPageControl.swift 自定義的PageControl
└── FYAnimatedLayer.swift 組成pageControl元素的圖層
└── FYSliderViewCustomizable.swift 參數(shù)配置
使用FYSliderView
第一步：使用CocoaPods導入FYSliderView
在Podfile中進行如下導入：
pod 'FYSliderView'
然后使用cocoaPods進行安裝
第二步：遵守FYSliderViewCustomizable協(xié)議陶因，并在初始化方式中指定為自己
class ViewController: UIViewController,FYSliderViewCustomizable {
var sliderView:FYSliderView!
func setupSliderView(){
sliderView = FYSliderView(frame: CGRect(x: 0, y: 0, width: view.bounds.size.width, height: 200),option:self)
view.addSubview(sliderView)
}
}
第三步：為sliderView指定數(shù)據(jù)源
//聲明成員變量
var dataSource:[FYImageObject]!
//請求數(shù)據(jù)，存到dataSource數(shù)組中
…
//指定為數(shù)據(jù)源
sliderView.imageObjectGroup = dataSource
第四步：指定代理，實現(xiàn)當點擊圖片會觸發(fā)回調(diào)方法（可選的）
//指定代理對象為self
sliderView.delegate = self
//遵守協(xié)議FYSliderViewDelegate柄沮，代理方法如下
extension ViewController:FYSliderViewDelegate{
//輪播圖滾動過程中會觸發(fā)此方法，檢索位置
func sliderView(didScrollToIndex index: Int) {
print("滾到了\(index)")
}
//用戶點擊圖片废岂，檢索位置
func sliderView(didSelectItemAtIndex index: Int) {
print("點了\(index)")
}
}
參數(shù)說明
//默認背景圖
var placeholderImage:UIImage
//是否需要無限循環(huán)
var infiniteLoop:Bool
//是否自動滾動
var autoScroll:Bool
//默認滾動間隔時間
var scrollTimeInterval:NSTimeInterval
//滾動方向
var scrollDirection:UICollectionViewScrollDirection
//圖片的填充方式
var imageContentMode:UIViewContentMode
//只有一個元素時就隱藏pageControl
var hidesForSinglePage:Bool
//分頁控件的類型
var controlType:FYPageControlType
//文字背景遮罩樣式
var maskType:FYSliderCellMaskType
//文字樣式
var titleStyle:FYTitleStyle
1.pageControl相關(guān)
其中分頁控件的類型有：
- custom 自定義有動畫效果的pageControl(默認)
- system 使用系統(tǒng)自帶的pageControl
效果如圖
custom
system
使用方法：
1.在ViewController類中,只需重寫controlType屬性祖搓，將返回值改為.system并按照參數(shù)要求補齊完整即可切換成系統(tǒng)樣式
var controlType:FYPageControlType{
return .system(currentColor: UIColor(red: 1, green: 1, blue: 1, alpha: 1),
normalColor:UIColor(red: 1, green: 1, blue: 1, alpha: 0.8),
point:(x:.centerX,y:.bottom(10)))
}
2.你想改變動畫樣式的pageControl元素之間的間距或者大小，僅僅只需重寫controlType屬性湖苞，將返回值改為.custom并按照參數(shù)要求補齊完整即可
var controlType:FYPageControlType{
return .custom(currentColor: UIColor(red: 1, green: 1, blue: 1, alpha: 1),
normalColor:UIColor(red: 1, green: 1, blue: 1, alpha: 0.8),
layout:[.point(x:.right(10), y:.bottom(16)),
.size(borderWidth:2,circleWidth:10),
.margin(12)
])
}
3.如果我不想要pageControl了拯欧，想把它隱藏掉，那么只需要這樣就可以
var controlType:FYPageControlType{
return .none
}
4.我想自定義pageControl的位置财骨，如果我用的是系統(tǒng)的pageControl的話镐作，我只需要改變參數(shù)point的值即可，它分為x軸和y軸隆箩，
x軸方向可表示為：
- .left(20) 到sliderView試圖左邊距離20個單位
- .centerX 相對于sliderView水平居中
- .right(10)到sliderView試圖右邊距離10個單位
y軸方向可表示為：
- .top(10) 到sliderView試圖頂部距離10個單位
- .centerY 相對于sliderView垂直居中
- .bottom(20)到sliderView試圖底部距離20個單位
效果如圖
右下角顯示
水平垂直居中
2.帶文字效果的輪播圖该贾，介紹關(guān)于遮罩視圖的不同選擇樣式
其中遮罩試圖的類型有：
- translucent 半透明
- gradient 漸變色（默認）
效果如圖
半透明
漸變背景色
使用方法：
1、設(shè)置成為漸變色的遮罩樣式
var maskType:FYSliderCellMaskType{
return .gradient(backgroundColors: [UIColor(red: 0, green: 0, blue: 0, alpha: 0),
UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)],
offsetY: 100)
}
2捌臊、設(shè)置成為半透明的遮罩樣式
var maskType:FYSliderCellMaskType{
return .translucent(backgroundColor:UIColor(red: 0, green: 0, blue: 0, alpha: 0.5))
}
注：如果傳入數(shù)據(jù)源中的title字段為空杨蛋，將不再顯示遮罩背景
3.帶文字效果的輪播圖，介紹關(guān)于設(shè)置文字標題的字體大小/內(nèi)邊距/字體顏色
var titleStyle:FYTitleStyle{
return [.fontSize(16)]
}
注：返回的是數(shù)組樣式理澎，數(shù)組元素存在枚舉類型FYTitleLabelStyle中逞力，可傳入多個或單個例如：
//我想改變字體大小和字體顏色：
var titleStyle:FYTitleStyle{
return [.fontSize(16),textColor(UIColor.redColor())]
}
結(jié)語
將FYSliderView導入到工程項目中以后，開發(fā)者需將輪播圖的占位圖添加到項目圖片目錄下矾端，可將占位圖的圖片資源名稱命名為fy_placeholderImage或重寫var placeholderImage:UIImage屬性掏击。如果開發(fā)者導入占位圖資源圖片到項目中，輪播圖的占位圖會替換成一張繪制而成的灰色背景圖
有任何疑問請到個人博客留言
