1. 程式人生 > >iOS開發之三個Button實現圖片無限輪播(參考手機淘寶,Swift版)

iOS開發之三個Button實現圖片無限輪播(參考手機淘寶,Swift版)

這兩天使用Reveal工具檢視"手機淘寶"App的UI層次時,發現其圖片輪播使用了三個UIButton的複用來實現的圖片迴圈無縫滾動。於是乎就有了今天這篇部落格,看到“手機淘寶”這個幻燈片的UI層級時,就想要動手使用三個Button來實現一下,當然本篇部落格使用是Swift語言,思路就是使用三個Button進行圖片無限輪播。之前發過兩篇關於圖片輪播的部落格,一個是沒有使用ImageView複用的,一個是使用兩張ImageView進行復用來實現圖片輪播的,都是使用的Objective-C實現的,並在github上進行了程式碼分享。

本篇部落格就是介紹如何去一步步的封裝這個三個Button的無限輪播的元件的。在實現時將該無限輪播的元件進行了封裝,需要你在例項化該元件後,傳入一個存放圖片地址的陣列

,陣列中可以是本地圖片的名字,也可以是一個網路圖片的地址。如果是網路圖片的地址,元件中會使用NSRULSession並採用合適的快取策略從網路載入圖片,載入完後在我們的元件上進行顯示。廢話少說,進入我們今天的主題。

今天的部落格完全是個人興趣愛好,也不是公司中專案要使用的緣故才去實現的。就是看到了淘寶中的輪播圖,從UI層級上感覺這樣可以實現,於是乎就開啟Xcode,建立個Swift工程實現一把,過程還是蠻愉快的。當然今天封裝元件的名稱是以公司的名稱首字母做的字首了,這也便於在以後的工作中遇到該問題直接拿過來就用呢。

一、對“手機淘寶”UI層次的簡單分析

下方截圖就是當時我用Reveal

工具檢視的手機淘寶App的UI層級,下方只是幻燈片的部分。下方整個頁面是使用UICollectionView來實現的了,下方的幻燈片所在的UIScrollView就放在UICollectionView上的一個Cell上。當然這不是我們今天的重點,我們將目光轉移到左邊紅框中的數學層級上。可以明顯的看出UIScrollView上貼了三個UIButton,而每個UIButton上又貼了一個UIImageView

需要注意的一點是你看到UIButton是三個Button的中間一個,從下面UI檢視中我們不難分析出,無論當前顯示的是第幾張圖片,你看到的永遠是中間Button上顯示的圖片。也就是將要顯示的圖片放到中間的Button上,左邊的Button存放上一張圖片,右邊的Button存放下一張圖片。當用戶左劃或者右劃後,我們要做的事情就是將中間按鈕放到可視區,並且設定成要顯示的圖片,當然左右兩個Button都得設定成相應的圖片,便於使用者下次移動。當然這只是我的個人猜測,上面這種思路使用程式碼來實現是完全可行的,並且可以實現無迴圈無縫滾動了。

當然,上面說的原理比較簡單,具體使用程式碼實現起來還是需要許多細節的。比如使用者滑動時定時器的掛起和喚醒,使用者左右滑動方向的記錄,便於自動輪播時的方向與使用者上次滑動的方向一致,非同步載入網路請求圖片,載入後顯示在相應的Button上,通過Closure回調出使用者點選事件可當前圖片的索引資訊等等需要注意的細節。敲程式碼也有幾年時間了,有一點感觸挺深的就是“說和做”完全是兩碼事,也就是你有思路和你把你的思路用程式碼實現,這是完全不同的概念。當然正確的思路固然重要,但是不去實現再好的思路也是枉費,實踐出真知嗎。說這麼多,有回到了說與做的問題上,這話題就不多討論了,高執行力,高自制力好處是多多的。言歸正傳,回到今天的主題。

  

二、從“原理圖”中來看今天輪播的主題

下方就是今天要實現的輪播元件的原理圖,思路就是這麼個思路,要實現起來還得靠程式碼往上摞呢。下方解析圖是以輪播5張圖片為例。初始化狀態是你看到的是第一張圖片,第一張圖片位於三個Button的中間,然後左邊就是最後一張圖片,右邊是第二張圖片。如果使用者想右滑動顯示的第二張圖片(對應著下方的第一步),當第二張圖片已經完全顯示出來後,我們要做的第一件事情就是將使用者移動的位置進行復位,也就是將第二個Button移動到顯示的位置,然後設定按鈕上顯示相應的圖片。第一個按鈕就顯示當前圖片的前一張圖片,如果當前顯示的是第一張圖片,那麼第一個按鈕上就顯示最後一張圖片。第三個按鈕就顯示當前圖片的下一張圖片,如果當前顯示的圖片是最後一張圖片的話,那麼第三個按鈕上就顯示第一張圖片。這樣就可以圖片輪播了。

  

