Android高級(jí)圖片滾動(dòng)控件實(shí)現(xiàn)3D版圖片輪播器

更新時(shí)間：2018年05月11日 15:48:38 作者：guolin

這篇文章主要介紹了Android高級(jí)圖片滾動(dòng)控件實(shí)現(xiàn)3D版圖片輪播器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

大家好，好久不見(jiàn)了，最近由于工作特別繁忙，已經(jīng)有一個(gè)多月的時(shí)間沒(méi)寫博客了，我也是深感慚愧。那么今天的這篇既然是闊別了一個(gè)多月的文章，當(dāng)然要帶來(lái)更加給力點(diǎn)的內(nèi)容了，那么話不多說(shuō)，趕快進(jìn)入到今天的正題吧。

說(shuō)到圖片輪播器，很多的Android應(yīng)用中都會(huì)帶有這個(gè)功能，比如說(shuō)網(wǎng)易新聞、淘寶等。最新我們公司的一款應(yīng)用也加入了這個(gè)功能，并且在圖片輪播的基礎(chǔ)上還增加了三維立體的效果，但比較遺憾的是，整體效果并不理想，用戶體驗(yàn)性比較糟糕。因此，我就花了點(diǎn)時(shí)間去編寫了一個(gè)效果更好的3D圖片輪播器，自我感覺(jué)還是比較滿意的，這里果斷寫一篇博客來(lái)分享給大家。

首先來(lái)介紹一下實(shí)現(xiàn)原理吧，傳統(tǒng)的圖片輪播器在一個(gè)界面上只會(huì)顯示一張圖片，要用手指進(jìn)行左右滑動(dòng)才能看到其它的圖片。這里我們將思維發(fā)散一下，允許在一個(gè)界面上同時(shí)顯示三張圖片，再通過(guò)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)在就開(kāi)始動(dòng)手吧，首先新建一個(gè)Android項(xiàng)目，起名叫做ImageSwitchViewTest。

然后新建一個(gè)Image3DView繼承自ImageView，它會(huì)繼承ImageView的所有屬性，并且加入3D旋轉(zhuǎn)的功能，代碼如下所示：

public class Image3DView extends ImageView { 
 /** 
 * 旋轉(zhuǎn)角度的基準(zhǔn)值 
 */ 
 private static final float BASE_DEGREE = 50f; 
 /** 
 * 旋轉(zhuǎn)深度的基準(zhǔn)值 
 */ 
 private static final float BASE_DEEP = 150f; 
 private Camera mCamera; 
 private Matrix mMaxtrix; 
 private Bitmap mBitmap; 
 /** 
 * 當(dāng)前圖片對(duì)應(yīng)的下標(biāo) 
 */ 
 private int mIndex; 
 /** 
 * 在前圖片在X軸方向滾動(dòng)的距離 
 */ 
 private int mScrollX; 
 /** 
 * Image3DSwitchView控件的寬度 
 */ 
 private int mLayoutWidth; 
 /** 
 * 當(dāng)前圖片的寬度 
 */ 
 private int mWidth; 
 /** 
 * 當(dāng)前旋轉(zhuǎn)的角度 
 */ 
 private float mRotateDegree; 
 /** 
 * 旋轉(zhuǎn)的中心點(diǎn) 
 */ 
 private float mDx; 
 /** 
 * 旋轉(zhuǎn)的深度 
 */ 
 private float mDeep; 
 
