效果圖

首先感謝右側(cè)鏈接代碼中的圖片素材??~大神使用UICollectionView實(shí)現(xiàn)的輪播圖

據(jù)說此三方好多好多人用強(qiáng)大的第三方框架SDCycleScrollView

輪播圖的實(shí)現(xiàn)方式

1. 使用UIScrollView通過contentSize設(shè)置UIImageView的展示預(yù)處理
2. 使用UICollectionView通過設(shè)置item
3. 使用UISwipeGestureRecognizeror或者TouchesBegan等方法

網(wǎng)絡(luò)上大部分是使用UIScrollView配合三個(gè)或者兩個(gè)UIImageView來實(shí)現(xiàn)的輪播圖，就再想可不可以使用一個(gè)UIImgeView實(shí)現(xiàn)，從而第三種實(shí)現(xiàn)方式也就誕生了，雖然不是特別實(shí)用，但是也算是一種簡單思維

UISwipeGestureRecognizeror（清掃手勢）邏輯

1. 通過UIImageView添加向左向右的輕掃手勢
2. 當(dāng)觸發(fā)輕掃手勢的響應(yīng)事件時(shí)，重新設(shè)置Index
3. 使用CATransition的Type（Push）和SubType（Left/Right）來進(jìn)行實(shí)現(xiàn)對(duì)應(yīng)的向左向右的轉(zhuǎn)場動(dòng)畫
4. 更改完Index時(shí)，在CATransition動(dòng)畫中從img數(shù)組中取出對(duì)應(yīng)圖片并賦值給UIImageView
5. 賦值圖片的同時(shí)更改pageControl的currentPage來實(shí)現(xiàn)輪播圖的精仿

TouchesBegan等方法的邏輯

1. 寫一個(gè)UIImageView的子類，并在其中實(shí)現(xiàn)Began、Move、End方法
2. 和使用UIBezierPath繪制畫板同理，首先在Touch等方法中獲取對(duì)應(yīng)的點(diǎn)
3. 根據(jù)點(diǎn)的位置改變來判斷向左滑還是向右滑
4. 使用CATransition的Type（Push）和SubType（Left/Right）來進(jìn)行實(shí)現(xiàn)對(duì)應(yīng)的向左向右的轉(zhuǎn)場動(dòng)畫
5. 更改完Index時(shí)，在CATransition動(dòng)畫中從img數(shù)組中取出對(duì)應(yīng)圖片并賦值給UIImageView
6. 賦值圖片的同時(shí)更改pageControl的currentPage來實(shí)現(xiàn)輪播圖的精仿

主要以UISwipeGestureRecognizeror為例子??

UISwipeGestureRecognizeror（清掃手勢）相關(guān)代碼

一些懶加載，注釋已經(jīng)標(biāo)明清楚

var selectedIndex = 0//當(dāng)前圖片

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)
    
}

從左往右滑動(dòng)的響應(yīng)事件

func tapRightAction() {//從左往右滑動(dòng)
    
    //使用CA轉(zhuǎn)場動(dòng)畫來改變方式
    
    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")
    
}

從右往左滑動(dòng)的響應(yīng)事件

func tapRightAction() {//從左往右滑動(dòng)

    //使用CA轉(zhuǎn)場動(dòng)畫來改變方式
    
    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é)

1. 使用UISwipeGestureRecognizer無需考慮UIImageView的復(fù)用問題，因?yàn)橹挥幸粋€(gè)imaegView
2. 輪播圖分為手動(dòng)和自動(dòng)，本文為手動(dòng)控制沒有加timer，如果改為自動(dòng)，只需要在在定時(shí)調(diào)用方法即可
3. 使用UISwipeGestureRecognizer實(shí)現(xiàn)，手指滑動(dòng)一點(diǎn)點(diǎn)，再劃回來，這個(gè)暫時(shí)沒有好的解決方式，但是可以使用Touches的相關(guān)方法解決，因?yàn)槭种鸽x開才回去調(diào)用End方法

小尾巴~~~

為什么很多人不用這種方法，坐等各位大神回復(fù)，個(gè)人覺得沒有什么問題，完全可以精仿

demo地址
github