swift 輪播圖無限滾動(dòng) 控件的封裝

swift 輪播圖無限滾動(dòng) 控件的封裝

輪播圖動(dòng)畫1.gif

這篇文章主要記錄自己是怎么一步一步封裝一個(gè) 輪播圖, 記錄了整個(gè)過程和遇到的一些問題和解決辦法.

我是在 oc 項(xiàng)目中 用swift 寫了一個(gè)輪播圖
如何在 oc 項(xiàng)目中
使用 swift 文件 可以看我這篇文章 OC 中 使用 swfit 代碼.

這篇文章給了實(shí)現(xiàn)輪播圖的四種思路, 嗯, 我選擇了使用 collectionView 這個(gè)思路

下面的思路和代碼都是來自于 使用 collectionView 實(shí)現(xiàn) 無限輪播圖

  • 使用 collectionView 實(shí)現(xiàn)輪播圖

最初的思路, 創(chuàng)建collectionView 有一個(gè)section , section中有 n 個(gè)items.
這里面有個(gè)問題, 就是當(dāng)滑動(dòng)到最后一個(gè)items 時(shí) 怎么回到第一個(gè)items 實(shí)現(xiàn)無限滑動(dòng)?

換一種思路, 設(shè)置 3 個(gè) section
默認(rèn)顯示中間那一組(第2組)的 section
當(dāng)滑動(dòng)到 第2組的最后一個(gè) items 時(shí), 再次滾動(dòng)顯示第3組的第一個(gè)items
當(dāng)在第3組的第一個(gè)items 繼續(xù)往后滾動(dòng)時(shí), 顯示第2組的第2個(gè)item , 然后保持在第2組中往后滾動(dòng), 直到最后一個(gè)items 重復(fù)上面的步驟.
無限滾動(dòng)代碼實(shí)現(xiàn).

//MARK: - selector event 下一頁
    @objc private func nextPage(){
        //print("下一頁")
        // 獲取當(dāng)前 inexPath
        let currentIndexPath = self.collectionView?.indexPathsForVisibleItems.last!
        // 獲取中間組 indexPath (所有的圖片都是最中間的那一組 為主)
        let middleIndexPath = IndexPath(item: (currentIndexPath?.item)!, section: 1)
        
        // 直接顯示中間那一組
        collectionView?.scrollToItem(at: middleIndexPath, at: .left, animated: false)
        
        // 要?jiǎng)赢嬇矂?dòng)的下一個(gè) 圖片
        var nextItem = middleIndexPath.item + 1
        var nextSection = middleIndexPath.section
        if nextItem==imageUrls?.count{
            // 當(dāng)最后一張圖片時(shí), 要回到第一個(gè)圖片顯示. 這里借用了第二組的第一個(gè) item
            nextItem = 0
            nextSection += 1
        }
        let nextIndexPath = IndexPath(item: nextItem, section: nextSection)
        //pageControl?.currentPage = nextItem
        collectionView?.scrollToItem(at: nextIndexPath, at: .left, animated: true)
    }
  • 方法collectionView?.scrollToItem(at: middleIndexPath, at: .left, animated: false) 的理解
// 這句代碼, 要理解 animated 參數(shù), 
// 當(dāng) animated=true 時(shí)候, 有動(dòng)畫效果.
// 當(dāng) animated=false , 沒有動(dòng)畫效果, 直接就出現(xiàn) 要挪動(dòng)到的 idnexPath
collectionView?.scrollToItem(at: middleIndexPath, at: .left, animated: false)
  • 關(guān)于手動(dòng)拖動(dòng)滾動(dòng), 有兩種方式實(shí)現(xiàn)效果.
      1. 使用代理 scrollViewWillEndDragging 這里要做大量的判斷才行
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        
        let currentIndexPath = collectionView?.indexPathsForVisibleItems.last
        
        // 防止 手動(dòng)滑動(dòng)圖片到 第一個(gè)或者最后一個(gè) 不循環(huán)滑動(dòng)的問題
        
        // 向左滑
        if velocity.x > 0 {
            if currentIndexPath?.section == (maxSections - 1) {
                let nextIndexPath = IndexPath(item: (currentIndexPath?.item)!, section: 1)
                collectionView?.scrollToItem(at: nextIndexPath, at: .left, animated: false)
            }
        }else{
            
        // 向右滑
            if currentIndexPath!.section == 0 {
                let nextIndexPath = IndexPath(item: currentIndexPath!.item, section: 1)
                collectionView?.scrollToItem(at: nextIndexPath, at: .right, animated: false)
            }
        }
    }

 - 2. 使用代理 `scrollViewDidEndDecelerating` 這里只有簡單的一句代碼就可以實(shí)現(xiàn)

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        collectionView?.scrollToItem(at: IndexPath(item: (pageControl?.currentPage)!, section: 1), at: .left, animated: false)
    }
  • scrollViewDidEndDecelerating 和 scrollViewDidEndScrollingAnimation 的區(qū)別
  • collectionView的內(nèi)容向下偏移了一段位移