 public Image3DView(Context context, AttributeSet attrs) { 
 super(context, attrs); 
 mCamera = new Camera(); 
 mMaxtrix = new Matrix(); 
 } 
 /** 
 * 初始化Image3DView所需要的信息，包括圖片寬度，截取背景圖等。 
 */ 
 public void initImageViewBitmap() { 
 if (mBitmap == null) { 
 setDrawingCacheEnabled(true); 
 buildDrawingCache(); 
 mBitmap = getDrawingCache(); 
 } 
 mLayoutWidth = Image3DSwitchView.mWidth; 
 mWidth = getWidth() + Image3DSwitchView.IMAGE_PADDING * 2; 
 } 
 /** 
 * 設(shè)置旋轉(zhuǎn)角度。 
 * 
 * @param index 
 * 當(dāng)前圖片的下標(biāo) 
 * @param scrollX 
 * 當(dāng)前圖片在X軸方向滾動(dòng)的距離 
 */ 
 public void setRotateData(int index, int scrollX) { 
 mIndex = index; 
 mScrollX = scrollX; 
 } 
 /** 
 * 回收當(dāng)前的Bitmap對(duì)象，以釋放內(nèi)存。 
 */ 
 public void recycleBitmap() { 
 if (mBitmap != null && !mBitmap.isRecycled()) { 
 mBitmap.recycle(); 
 } 
 } 
 @Override 
 public void setImageResource(int resId) { 
 super.setImageResource(resId); 
 mBitmap = null; 
 initImageViewBitmap(); 
 } 
 @Override 
 public void setImageBitmap(Bitmap bm) { 
 super.setImageBitmap(bm); 
 mBitmap = null; 
 initImageViewBitmap(); 
 } 
 @Override 
 public void setImageDrawable(Drawable drawable) { 
 super.setImageDrawable(drawable); 
 mBitmap = null; 
 initImageViewBitmap(); 
 } 
 @Override 
 public void setImageURI(Uri uri) { 
 super.setImageURI(uri); 
 mBitmap = null; 
 initImageViewBitmap(); 
 } 
 @Override 
 protected void onDraw(Canvas canvas) { 
 if (mBitmap == null) { 
 // 如果Bitmap對(duì)象還不存在，先使用父類的onDraw方法進(jìn)行繪制 
 super.onDraw(canvas); 
 } else { 
 if (isImageVisible()) { 
 // 繪圖時(shí)需要注意，只有當(dāng)圖片可見(jiàn)的時(shí)候才進(jìn)行繪制，這樣可以節(jié)省運(yùn)算效率 
 computeRotateData(); 
 mCamera.save(); 
 mCamera.translate(0.0f, 0.0f, mDeep); 
 mCamera.rotateY(mRotateDegree); 
 mCamera.getMatrix(mMaxtrix); 
 mCamera.restore(); 
 mMaxtrix.preTranslate(-mDx, -getHeight() / 2); 
 mMaxtrix.postTranslate(mDx, getHeight() / 2); 
 canvas.drawBitmap(mBitmap, mMaxtrix, null); 
 } 
 } 
 } 
 /** 
 * 在這里計(jì)算所有旋轉(zhuǎn)所需要的數(shù)據(jù)。 
 */ 
 private void computeRotateData() { 
 float degreePerPix = BASE_DEGREE / mWidth; 
 float deepPerPix = BASE_DEEP / ((mLayoutWidth - mWidth) / 2); 
 switch (mIndex) { 
 case 0: 
 mDx = mWidth; 
 mRotateDegree = 360f - (2 * mWidth + mScrollX) * degreePerPix; 
 if (mScrollX < -mWidth) { 
 mDeep = 0; 
 } else { 
 mDeep = (mWidth + mScrollX) * deepPerPix; 
 } 
 break; 
 case 1: 
 if (mScrollX > 0) { 
 mDx = mWidth; 
 mRotateDegree = (360f - BASE_DEGREE) - mScrollX * degreePerPix; 
 mDeep = mScrollX * deepPerPix; 
 } else { 
 if (mScrollX < -mWidth) { 
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2; 
 mRotateDegree = (-mScrollX - mWidth) * degreePerPix; 
 } else { 
 mDx = mWidth; 
 mRotateDegree = 360f - (mWidth + mScrollX) * degreePerPix; 
 } 
 mDeep = 0; 
 } 
 break; 
 case 2: 
 if (mScrollX > 0) { 
 mDx = mWidth; 
 mRotateDegree = 360f - mScrollX * degreePerPix; 
 mDeep = 0; 
 if (mScrollX > mWidth) { 
 mDeep = (mScrollX - mWidth) * deepPerPix; 
 } 
 } else { 
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2; 
 mRotateDegree = -mScrollX * degreePerPix; 
 mDeep = 0; 
 if (mScrollX < -mWidth) { 
 mDeep = -(mWidth + mScrollX) * deepPerPix; 
 } 
 } 
 break; 
 case 3: 
 if (mScrollX < 0) { 
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2; 
 mRotateDegree = BASE_DEGREE - mScrollX * degreePerPix; 
 mDeep = -mScrollX * deepPerPix; 
 } else { 
 if (mScrollX > mWidth) { 
 mDx = mWidth; 
 mRotateDegree = 360f - (mScrollX - mWidth) * degreePerPix; 
 } else { 
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2; 
 mRotateDegree = BASE_DEGREE - mScrollX * degreePerPix; 
 } 
 mDeep = 0; 
 } 
 break; 
 case 4: 
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2; 
 mRotateDegree = (2 * mWidth - mScrollX) * degreePerPix; 
 if (mScrollX > mWidth) { 
 mDeep = 0; 
 } else { 
 mDeep = (mWidth - mScrollX) * deepPerPix; 
 } 
 break; 
 } 
 } 
 /** 
 * 判斷當(dāng)前圖片是否可見(jiàn)。 
 * 
 * @return 當(dāng)前圖片可見(jiàn)返回true，不可見(jiàn)返回false。 
 */ 
 private boolean isImageVisible() { 
 boolean isVisible = false; 
 switch (mIndex) { 
 case 0: 
 if (mScrollX < (mLayoutWidth - mWidth) / 2 - mWidth) { 
 isVisible = true; 
 } else { 
 isVisible = false; 
 } 
 break; 
 case 1: 
 if (mScrollX > (mLayoutWidth - mWidth) / 2) { 
 isVisible = false; 
 } else { 
 isVisible = true; 
 } 
 break; 
 case 2: 
 if (mScrollX > mLayoutWidth / 2 + mWidth / 2 
 || mScrollX < -mLayoutWidth / 2 - mWidth / 2) { 
 isVisible = false; 
 } else { 
 isVisible = true; 
 } 
 break; 
 case 3: 
 if (mScrollX < -(mLayoutWidth - mWidth) / 2) { 
 isVisible = false; 
 } else { 
 isVisible = true; 
 } 
 break; 
 case 4: 
 if (mScrollX > mWidth - (mLayoutWidth - mWidth) / 2) { 
 isVisible = true; 
 } else { 
 isVisible = false; 
 } 
 break; 
 } 
 return isVisible; 
 } 
}

