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

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

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

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