百度, 得知, 要在控制器中添加這句代碼 self.automaticallyAdjustsScrollViewInsets = NO;
automaticallyAdjustsScrollViewInsets 默認(rèn)是 YES 這時(shí)候控制器會(huì)自動(dòng)把 [scrollView , tableview, collectionView] 中的內(nèi)容向自適應(yīng)挪動(dòng)一段距離, 這樣可以防止遮住 stateBar navigationBar toolBar SearchBar等. 一般我們都是自己管理collectionView的顯示范圍, 不需要自動(dòng)調(diào)整

關(guān)于 swift 三方庫的使用

  • OC項(xiàng)目 中 在swift 文件中 使用 swift 三方庫
    直接 import 三方庫
    就可以使用

  • OC 項(xiàng)目中 在 oc 文件中 使用 swift 三方庫
    要在 oc 項(xiàng)目中 引入文件 三方庫名-Swift.h 文件, 這個(gè)文件是系統(tǒng)自動(dòng)生成的.
    這樣就可以在 OC 文件中調(diào)用 swift 三方庫的方法了, 系統(tǒng)會(huì)自動(dòng)把swift 方法映射為 oc 方法.
    不過, 某些swift 特性不能轉(zhuǎn)化為 oc , 故 很多swift 方法不會(huì)映射為 oc 方法, 所以有一部分swfit方法 oc 文件不能使用
    更多詳細(xì)介紹看這篇文章 Swift和Objective-C混編的注意啦

Snapkit

swift 中使用自動(dòng)布局庫 Snapkit (跟oc 中的 masonry 用法相似)
參考文章 Swift編程（六）：Snapkit的啟示錄

使用過程:
pod 集成Snapkit : pod 'SnapKit', '~> 3.2.0'

在oc 自動(dòng)布局庫 masonry 中, 子控件必須全部都加入到父視圖之后, 才對(duì)每一個(gè)子視圖進(jìn)行布局
在 swift 'Snapkit' 中好像不需要, 加入父視圖后, 可以立即進(jìn)行布局
```
pageControl!.snp.makeConstraints { (make) in
        make.left.right.equalTo(0)
        make.bottom.equalTo(-20)
        make.height.equalTo(30)
    }
```

Kingfisher

開始添加網(wǎng)絡(luò)圖片
輪播圖 , 有個(gè)本地默認(rèn)圖片, 和網(wǎng)絡(luò)加載后的圖片
當(dāng)網(wǎng)絡(luò)加載還沒有完成時(shí), 顯示本地圖片, 當(dāng)網(wǎng)絡(luò)加載結(jié)束后, 用網(wǎng)絡(luò)圖片代替本地圖片

swfit 中 網(wǎng)絡(luò)圖片框架 Kingfisher 竟然是喵神的作品,
開始學(xué)習(xí) Kingfisher 的用法, 先簡單的接觸, 會(huì)加載網(wǎng)絡(luò)圖片就好, 等手頭的項(xiàng)目結(jié)束后再去仔細(xì)讀源碼

學(xué)習(xí)步驟.

  • pod 集成 Kingfisher : pod 'Kingfisher', '~> 3.10.4'