這段代碼比較長(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ù)就可以通過(guò)computeRotateData()方法來(lái)計(jì)算旋轉(zhuǎn)角度的一些數(shù)據(jù)，以及通過(guò)isImageVisible()方法來(lái)判斷出當(dāng)前圖片是否可見(jiàn)了，具體詳細(xì)的算法邏輯你可以閱讀代碼來(lái)慢慢分析。

接下來(lái)當(dāng)圖片需要繪制到屏幕上的時(shí)候就會(huì)調(diào)用onDraw()方法，在onDraw()方法中會(huì)進(jìn)行判斷，如果當(dāng)前圖片可見(jiàn)就調(diào)用computeRotateData()方法來(lái)計(jì)算旋轉(zhuǎn)時(shí)所需要的各種數(shù)據(jù)，之后再通過(guò)Camera和Matrix來(lái)執(zhí)行旋轉(zhuǎn)操作就可以了。

接著新建一個(gè)Image3DSwitchView繼承自ViewGroup，代碼如下所示：

public class Image3DSwitchView extends ViewGroup { 
 /** 
 * 圖片左右兩邊的空白間距 
 */ 
 public static final int IMAGE_PADDING = 10; 
 private static final int TOUCH_STATE_REST = 0; 
 private static final int TOUCH_STATE_SCROLLING = 1; 
 /** 
 * 滾動(dòng)到下一張圖片的速度 
 */ 
 private static final int SNAP_VELOCITY = 600; 
 /** 
 * 表示滾動(dòng)到下一張圖片這個(gè)動(dòng)作 
 */ 
 private static final int SCROLL_NEXT = 0; 
 /** 
 * 表示滾動(dòng)到上一張圖片這個(gè)動(dòng)作 
 */ 
 private static final int SCROLL_PREVIOUS = 1; 
 /** 
 * 表示滾動(dòng)回原圖片這個(gè)動(dòng)作 
 */ 
 private static final int SCROLL_BACK = 2; 
 private static Handler handler = new Handler(); 
 /** 
 * 控件寬度 
 */ 
 public static int mWidth; 
 private VelocityTracker mVelocityTracker; 
 private Scroller mScroller; 
 /** 
 * 圖片滾動(dòng)監(jiān)聽(tīng)器，當(dāng)圖片發(fā)生滾動(dòng)時(shí)回調(diào)這個(gè)接口 
 */ 
 private OnImageSwitchListener mListener; 
 /** 
 * 記錄當(dāng)前的觸摸狀態(tài) 
 */ 
 private int mTouchState = TOUCH_STATE_REST; 
 /** 
 * 記錄被判定為滾動(dòng)運(yùn)動(dòng)的最小滾動(dòng)值 
 */ 
 private int mTouchSlop; 
 /** 
 * 記錄控件高度 
 */ 
 private int mHeight; 
 /** 
 * 記錄每張圖片的寬度 
 */ 
 private int mImageWidth; 
 /** 
 * 記錄圖片的總數(shù)量 
 */ 
 private int mCount; 
 /** 
 * 記錄當(dāng)前顯示圖片的坐標(biāo) 
 */ 
 private int mCurrentImage; 
 /** 
 * 記錄上次觸摸的橫坐標(biāo)值 
 */ 
 private float mLastMotionX; 
 /** 
 * 是否強(qiáng)制重新布局 
 */ 
 private boolean forceToRelayout; 
 private int[] mItems; 
 public Image3DSwitchView(Context context, AttributeSet attrs) { 
 super(context, attrs); 
 mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); 
 mScroller = new Scroller(context); 
 } 
 @Override 
 protected void onLayout(boolean changed, int l, int t, int r, int b) { 
 if (changed || forceToRelayout) { 
 mCount = getChildCount(); 
 // 圖片數(shù)量必須大于5，不然無(wú)法正常顯示 
 if (mCount < 5) { 
 return; 
 } 
 mWidth = getMeasuredWidth(); 
 mHeight = getMeasuredHeight(); 
 // 每張圖片的寬度設(shè)定為控件寬度的百分之六十 
 mImageWidth = (int) (mWidth * 0.6); 
 if (mCurrentImage >= 0 && mCurrentImage < mCount) { 
 mScroller.abortAnimation(); 
 setScrollX(0); 
 int left = -mImageWidth * 2 + (mWidth - mImageWidth) / 2; 
 // 分別獲取每個(gè)位置上應(yīng)該顯示的圖片下標(biāo) 
 int[] items = { getIndexForItem(1), getIndexForItem(2), 
 getIndexForItem(3), getIndexForItem(4), 
 getIndexForItem(5) }; 
 mItems = items; 
 // 通過(guò)循環(huán)為每張圖片設(shè)定位置 
 for (int i = 0; i < items.length; i++) { 
 Image3DView childView = (Image3DView) getChildAt(items[i]); 
 childView.layout(left + IMAGE_PADDING, 0, left 
 + mImageWidth - IMAGE_PADDING, mHeight); 
 childView.initImageViewBitmap(); 
 left = left + mImageWidth; 
 } 
 refreshImageShowing(); 
 } 
 forceToRelayout = false; 
 } 
 } 
 @Override 
 public boolean onTouchEvent(MotionEvent event) { 
 if (mScroller.isFinished()) { 
 if (mVelocityTracker == null) { 
 mVelocityTracker = VelocityTracker.obtain(); 
 } 
 mVelocityTracker.addMovement(event); 
 int action = event.getAction(); 
 float x = event.getX(); 
 switch (action) { 
 case MotionEvent.ACTION_DOWN: 
 // 記錄按下時(shí)的橫坐標(biāo) 
 mLastMotionX = x; 
 break; 
 case MotionEvent.ACTION_MOVE: 
 int disX = (int) (mLastMotionX - x); 
 mLastMotionX = x; 
 scrollBy(disX, 0); 
 // 當(dāng)發(fā)生移動(dòng)時(shí)刷新圖片的顯示狀態(tài) 
 refreshImageShowing(); 
 break; 
 case MotionEvent.ACTION_UP: 
 mVelocityTracker.computeCurrentVelocity(1000); 
 int velocityX = (int) mVelocityTracker.getXVelocity(); 
 if (shouldScrollToNext(velocityX)) { 
 // 滾動(dòng)到下一張圖 
 scrollToNext(); 
 } else if (shouldScrollToPrevious(velocityX)) { 
 // 滾動(dòng)到上一張圖 
 scrollToPrevious(); 
 } else { 
 // 滾動(dòng)回當(dāng)前圖片 
 scrollBack(); 
 } 
 if (mVelocityTracker != null) { 
 mVelocityTracker.recycle(); 
 mVelocityTracker = null; 
 } 
 break; 
 } 
 } 
 return true; 
 } 
 /** 
 * 根據(jù)當(dāng)前的觸摸狀態(tài)來(lái)決定是否屏蔽子控件的交互能力。 
 */ 
 @Override 
 public boolean onInterceptTouchEvent(MotionEvent ev) { 
 int action = ev.getAction(); 
 if ((action == MotionEvent.ACTION_MOVE) 
 && (mTouchState != TOUCH_STATE_REST)) { 
 return true; 
 } 
 float x = ev.getX(); 
 switch (action) { 
 case MotionEvent.ACTION_DOWN: 
 mLastMotionX = x; 
 mTouchState = TOUCH_STATE_REST; 
 break; 
 case MotionEvent.ACTION_MOVE: 
 int xDiff = (int) Math.abs(mLastMotionX - x); 
 if (xDiff > mTouchSlop) { 
 mTouchState = TOUCH_STATE_SCROLLING; 
 } 
 break; 
 case MotionEvent.ACTION_UP: 
 default: 
 mTouchState = TOUCH_STATE_REST; 
 break; 
 } 
 return mTouchState != TOUCH_STATE_REST; 
 } 
 @Override 
 public void computeScroll() { 
 if (mScroller.computeScrollOffset()) { 
 scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); 
 refreshImageShowing(); 
 postInvalidate(); 
 } 
 } 
 /** 
 * 設(shè)置圖片滾動(dòng)的監(jiān)聽(tīng)器，每當(dāng)有圖片滾動(dòng)時(shí)會(huì)回調(diào)此接口。 
 * 
 * @param listener 
 * 圖片滾動(dòng)監(jiān)聽(tīng)器 
 */ 
 public void setOnImageSwitchListener(OnImageSwitchListener listener) { 
 mListener = listener; 
 } 
 /** 
 * 設(shè)置當(dāng)前顯示圖片的下標(biāo)，注意如果該值小于零或大于等于圖片的總數(shù)量，圖片則無(wú)法正常顯示。 
 * 
 * @param currentImage 
 * 圖片的下標(biāo) 
 */ 
 public void setCurrentImage(int currentImage) { 
 mCurrentImage = currentImage; 
 requestLayout(); 
 } 
 /** 
 * 滾動(dòng)到下一張圖片。 
 */ 
 public void scrollToNext() { 
 if (mScroller.isFinished()) { 
 int disX = mImageWidth - getScrollX(); 
 checkImageSwitchBorder(SCROLL_NEXT); 
 if (mListener != null) { 
 mListener.onImageSwitch(mCurrentImage); 
 } 
 beginScroll(getScrollX(), 0, disX, 0, SCROLL_NEXT); 
 } 
 } 
 /** 
 * 滾動(dòng)到上一張圖片。 
 */ 
 public void scrollToPrevious() { 
 if (mScroller.isFinished()) { 
 int disX = -mImageWidth - getScrollX(); 
 checkImageSwitchBorder(SCROLL_PREVIOUS); 
 if (mListener != null) { 
 mListener.onImageSwitch(mCurrentImage); 
 } 
 beginScroll(getScrollX(), 0, disX, 0, SCROLL_PREVIOUS); 
 } 
 } 
 /** 
 * 滾動(dòng)回原圖片。 
 */ 
 public void scrollBack() { 
 if (mScroller.isFinished()) { 
 beginScroll(getScrollX(), 0, -getScrollX(), 0, SCROLL_BACK); 
 } 
 } 
 /** 
 * 回收所有圖片對(duì)象，釋放內(nèi)存。 
 */ 
 public void clear() { 
 for (int i = 0; i < mCount; i++) { 
 Image3DView childView = (Image3DView) getChildAt(i); 
 childView.recycleBitmap(); 
 } 
 } 
 /** 
 * 讓控件中的所有圖片開(kāi)始滾動(dòng)。 
 */ 
 private void beginScroll(int startX, int startY, int dx, int dy, 
 final int action) { 
 int duration = (int) (700f / mImageWidth * Math.abs(dx)); 
 mScroller.startScroll(startX, startY, dx, dy, duration); 
 invalidate(); 
 handler.postDelayed(new Runnable() { 
 @Override 
 public void run() { 
 if (action == SCROLL_NEXT || action == SCROLL_PREVIOUS) { 
 forceToRelayout = true; 
 requestLayout(); 
 } 
 } 
 }, duration); 
 } 
 /** 
 * 根據(jù)當(dāng)前圖片的下標(biāo)和傳入的item參數(shù)，來(lái)判斷item位置上應(yīng)該顯示哪張圖片。 
 * 
 * @param item 
 * 取值范圍是1-5 
 * @return 對(duì)應(yīng)item位置上應(yīng)該顯示哪張圖片。 
 */ 
 private int getIndexForItem(int item) { 
 int index = -1; 
 index = mCurrentImage + item - 3; 
 while (index < 0) { 
 index = index + mCount; 
 } 
 while (index > mCount - 1) { 
 index = index - mCount; 
 } 
 return index; 
 } 
 /** 
 * 刷新所有圖片的顯示狀態(tài)，包括當(dāng)前的旋轉(zhuǎn)角度。 
 */ 
 private void refreshImageShowing() { 
 for (int i = 0; i < mItems.length; i++) { 
 Image3DView childView = (Image3DView) getChildAt(mItems[i]); 
 childView.setRotateData(i, getScrollX()); 
 childView.invalidate(); 
 } 
 } 
 /** 
 * 檢查圖片的邊界，防止圖片的下標(biāo)超出規(guī)定范圍。 
 */ 
 private void checkImageSwitchBorder(int action) { 
 if (action == SCROLL_NEXT && ++mCurrentImage >= mCount) { 
 mCurrentImage = 0; 
 } else if (action == SCROLL_PREVIOUS && --mCurrentImage < 0) { 
 mCurrentImage = mCount - 1; 
 } 
 } 
 /** 
 * 判斷是否應(yīng)該滾動(dòng)到下一張圖片。 
 */ 
 private boolean shouldScrollToNext(int velocityX) { 
 return velocityX < -SNAP_VELOCITY || getScrollX() > mImageWidth / 2; 
 } 
 /** 
 * 判斷是否應(yīng)該滾動(dòng)到上一張圖片。 
 */ 
 private boolean shouldScrollToPrevious(int velocityX) { 
 return velocityX > SNAP_VELOCITY || getScrollX() < -mImageWidth / 2; 
 } 
 /** 
 * 圖片滾動(dòng)的監(jiān)聽(tīng)器 
 */ 
 public interface OnImageSwitchListener { 
 /** 
 * 當(dāng)圖片滾動(dòng)時(shí)會(huì)回調(diào)此方法 
 * 
 * @param currentImage 
 * 當(dāng)前圖片的坐標(biāo) 
 */ 
 void onImageSwitch(int currentImage); 
 } 
}

