效果圖
首先感謝右側(cè)鏈接代碼中的圖片素材??~大神使用UICollectionView實現(xiàn)的輪播圖
據(jù)說此三方好多好多人用強大的第三方框架SDCycleScrollView
輪播圖的實現(xiàn)方式
- 使用UIScrollView通過contentSize設(shè)置UIImageView的展示預處理
- 使用UICollectionView通過設(shè)置item
- 使用UISwipeGestureRecognizeror或者TouchesBegan等方法
網(wǎng)絡(luò)上大部分是使用UIScrollView配合三個或者兩個UIImageView來實現(xiàn)的輪播圖治宣，就再想可不可以使用一個UIImgeView實現(xiàn)急侥，從而第三種實現(xiàn)方式也就誕生了砌滞，雖然不是特別實用，但是也算是一種簡單思維
UISwipeGestureRecognizeror（清掃手勢）邏輯
- 通過UIImageView添加向左向右的輕掃手勢
- 當觸發(fā)輕掃手勢的響應事件時坏怪，重新設(shè)置Index
- 使用CATransition的Type（Push）和SubType（Left/Right）來進行實現(xiàn)對應的向左向右的轉(zhuǎn)場動畫
- 更改完Index時贝润，在CATransition動畫中從img數(shù)組中取出對應圖片并賦值給UIImageView
- 賦值圖片的同時更改pageControl的currentPage來實現(xiàn)輪播圖的精仿
TouchesBegan等方法的邏輯
- 寫一個UIImageView的子類，并在其中實現(xiàn)Began铝宵、Move打掘、End方法
- 和使用UIBezierPath繪制畫板同理，首先在Touch等方法中獲取對應的點
- 根據(jù)點的位置改變來判斷向左滑還是向右滑
- 使用CATransition的Type（Push）和SubType（Left/Right）來進行實現(xiàn)對應的向左向右的轉(zhuǎn)場動畫
- 更改完Index時鹏秋，在CATransition動畫中從img數(shù)組中取出對應圖片并賦值給UIImageView
- 賦值圖片的同時更改pageControl的currentPage來實現(xiàn)輪播圖的精仿
主要以UISwipeGestureRecognizeror為例子??
UISwipeGestureRecognizeror（清掃手勢）相關(guān)代碼
一些懶加載尊蚁，注釋已經(jīng)標明清楚
var selectedIndex = 0//當前圖片
lazy var imageView: UIImageView = {//展示image
let imageview = UIImageView()
imageview.image = UIImage(named: "\(self.selectedIndex)")
return imageview
}()
lazy var swipeRight: UISwipeGestureRecognizer = {//從左往右滑手勢
let swipe = UISwipeGestureRecognizer(target: self, action: #selector(tapRightAction))
swipe.direction = .right
return swipe
}()
lazy var swipeLeft: UISwipeGestureRecognizer = {//從右往左滑手勢
let swipe = UISwipeGestureRecognizer(target: self, action: #selector(tapLeftAction))
swipe.direction = .left
return swipe
}()
lazy var page: UIPageControl = {
let page = UIPageControl()
page.numberOfPages = self.dataList.count
page.currentPage = self.selectedIndex
page.pageIndicatorTintColor = UIColor.green
page.currentPageIndicatorTintColor = UIColor.red
return page
}()
lazy var dataList: Array<String> = {//image數(shù)據(jù)源
var arr: Array<String> = []
for i in 0...10 {
arr.append("\(i)")
}
return arr
}()
viewDidLoad
override func viewDidLoad() {
super.viewDidLoad()
imageView.frame = CGRect(x: 0, y: 0, width: screen_width, height: screen_height)
//重要！Ｂ乱摹：崤蟆！０偻亍Ｇ俣А！ 給imageView添加手勢需要將isUserInteractionEnabled設(shè)置為true
imageView.isUserInteractionEnabled = true
//添加向左手勢
imageView.addGestureRecognizer(swipeLeft)
//添加向右手勢
imageView.addGestureRecognizer(swipeRight)
//獲取page的size
let pageSize = page.size(forNumberOfPages: dataList.count)
page.frame = CGRect(x: 0, y: imageView.frame.maxY - pageSize.height, width: pageSize.width, height: pageSize.height)
page.center.x = imageView.frame.width / 2
view.addSubview(imageView)
view.addSubview(page)
}
從左往右滑動的響應事件
func tapRightAction() {//從左往右滑動
//使用CA轉(zhuǎn)場動畫來改變方式
let transition = CATransition()
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromLeft
//這句話也就是最重要的衙传，根據(jù)selectedIndex的值來確定是否已經(jīng)到最左側(cè)决帖，如果到最左側(cè)，將selectedIndex重置為10
selectedIndex = selectedIndex <= 0 ? 10 : selectedIndex - 1
page.currentPage = selectedIndex
imageView.image = UIImage(named: "\(dataList[selectedIndex])")
imageView.layer.add(transition, forKey: "right")
}
從右往左滑動的響應事件
func tapRightAction() {//從左往右滑動
//使用CA轉(zhuǎn)場動畫來改變方式
let transition = CATransition()
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromRight
//這句話也就是最重要的粪牲，根據(jù)selectedIndex的值來確定是否已經(jīng)到最左側(cè)古瓤，如果到最右側(cè)，將selectedIndex重置為0
selectedIndex = selectedIndex >= 10 ? 0 : selectedIndex + 1
page.currentPage = selectedIndex
imageView.image = UIImage(named: "\(dataList[selectedIndex])")
imageView.layer.add(transition, forKey: "left")
}
Touches基本同理腺阳，再此不一一贅述了
總結(jié)
- 使用UISwipeGestureRecognizer無需考慮UIImageView的復用問題落君，因為只有一個imaegView
- 輪播圖分為手動和自動，本文為手動控制沒有加timer亭引，如果改為自動绎速，只需要在在定時調(diào)用方法即可
- 使用UISwipeGestureRecognizer實現(xiàn)，手指滑動一點點焙蚓，再劃回來纹冤，這個暫時沒有好的解決方式，但是可以使用Touches的相關(guān)方法解決购公，因為手指離開才回去調(diào)用End方法
小尾巴~~~
為什么很多人不用這種方法萌京，坐等各位大神回復，個人覺得沒有什么問題宏浩，完全可以精仿
demo地址
github