網(wǎng)絡(luò)圖片素材:
http://61.144.248.2:8085/carManager/html/ueditor/jsp/upload/info/2017/08/11/pic_1502416479862.jpg
http://61.144.248.2:8085/carManager/html/ueditor/jsp/upload/info/2017/08/10/pic_1502331229612.jpg
http://61.144.248.2:8085/carManager/html/ueditor/jsp/upload/info/2017/08/07/pic_1502085582890.jpg
http://61.144.248.2:8085/carManager/html/ueditor/jsp/upload/info/2017/08/07/pic_1502085108072.jpg
http://61.144.248.2:8085/carManager/html/ueditor/jsp/upload/info/2017/08/04/pic_1501819284994.jpg
http://61.144.248.2:8085/carManager/html/ueditor/jsp/upload/info/2017/07/31/pic_1501466845618.jpg

這里只需要用到 下面的方法就好


cell.bannerImage?.kf.setImage(with: <#T##Resource?#>, placeholder: <#T##Image?#>, options: <#T##KingfisherOptionsInfo?#>, progressBlock: <#T##DownloadProgressBlock?##DownloadProgressBlock?##(Int64, Int64) -> ()#>, completionHandler: <#T##CompletionHandler?##CompletionHandler?##(Image?, NSError?, CacheType, URL?) -> ()#>)

這個(gè)方法里, 我們只需要傳入?yún)?shù),
Resource: URL 要緩存的網(wǎng)絡(luò)圖片
placeholder: UIimage 站位圖片
options: 操作類型 數(shù)組 [KingfisherOptionsInfoItem]
progressBlock(receivedSize, totalSize) 圖片下載過程回調(diào)
completionHandler(image,error,type,url) 圖片下載完成 回調(diào)
這個(gè)方法, 和 SDWebimage 的圖片緩存方法差不多.

  • 自定義 初始化方法,
    一直沒有走出 OC 的語言區(qū)域, 導(dǎo)致自定義初始化方法失敗. 
    //失敗的自定義初始化方法:
initWithArr(imageArr:[UIImage], titleArr:[String]){

}

// 正確的自定義初始化方法
convenience init(imageArr:[UIImage], titleArr:[String]){

}
  • 輪播圖 點(diǎn)擊回調(diào)事件, 打算用代理來寫 邏輯更清晰.
    將點(diǎn)擊事件使用代理的方式傳遞出去.
    注意: swift 中的協(xié)議前面需要加上 @objc(協(xié)議名字), 如下面的例子, 只有這樣才能在 oc 文件中使用該代理
@objc(BannerViewDelegate)
public protocol BannerViewDelegate:NSObjectProtocol{

全部封裝完畢, 當(dāng)我們項(xiàng)目需要用到 輪播圖模塊時(shí) ,只需要把文件引入, 在工程中添加下面的代碼就好.

BannerView *banner = [[BannerView alloc] initWithFrame:frame viewController:self  imageArr:self.imageUrlArr placeHoldImage:placeImage titleArr:self.titleArr];
    [self.view addSubview:banner];

為什么要單獨(dú)封裝 一個(gè)輪播器出來呢.

封裝意味著 我的業(yè)務(wù)邏輯不必被實(shí)現(xiàn)細(xì)節(jié)所污染

把業(yè)務(wù)邏輯和功能實(shí)現(xiàn)細(xì)節(jié)分離開. 降低了程序的耦合性.

demo 暫時(shí)先不放出來了, 大家可以自己封裝一個(gè)玩一玩,
如果需要救急的話, 私信我, 給你扔demo

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 頭一道閃電撕裂天幕，照亮了凌晨兩點(diǎn)的夜空，仿佛掘開了天河的大堤，雨水嘩啦啦一股腦兒瀉下。緊接著，當(dāng)空一聲霹靂撼天動(dòng)...
    綠蘿寶貝閱讀 848評(píng)論 10贊 9
  • 如今，微信運(yùn)營在每個(gè)企業(yè)都扮演著至關(guān)重要的作用，從客服、內(nèi)容傳遞、企業(yè)形象建立，到促銷、產(chǎn)品的推廣，微信營銷都扮演...
    20a9dabc3dff閱讀 944評(píng)論 0贊 3
  • 但凡來到一大城市，若沒有去看看當(dāng)?shù)氐穆糜尉包c(diǎn)、風(fēng)景名勝那可真算是白來了。 這不，好不容易來北京一次，不看看天安門、...
    百古風(fēng)流閱讀 174評(píng)論 0贊 0
  • 發(fā)小昨晚給我打來電話，她和W先生在上海的小窩終于布置好了，房子不是什么黃金地段，面積也不是很大，但是他們總算在上海...
    影丸閱讀 330評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容