這段代碼也比較長(zhǎng)，我們來(lái)一點(diǎn)點(diǎn)進(jìn)行分析。在onLayout()方法首先要判斷子視圖個(gè)數(shù)是不是大于等于5，如果不足5個(gè)則圖片輪播器無(wú)法正常顯示，直接return掉。如果大于等于5個(gè)，就會(huì)通過(guò)一個(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)手指離開(kāi)屏幕時(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è)控件吧，打開(kāi)或新建activity_main.xml作為程序的主布局文件，代碼如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="#fff" > 
 <com.example.imageswitchviewtest.Image3DSwitchView 
 android:id="@+id/image_switch_view" 
 android:layout_width="match_parent" 
 android:layout_height="150dp" > 
 <com.example.imageswitchviewtest.Image3DView 
 android:id="@+id/image1" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:scaleType="fitXY" 
 android:src="@drawable/image1" /> 
 <com.example.imageswitchviewtest.Image3DView 
 android:id="@+id/image2" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:scaleType="fitXY" 
 android:src="@drawable/image2" /> 
 <com.example.imageswitchviewtest.Image3DView 
 android:id="@+id/image3" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:scaleType="fitXY" 
 android:src="@drawable/image3" /> 
 <com.example.imageswitchviewtest.Image3DView 
 android:id="@+id/image4" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:scaleType="fitXY" 
 android:src="@drawable/image4" /> 
 <com.example.imageswitchviewtest.Image3DView 
 android:id="@+id/image5" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:scaleType="fitXY" 
 android:src="@drawable/image5" /> 
 <com.example.imageswitchviewtest.Image3DView 
 android:id="@+id/image6" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:scaleType="fitXY" 
 android:src="@drawable/image6" /> 
 <com.example.imageswitchviewtest.Image3DView 
 android:id="@+id/image7" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:scaleType="fitXY" 
 android:src="@drawable/image7" /> 
 </com.example.imageswitchviewtest.Image3DSwitchView> 
