【移動應(yīng)用開發(fā)技術(shù)】Android高級圖片滾動控件實(shí)現(xiàn)3D版圖片輪播器

【移動應(yīng)用開發(fā)技術(shù)】Android高級圖片滾動控件實(shí)現(xiàn)3D版圖片輪播器

大家好，好久不見了，最近由于工作特別繁忙，已經(jīng)有一個多月的時間沒寫博客了，我也是深感慚愧。那么今天的這篇既然是闊別了一個多月的文章，當(dāng)然要帶來更加給力點(diǎn)的內(nèi)容了，那么話不多說，趕快進(jìn)入到今天的正題吧。說到圖片輪播器，很多的Android應(yīng)用中都會帶有這個功能，比如說網(wǎng)易新聞、淘寶等。最新我們公司的一款應(yīng)用也加入了這個功能，并且在圖片輪播的基礎(chǔ)上還增加了三維立體的效果，但比較遺憾的是，整體效果并不理想，用戶體驗(yàn)性比較糟糕。因此，我就花了點(diǎn)時間去編寫了一個效果更好的3D圖片輪播器，自我感覺還是比較滿意的，這里果斷寫一篇博客來分享給大家。首先來介紹一下實(shí)現(xiàn)原理吧，傳統(tǒng)的圖片輪播器在一個界面上只會顯示一張圖片，要用手指進(jìn)行左右滑動才能看到其它的圖片。這里我們將思維發(fā)散一下，允許在一個界面上同時顯示三張圖片，再通過Camera的方式對左右的兩張圖進(jìn)行3D旋轉(zhuǎn)，這樣就能制作出一種立體的圖片輪播器了，原理示意圖如下所示：對圖片進(jìn)行立體操作還是要使用到Camera技術(shù)，如果你對這個技術(shù)還不太熟悉，可以到網(wǎng)上搜一些相關(guān)資料，或者參考我前面的一篇文章：Android實(shí)現(xiàn)中軸旋轉(zhuǎn)特效Android制作別樣的圖片瀏覽器。那么我們現(xiàn)在就開始動手吧，首先新建一個Android項(xiàng)目，起名叫做ImageSwitchViewTest。然后新建一個Image3DView繼承自ImageView，它會繼承ImageView的所有屬性，并且加入3D旋轉(zhuǎn)的功能，代碼如下所示：這段代碼比較長，也比較復(fù)雜的，我們慢慢來分析。在Image3DView的構(gòu)造函數(shù)中初始化了一個Camera和Matrix對象，用于在后面對圖片進(jìn)行3D操作。然后在initImageViewBitmap()方法中初始化了一些必要的信息，比如對當(dāng)前圖片進(jìn)行截圖，以用于后續(xù)的立體操作，得到當(dāng)前圖片的寬度等。然后還提供了一個setRotateData()方法，用于設(shè)置當(dāng)前圖片的下標(biāo)和滾動距離，有了這兩樣數(shù)據(jù)就可以通過computeRotateData()方法來計算旋轉(zhuǎn)角度的一些數(shù)據(jù)，以及通過isImageVisible()方法來判斷出當(dāng)前圖片是否可見了，具體詳細(xì)的算法邏輯你可以閱讀代碼來慢慢分析。接下來當(dāng)圖片需要繪制到屏幕上的時候就會調(diào)用onDraw()方法，在onDraw()方法中會進(jìn)行判斷，如果當(dāng)前圖片可見就調(diào)用computeRotateData()方法來計算旋轉(zhuǎn)時所需要的各種數(shù)據(jù)，之后再通過Camera和Matrix來執(zhí)行旋轉(zhuǎn)操作就可以了。接著新建一個Image3DSwitchView繼承自ViewGroup，代碼如下所示：

這段代碼也比較長，我們來一點(diǎn)點(diǎn)進(jìn)行分析。在onLayout()方法首先要判斷子視圖個數(shù)是不是大于等于5，如果不足5個則圖片輪播器無法正常顯示，直接return掉。如果大于等于5個，就會通過一個for循環(huán)來為每個子視圖分配顯示的位置，而每個子視圖都是一個Image3DView，在for循環(huán)中又會調(diào)用Image3DView的initImageViewBitmap()方法來為每個控件執(zhí)行初始化操作，之后會調(diào)用refreshImageShowing()方法來刷新圖片的顯示狀態(tài)。接著當(dāng)手指在Image3DSwitchView控件上滑動的時候就會進(jìn)入到onTouchEvent()方法中，當(dāng)手指按下時會記錄按下時的橫坐標(biāo)，然后當(dāng)手指滑動時會計算出滑動的距離，并調(diào)用scrollBy()方法來進(jìn)行滾動，當(dāng)手指離開屏幕時會距離當(dāng)前滑動的距離和速度來決定，是滾動到下一張圖片，還是滾動到上一張圖片，還是滾動回原圖片。分別調(diào)用的方法是scrollToNext()、scrollToPrevious()和scrollBack()。在scrollToNext()方法中會先計算一下還需滾動的距離，然后進(jìn)行一下邊界檢查，防止當(dāng)前圖片的下標(biāo)超出合理范圍，接著會調(diào)用beginScroll()方法來進(jìn)行滾動。在beginScroll()方法中其實(shí)就是調(diào)用了Scroller的startScroll()方法來執(zhí)行滾動操作的，當(dāng)滾動結(jié)束后還會調(diào)用requestLayout()方法來要求重新布局，之后onLayout()方法就會重新執(zhí)行，每個圖片的位置也就會跟著改變了。至于scrollToPrevious()和scrollBack()方法的原理也是一樣的，這里就不再重復(fù)分析了。那么在onLayout()方法的最后調(diào)用的refreshImageShowing()方法到底執(zhí)行了什么操作呢？其實(shí)就是遍歷了一下每個Image3DView控件，然后調(diào)用它的setRotateData()方法，并把圖片的下標(biāo)和滾動距離傳進(jìn)去，這樣每張圖片就知道應(yīng)該如何進(jìn)行旋轉(zhuǎn)了。另外一些其它的細(xì)節(jié)就不在這里講解了，注釋寫的還是比較詳細(xì)的，你可以慢慢地去分析和理解。那么下面我們來看下如何使用Image3DSwitchView這個控件吧，打開或新建activity_main.xml作為程序的主布局文件，代碼如下所示：可以看到，這里我們引入了一個Image3DSwitchView控件，然后在這個控件下面又添加了7個Image3DView控件，每個Image3DView其實(shí)就是一個ImageView，因此我們可以通過android:src屬于給它指定一張圖片。注意前面也說過了，Image3DSwitchView控件下的子控件必須大于等于5個，不然將無法正常顯示。代碼到這里就寫得差不多了，現(xiàn)在運(yùn)行一下程序就可以看到一個3D版的圖片輪播器，使用手指進(jìn)行滑動可以查看更多的圖片，如下圖所示：怎么樣？效果還是非常不錯的吧！除此之外，Image3DSwitchView中還提供了setCurrentImage()方法和setOnImageSwitchListener()方法，分別可用于設(shè)置當(dāng)前顯示哪張圖片