三、該自定義控制元件的檢視層級

下圖就是我們按照上面的思路,使用ScrollView上新增3個Button來實現的圖片輪播,無縫滾動的效果還是蠻OK的。在下方執行效果中美女圖片是從本地載入的,而風景圖片是使用NSURLSession和GCD的東西並行非同步的從網路獲取的,獲取完後再載入到相應Button的ImageView上。下方就是我們本篇部落格相關Demo的執行效果,單從效果上來看,與之前所釋出的圖片輪播沒有什麼區別,但是其內部實現機制還是有較大區別的。接下來就逐步的看一下程式碼實現。

  

上面是執行效果,下方是UI的層級。當然也是用我們強大的Reveal來檢視的了,下方紅框中就是我們圖片輪播的檢視層級。該檢視層級與“手機淘寶”上是一致的,都是在UIScrollView上貼了三個Button,然後在每個Button上貼了一個ImageView。層級比較簡單,而你看到的當然是中間Button上的ImageView了,更多細節請看下圖。

  

四、程式碼實現

執行效果看完了,UI層級結構也看完了,那麼接下來就到了我們程式碼實現的時刻了。下方從元件的呼叫方式入手,逐步的去看一下上述效果是如何實現的。

1.上述元件的呼叫方式

下方程式碼段就是上述元件的例項化和呼叫方式,首先進行初始化,然後將該元件新增到父檢視上。之後將要顯示的圖片陣列imagesNameArray傳入元件中,最後設定一下元件的閉包回撥即可,該回調將每個按鈕點選的時間回撥給元件的使用者,該Closure的引數是當前點選按鈕上所顯示的Image的索引,說白了也就是你當前點選的第幾張圖片。

  

在呼叫元件時,傳入給元件的引數是一個數組,下方程式碼就是我們初始化imagesNameArray的函式。從該程式碼段中我們不難看出,該陣列中儲存的有本地圖片的名字,也有UIImage的物件,也有網路圖片的URL。將含有三種元素的陣列傳給我們的元件例項,這些陣列中的資源就可以按照陣列中的順序依次的迴圈輪播了。

  

2.上述元件的核心程式碼

元件呼叫方式還是蠻簡單的,看完呼叫方式,接下來來看一下具體的程式碼實現。下方是我們元件中比較核心的實現部分。

(1).非同步載入網路圖片

下方程式碼段就是遍歷我們的ImagesNameArray,找出該陣列中所有的網路圖片的URL,每找到一個URL就開啟一個執行緒來請求該地址中的圖片。下方的queue是並行佇列,此處當然是並行佇列的非同步執行了。關於GCD的東西,請參考之前的部落格《》。

  

下方程式碼段就是requestImage()方法中的內容了,該方法中使用NSSession並配置相應的快取策略來請求網路圖片。載入完圖片後,將ImagesNameArray中相應的URL替換成相應的UIImage物件,然後在主執行緒中更新UI顯示相應的圖片,具體程式碼如下所示。

  

(2)moveImageView()方法的實現

該方法負責將按鈕歸位與賦值,該方法對應著上述原理圖的第二和第三步。上面網路請求完一張圖片後就會呼叫該方法更新UI。該方法的具體實現如下所示。下方程式碼中首先獲取當前顯示的頁數,也就是當前顯示的Image的索引,然後將第二個Button移動到可視區,最後呼叫setButtonImage()函式將每個Button上的ImageView設定成相應的Image。

  

(3)、定時器的實現

圖片要隔段時間自動輪播,此處我們使用的是dispatch_source中的定時器型別來實現的自動輪播。下方就是我們定時器的實現,如下所示,程式碼比較簡單,在此就不做過多的贅述了,建立完定時器我們不要忘了對定時器的source進行喚醒即可。

  

當用戶進行手動切換時,我們要對定時器進行相應的掛起和喚醒操作。也就是說當用戶開始滑動時我們要對定時器進行掛起,當用戶滑動結束後要對定時器進行喚醒。當然這些都是在ScrollView相應的代理方法中進行處理的,具體如下所示:

  

(4)、滑動結束後更新按鈕的位置和圖片

無論是手動滑動,還是使用定時器滑動,滑動結束後我們都需要更新一下按鈕的位置和按鈕上要顯示的圖片。所以我們還需要使用到UIScrollView上的一個代理方法,那就是scrollViewDidScroll(),在該代理方法中我們呼叫了moveImage()方法來更新Button的位置和Button上ImageView要顯示的圖片資訊。沒有這個方法,圖片就動不起來了,具體程式碼如下所示:

  

上述是該Demo的核心程式碼,更為詳細的程式碼請移步於github: , 因本篇部落格篇幅有限,更具體的細節在此就不做過多贅述了,Demo已在上述github上進行分享。