</RelativeLayout>

可以看到，這里我們引入了一個(gè)Image3DSwitchView控件，然后在這個(gè)控件下面又添加了7個(gè)Image3DView控件，每個(gè)Image3DView其實(shí)就是一個(gè)ImageView，因此我們可以通過(guò)android:src屬于給它指定一張圖片。注意前面也說(shuō)過(guò)了，Image3DSwitchView控件下的子控件必須大于等于5個(gè)，不然將無(wú)法正常顯示。

代碼到這里就寫得差不多了，現(xiàn)在運(yùn)行一下程序就可以看到一個(gè)3D版的圖片輪播器，使用手指進(jìn)行滑動(dòng)可以查看更多的圖片，如下圖所示：

怎么樣？效果還是非常不錯(cuò)的吧！除此之外，Image3DSwitchView中還提供了setCurrentImage()方法和setOnImageSwitchListener()方法，分別可用于設(shè)置當(dāng)前顯示哪張圖片，以及設(shè)置圖片滾動(dòng)的監(jiān)聽(tīng)器，有了這些方法，你可以更加輕松地在Image3DSwitchView的基礎(chǔ)上進(jìn)行擴(kuò)展，比如說(shuō)加入頁(yè)簽顯示功能等。

好了，今天的講解就到這里，有疑問(wèn)的朋友可以在下面留言（不過(guò)最近工作著實(shí)繁忙，恐怕無(wú)法一一回復(fù)大家）。

源碼下載，請(qǐng)點(diǎn)擊這里

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: