Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android實現3D版的圖片輪播器

Android實現3D版的圖片輪播器

編輯：Android開發實例

大家好，好久不見了，最近由於工作特別繁忙，已經有一個多月的時間沒寫博客了，我也是深感慚愧。那麼今天的這篇既然是闊別了一個多月的文章，當然要帶來更加給力點的內容了，那麼話不多說，趕快進入到今天的正題吧。

說到圖片輪播器，很多的Android應用中都會帶有這個功能，比如說網易新聞、淘寶等。最新我們公司的一款應用也加入了這個功能，並且在圖片輪播的基礎上還增加了三維立體的效果，但比較遺憾的是，整體效果並不理想，用戶體驗性比較糟糕。因此，我就花了點時間去編寫了一個效果更好的3D圖片輪播器，自我感覺還是比較滿意的，這裡果斷寫一篇博客來分享給大家。

首先來介紹一下實現原理吧，傳統的圖片輪播器在一個界面上只會顯示一張圖片，要用手指進行左右滑動才能看到其它的圖片。這裡我們將思維發散一下，允許在一個界面上同時顯示三張圖片，再通過Camera的方式對左右的兩張圖進行3D旋轉，這樣就能制作出一種立體的圖片輪播器了，原理示意圖如下所示：


 

對圖片進行立體操作還是要使用到Camera技術，如果你對這個技術還不太熟悉，可以到網上搜一些相關資料，或者參考我前面的一篇文章http://www.fengfly.com/plus/view-215100-1.html。

那麼我們現在就開始動手吧，首先新建一個Android項目，起名叫做ImageSwitchViewTest。

然後新建一個Image3DView繼承自ImageView，它會繼承ImageView的所有屬性，並且加入3D旋轉的功能，代碼如下所示：

  1. public class Image3DView extends ImageView {  
  2.     /**  
  3.      * 旋轉角度的基准值  
  4.      */ 
  5.     private static final float BASE_DEGREE = 50f;  
  6.     /**  
  7.      * 旋轉深度的基准值  
  8.      */ 
  9.     private static final float BASE_DEEP = 150f;  
  10.     private Camera mCamera;  
  11.     private Matrix mMaxtrix;  
  12.     private Bitmap mBitmap;  
  13.     /**  
  14.      * 當前圖片對應的下標  
  15.      */ 
  16.     private int mIndex;  
  17.     /**  
  18.      * 在前圖片在X軸方向滾動的距離  
  19.      */ 
  20.     private int mScrollX;  
  21.     /**  
  22.      * Image3DSwitchView控件的寬度  
  23.      */ 
  24.     private int mLayoutWidth;  
  25.     /**  
  26.      * 當前圖片的寬度  
  27.      */ 
  28.     private int mWidth;  
  29.     /**  
  30.      * 當前旋轉的角度  
  31.      */ 
  32.     private float mRotateDegree;  
  33.     /**  
  34.      * 旋轉的中心點  
  35.      */ 
  36.     private float mDx;  
  37.     /**  
  38.      * 旋轉的深度  
  39.      */ 
  40.     private float mDeep;  
  41.  
  42.     public Image3DView(Context context, AttributeSet attrs) {  
  43.         super(context, attrs);  
  44.         mCamera = new Camera();  
  45.         mMaxtrix = new Matrix();  
  46.     }  
  47.  
  48.     /**  
  49.      * 初始化Image3DView所需要的信息，包括圖片寬度，截取背景圖等。  
  50.      */ 
  51.     public void initImageViewBitmap() {  
  52.         if (mBitmap == null) {  
  53.             setDrawingCacheEnabled(true);  
  54.             buildDrawingCache();  
  55.             mBitmap = getDrawingCache();  
  56.         }  
  57.         mLayoutWidth = Image3DSwitchView.mWidth;  
  58.         mWidth = getWidth() + Image3DSwitchView.IMAGE_PADDING * 2;  
  59.     }  
  60.  
  61.     /**  
  62.      * 設置旋轉角度。  
  63.      *   
  64.      * @param index  
  65.      *            當前圖片的下標  
  66.      * @param scrollX  
  67.      *            當前圖片在X軸方向滾動的距離  
  68.      */ 
  69.     public void setRotateData(int index, int scrollX) {  
  70.         mIndex = index;  
  71.         mScrollX = scrollX;  
  72.     }  
  73.  
  74.     /**  
  75.      * 回收當前的Bitmap對象，以釋放內存。  
  76.      */ 
  77.     public void recycleBitmap() {  
  78.         if (mBitmap != null && !mBitmap.isRecycled()) {  
  79.             mBitmap.recycle();  
  80.         }  
  81.     }  
  82.  
  83.     @Override 
  84.     public void setImageResource(int resId) {  
  85.         super.setImageResource(resId);  
  86.         mBitmap = null;  
  87.         initImageViewBitmap();  
  88.     }  
  89.  
  90.     @Override 
  91.     public void setImageBitmap(Bitmap bm) {  
  92.         super.setImageBitmap(bm);  
  93.         mBitmap = null;  
  94.         initImageViewBitmap();  
  95.     }  
  96.  
  97.     @Override 
  98.     public void setImageDrawable(Drawable drawable) {  
  99.         super.setImageDrawable(drawable);  
  100.         mBitmap = null;  
  101.         initImageViewBitmap();  
  102.     }  
  103.  
  104.     @Override 
  105.     public void setImageURI(Uri uri) {  
  106.         super.setImageURI(uri);  
  107.         mBitmap = null;  
  108.         initImageViewBitmap();  
  109.     }  
  110.  
  111.     @Override 
  112.     protected void onDraw(Canvas canvas) {  
  113.         if (mBitmap == null) {  
  114.             // 如果Bitmap對象還不存在，先使用父類的onDraw方法進行繪制  
  115.             super.onDraw(canvas);  
  116.         } else {  
  117.             if (isImageVisible()) {  
  118.                 // 繪圖時需要注意，只有當圖片可見的時候才進行繪制，這樣可以節省運算效率  
  119.                 computeRotateData();  
  120.                 mCamera.save();  
  121.                 mCamera.translate(0.0f, 0.0f, mDeep);  
  122.                 mCamera.rotateY(mRotateDegree);  
  123.                 mCamera.getMatrix(mMaxtrix);  
  124.                 mCamera.restore();  
  125.                 mMaxtrix.preTranslate(-mDx, -getHeight() / 2);  
  126.                 mMaxtrix.postTranslate(mDx, getHeight() / 2);  
  127.                 canvas.drawBitmap(mBitmap, mMaxtrix, null);  
  128.             }  
  129.         }  
  130.     }  
  131.  
  132.     /**  
  133.      * 在這裡計算所有旋轉所需要的數據。  
  134.      */ 
  135.     private void computeRotateData() {  
  136.         float degreePerPix = BASE_DEGREE / mWidth;  
  137.         float deepPerPix = BASE_DEEP / ((mLayoutWidth - mWidth) / 2);  
  138.         switch (mIndex) {  
  139.         case 0:  
  140.             mDx = mWidth;  
  141.             mRotateDegree = 360f - (2 * mWidth + mScrollX) * degreePerPix;  
  142.             if (mScrollX < -mWidth) {  
  143.                 mDeep = 0;  
  144.             } else {  
  145.                 mDeep = (mWidth + mScrollX) * deepPerPix;  
  146.             }  
  147.             break;  
  148.         case 1:  
  149.             if (mScrollX > 0) {  
  150.                 mDx = mWidth;  
  151.                 mRotateDegree = (360f - BASE_DEGREE) - mScrollX * degreePerPix;  
  152.                 mDeep = mScrollX * deepPerPix;  
  153.             } else {  
  154.                 if (mScrollX < -mWidth) {  
  155.                     mDx = -Image3DSwitchView.IMAGE_PADDING * 2;  
  156.                     mRotateDegree = (-mScrollX - mWidth) * degreePerPix;  
  157.                 } else {  
  158.                     mDx = mWidth;  
  159.                     mRotateDegree = 360f - (mWidth + mScrollX) * degreePerPix;  
  160.                 }  
  161.                 mDeep = 0;  
  162.             }  
  163.             break;  
  164.         case 2:  
  165.             if (mScrollX > 0) {  
  166.                 mDx = mWidth;  
  167.                 mRotateDegree = 360f - mScrollX * degreePerPix;  
  168.                 mDeep = 0;  
  169.                 if (mScrollX > mWidth) {  
  170.                     mDeep = (mScrollX - mWidth) * deepPerPix;  
  171.                 }  
  172.             } else {  
  173.                 mDx = -Image3DSwitchView.IMAGE_PADDING * 2;  
  174.                 mRotateDegree = -mScrollX * degreePerPix;  
  175.                 mDeep = 0;  
  176.                 if (mScrollX < -mWidth) {  
  177.                     mDeep = -(mWidth + mScrollX) * deepPerPix;  
  178.                 }  
  179.             }  
  180.             break;  
  181.         case 3:  
  182.             if (mScrollX < 0) {  
  183.                 mDx = -Image3DSwitchView.IMAGE_PADDING * 2;  
  184.                 mRotateDegree = BASE_DEGREE - mScrollX * degreePerPix;  
  185.                 mDeep = -mScrollX * deepPerPix;  
  186.             } else {  
  187.                 if (mScrollX > mWidth) {  
  188.                     mDx = mWidth;  
  189.                     mRotateDegree = 360f - (mScrollX - mWidth) * degreePerPix;  
  190.                 } else {  
  191.                     mDx = -Image3DSwitchView.IMAGE_PADDING * 2;  
  192.                     mRotateDegree = BASE_DEGREE - mScrollX * degreePerPix;  
  193.                 }  
  194.                 mDeep = 0;  
  195.             }  
  196.             break;  
  197.         case 4:  
  198.             mDx = -Image3DSwitchView.IMAGE_PADDING * 2;  
  199.             mRotateDegree = (2 * mWidth - mScrollX) * degreePerPix;  
  200.             if (mScrollX > mWidth) {  
  201.                 mDeep = 0;  
  202.             } else {  
  203.                 mDeep = (mWidth - mScrollX) * deepPerPix;  
  204.             }  
  205.             break;  
  206.         }  
  207.     }  
  208.  
  209.     /**  
  210.      * 判斷當前圖片是否可見。  
  211.      *   
  212.      * @return 當前圖片可見返回true，不可見返回false。  
  213.      */ 
  214.     private boolean isImageVisible() {  
  215.         boolean isVisible = false;  
  216.         switch (mIndex) {  
  217.         case 0:  
  218.             if (mScrollX < (mLayoutWidth - mWidth) / 2 - mWidth) {  
  219.                 isVisible = true;  
  220.             } else {  
  221.                 isVisible = false;  
  222.             }  
  223.             break;  
  224.         case 1:  
  225.             if (mScrollX > (mLayoutWidth - mWidth) / 2) {  
  226.                 isVisible = false;  
  227.             } else {  
  228.                 isVisible = true;  
  229.             }  
  230.             break;  
  231.         case 2:  
  232.             if (mScrollX > mLayoutWidth / 2 + mWidth / 2 
  233.                     || mScrollX < -mLayoutWidth / 2 - mWidth / 2) {  
  234.                 isVisible = false;  
  235.             } else {  
  236.                 isVisible = true;  
  237.             }  
  238.             break;  
  239.         case 3:  
  240.             if (mScrollX < -(mLayoutWidth - mWidth) / 2) {  
  241.                 isVisible = false;  
  242.             } else {  
  243.                 isVisible = true;  
  244.             }  
  245.             break;  
  246.         case 4:  
  247.             if (mScrollX > mWidth - (mLayoutWidth - mWidth) / 2) {  
  248.                 isVisible = true;  
  249.             } else {  
  250.                 isVisible = false;  
  251.             }  
  252.             break;  
  253.         }  
  254.         return isVisible;  
  255.     }  
  256.  
  257. }  

這段代碼比較長，也比較復雜的，我們慢慢來分析。在Image3DView的構造函數中初始化了一個Camera和Matrix對象，用於在後面對圖片進行3D操作。然後在initImageViewBitmap()方法中初始化了一些必要的信息，比如對當前圖片進行截圖，以用於後續的立體操作，得到當前圖片的寬度等。

 

然後還提供了一個setRotateData()方法，用於設置當前圖片的下標和滾動距離，有了這兩樣數據就可以通過computeRotateData()方法來計算旋轉角度的一些數據，以及通過isImageVisible()方法來判斷出當前圖片是否可見了，具體詳細的算法邏輯你可以閱讀代碼來慢慢分析。

接下來當圖片需要繪制到屏幕上的時候就會調用onDraw()方法，在onDraw()方法中會進行判斷，如果當前圖片可見就調用computeRotateData()方法來計算旋轉時所需要的各種數據，之後再通過Camera和Matrix來執行旋轉操作就可以了。

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

  1. public class Image3DSwitchView extends ViewGroup {  
  2.  
  3.     /**  
  4.      * 圖片左右兩邊的空白間距  
  5.      */ 
  6.     public static final int IMAGE_PADDING = 10;  
  7.     private static final int TOUCH_STATE_REST = 0;  
  8.     private static final int TOUCH_STATE_SCROLLING = 1;  
  9.     /**  
  10.      * 滾動到下一張圖片的速度  
  11.      */ 
  12.     private static final int SNAP_VELOCITY = 600;  
  13.     /**  
  14.      * 表示滾動到下一張圖片這個動作  
  15.      */ 
  16.     private static final int SCROLL_NEXT = 0;  
  17.     /**  
  18.      * 表示滾動到上一張圖片這個動作  
  19.      */ 
  20.     private static final int SCROLL_PREVIOUS = 1;  
  21.     /**  
  22.      * 表示滾動回原圖片這個動作  
  23.      */ 
  24.     private static final int SCROLL_BACK = 2;  
  25.     private static Handler handler = new Handler();  
  26.     /**  
  27.      * 控件寬度  
  28.      */ 
  29.     public static int mWidth;  
  30.     private VelocityTracker mVelocityTracker;  
  31.     private Scroller mScroller;  
  32.     /**  
  33.      * 圖片滾動監聽器，當圖片發生滾動時回調這個接口  
  34.      */ 
  35.     private OnImageSwitchListener mListener;  
  36.     /**  
  37.      * 記錄當前的觸摸狀態  
  38.      */ 
  39.     private int mTouchState = TOUCH_STATE_REST;  
  40.     /**  
  41.      * 記錄被判定為滾動運動的最小滾動值  
  42.      */ 
  43.     private int mTouchSlop;  
  44.     /**  
  45.      * 記錄控件高度  
  46.      */ 
  47.     private int mHeight;  
  48.     /**  
  49.      * 記錄每張圖片的寬度  
  50.      */ 
  51.     private int mImageWidth;  
  52.     /**  
  53.      * 記錄圖片的總數量  
  54.      */ 
  55.     private int mCount;  
  56.     /**  
  57.      * 記錄當前顯示圖片的坐標  
  58.      */ 
  59.     private int mCurrentImage;  
  60.     /**  
  61.      * 記錄上次觸摸的橫坐標值  
  62.      */ 
  63.     private float mLastMotionX;  
  64.     /**  
  65.      * 是否強制重新布局  
  66.      */ 
  67.     private boolean forceToRelayout;  
  68.     private int[] mItems;  
  69.  
  70.     public Image3DSwitchView(Context context, AttributeSet attrs) {  
  71.         super(context, attrs);  
  72.         mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();  
  73.         mScroller = new Scroller(context);  
  74.     }  
  75.  
  76.     @Override 
  77.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
  78.         if (changed || forceToRelayout) {  
  79.             mCount = getChildCount();  
  80.             // 圖片數量必須大於5，不然無法正常顯示  
  81.             if (mCount < 5) {  
  82.                 return;  
  83.             }  
  84.             mWidth = getMeasuredWidth();  
  85.             mHeight = getMeasuredHeight();  
  86.             // 每張圖片的寬度設定為控件寬度的百分之六十  
  87.             mImageWidth = (int) (mWidth * 0.6);  
  88.             if (mCurrentImage >= 0 && mCurrentImage < mCount) {  
  89.                 mScroller.abortAnimation();  
  90.                 setScrollX(0);  
  91.                 int left = -mImageWidth * 2 + (mWidth - mImageWidth) / 2;  
  92.                 // 分別獲取每個位置上應該顯示的圖片下標  
  93.                 int[] items = { getIndexForItem(1), getIndexForItem(2),  
  94.                         getIndexForItem(3), getIndexForItem(4),  
  95.                         getIndexForItem(5) };  
  96.                 mItems = items;  
  97.                 // 通過循環為每張圖片設定位置  
  98.                 for (int i = 0; i < items.length; i++) {  
  99.                     Image3DView childView = (Image3DView) getChildAt(items[i]);  
  100.                     childView.layout(left + IMAGE_PADDING, 0, left  
  101.                             + mImageWidth - IMAGE_PADDING, mHeight);  
  102.                     childView.initImageViewBitmap();  
  103.                     left = left + mImageWidth;  
  104.                 }  
  105.                 refreshImageShowing();  
  106.             }  
  107.             forceToRelayout = false;  
  108.         }  
  109.     }  
  110.  
  111.     @Override 
  112.     public boolean onTouchEvent(MotionEvent event) {  
  113.         if (mScroller.isFinished()) {  
  114.             if (mVelocityTracker == null) {  
  115.                 mVelocityTracker = VelocityTracker.obtain();  
  116.             }  
  117.             mVelocityTracker.addMovement(event);  
  118.             int action = event.getAction();  
  119.             float x = event.getX();  
  120.             switch (action) {  
  121.             case MotionEvent.ACTION_DOWN:  
  122.                 // 記錄按下時的橫坐標  
  123.                 mLastMotionX = x;  
  124.                 break;  
  125.             case MotionEvent.ACTION_MOVE:  
  126.                 int disX = (int) (mLastMotionX - x);  
  127.                 mLastMotionX = x;  
  128.                 scrollBy(disX, 0);  
  129.                 // 當發生移動時刷新圖片的顯示狀態  
  130.                 refreshImageShowing();  
  131.                 break;  
  132.             case MotionEvent.ACTION_UP:  
  133.                 mVelocityTracker.computeCurrentVelocity(1000);  
  134.                 int velocityX = (int) mVelocityTracker.getXVelocity();  
  135.                 if (shouldScrollToNext(velocityX)) {  
  136.                     // 滾動到下一張圖  
  137.                     scrollToNext();  
  138.                 } else if (shouldScrollToPrevious(velocityX)) {  
  139.                     // 滾動到上一張圖  
  140.                     scrollToPrevious();  
  141.                 } else {  
  142.                     // 滾動回當前圖片  
  143.                     scrollBack();  
  144.                 }  
  145.                 if (mVelocityTracker != null) {  
  146.                     mVelocityTracker.recycle();  
  147.                     mVelocityTracker = null;  
  148.                 }  
  149.                 break;  
  150.             }  
  151.         }  
  152.         return true;  
  153.     }  
  154.  
  155.     /**  
  156.      * 根據當前的觸摸狀態來決定是否屏蔽子控件的交互能力。  
  157.      */ 
  158.     @Override 
  159.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
  160.         int action = ev.getAction();  
  161.         if ((action == MotionEvent.ACTION_MOVE)  
  162.                 && (mTouchState != TOUCH_STATE_REST)) {  
  163.             return true;  
  164.         }  
  165.         float x = ev.getX();  
  166.         switch (action) {  
  167.         case MotionEvent.ACTION_DOWN:  
  168.             mLastMotionX = x;  
  169.             mTouchState = TOUCH_STATE_REST;  
  170.             break;  
  171.         case MotionEvent.ACTION_MOVE:  
  172.             int xDiff = (int) Math.abs(mLastMotionX - x);  
  173.             if (xDiff > mTouchSlop) {  
  174.                 mTouchState = TOUCH_STATE_SCROLLING;  
  175.             }  
  176.             break;  
  177.         case MotionEvent.ACTION_UP:  
  178.         default:  
  179.             mTouchState = TOUCH_STATE_REST;  
  180.             break;  
  181.         }  
  182.         return mTouchState != TOUCH_STATE_REST;  
  183.     }  
  184.  
  185.     @Override 
  186.     public void computeScroll() {  
  187.         if (mScroller.computeScrollOffset()) {  
  188.             scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
  189.             refreshImageShowing();  
  190.             postInvalidate();  
  191.         }  
  192.     }  
  193.  
  194.     /**  
  195.      * 設置圖片滾動的監聽器，每當有圖片滾動時會回調此接口。  
  196.      *   
  197.      * @param listener  
  198.      *            圖片滾動監聽器  
  199.      */ 
  200.     public void setOnImageSwitchListener(OnImageSwitchListener listener) {  
  201.         mListener = listener;  
  202.     }  
  203.  
  204.     /**  
  205.      * 設置當前顯示圖片的下標，注意如果該值小於零或大於等於圖片的總數量，圖片則無法正常顯示。  
  206.      *   
  207.      * @param currentImage  
  208.      *            圖片的下標  
  209.      */ 
  210.     public void setCurrentImage(int currentImage) {  
  211.         mCurrentImage = currentImage;  
  212.         requestLayout();  
  213.     }  
  214.  
  215.     /**  
  216.      * 滾動到下一張圖片。  
  217.      */ 
  218.     public void scrollToNext() {  
  219.         if (mScroller.isFinished()) {  
  220.             int disX = mImageWidth - getScrollX();  
  221.             checkImageSwitchBorder(SCROLL_NEXT);  
  222.             if (mListener != null) {  
  223.                 mListener.onImageSwitch(mCurrentImage);  
  224.             }  
  225.             beginScroll(getScrollX(), 0, disX, 0, SCROLL_NEXT);  
  226.         }  
  227.     }  
  228.  
  229.     /**  
  230.      * 滾動到上一張圖片。  
  231.      */ 
  232.     public void scrollToPrevious() {  
  233.         if (mScroller.isFinished()) {  
  234.             int disX = -mImageWidth - getScrollX();  
  235.             checkImageSwitchBorder(SCROLL_PREVIOUS);  
  236.             if (mListener != null) {  
  237.                 mListener.onImageSwitch(mCurrentImage);  
  238.             }  
  239.             beginScroll(getScrollX(), 0, disX, 0, SCROLL_PREVIOUS);  
  240.         }  
  241.     }  
  242.  
  243.     /**  
  244.      * 滾動回原圖片。  
  245.      */ 
  246.     public void scrollBack() {  
  247.         if (mScroller.isFinished()) {  
  248.             beginScroll(getScrollX(), 0, -getScrollX(), 0, SCROLL_BACK);  
  249.         }  
  250.     }  
  251.  
  252.     /**  
  253.      * 回收所有圖片對象，釋放內存。  
  254.      */ 
  255.     public void clear() {  
  256.         for (int i = 0; i < mCount; i++) {  
  257.             Image3DView childView = (Image3DView) getChildAt(i);  
  258.             childView.recycleBitmap();  
  259.         }  
  260.     }  
  261.  
  262.     /**  
  263.      * 讓控件中的所有圖片開始滾動。  
  264.      */ 
  265.     private void beginScroll(int startX, int startY, int dx, int dy,  
  266.             final int action) {  
  267.         int duration = (int) (700f / mImageWidth * Math.abs(dx));  
  268.         mScroller.startScroll(startX, startY, dx, dy, duration);  
  269.         invalidate();  
  270.         handler.postDelayed(new Runnable() {  
  271.             @Override 
  272.             public void run() {  
  273.                 if (action == SCROLL_NEXT || action == SCROLL_PREVIOUS) {  
  274.                     forceToRelayout = true;  
  275.                     requestLayout();  
  276.                 }  
  277.             }  
  278.         }, duration);  
  279.     }  
  280.  
  281.     /**  
  282.      * 根據當前圖片的下標和傳入的item參數，來判斷item位置上應該顯示哪張圖片。  
  283.      *   
  284.      * @param item  
  285.      *            取值范圍是1-5  
  286.      * @return 對應item位置上應該顯示哪張圖片。  
  287.      */ 
  288.     private int getIndexForItem(int item) {  
  289.         int index = -1;  
  290.         index = mCurrentImage + item - 3;  
  291.         while (index < 0) {  
  292.             index = index + mCount;  
  293.         }  
  294.         while (index > mCount - 1) {  
  295.             index = index - mCount;  
  296.         }  
  297.         return index;  
  298.     }  
  299.  
  300.     /**  
  301.      * 刷新所有圖片的顯示狀態，包括當前的旋轉角度。  
  302.      */ 
  303.     private void refreshImageShowing() {  
  304.         for (int i = 0; i < mItems.length; i++) {  
  305.             Image3DView childView = (Image3DView) getChildAt(mItems[i]);  
  306.             childView.setRotateData(i, getScrollX());  
  307.             childView.invalidate();  
  308.         }  
  309.     }  
  310.  
  311.     /**  
  312.      * 檢查圖片的邊界，防止圖片的下標超出規定范圍。  
  313.      */ 
  314.     private void checkImageSwitchBorder(int action) {  
  315.         if (action == SCROLL_NEXT && ++mCurrentImage >= mCount) {  
  316.             mCurrentImage = 0;  
  317.         } else if (action == SCROLL_PREVIOUS && --mCurrentImage < 0) {  
  318.             mCurrentImage = mCount - 1;  
  319.         }  
  320.     }  
  321.  
  322.     /**  
  323.      * 判斷是否應該滾動到下一張圖片。  
  324.      */ 
  325.     private boolean shouldScrollToNext(int velocityX) {  
  326.         return velocityX < -SNAP_VELOCITY || getScrollX() > mImageWidth / 2;  
  327.     }  
  328.  
  329.     /**  
  330.      * 判斷是否應該滾動到上一張圖片。  
  331.      */ 
  332.     private boolean shouldScrollToPrevious(int velocityX) {  
  333.         return velocityX > SNAP_VELOCITY || getScrollX() < -mImageWidth / 2;  
  334.     }  
  335.  
  336.     /**  
  337.      * 圖片滾動的監聽器  
  338.      */ 
  339.     public interface OnImageSwitchListener {  
  340.  
  341.         /**  
  342.          * 當圖片滾動時會回調此方法  
  343.          *   
  344.          * @param currentImage  
  345.          *            當前圖片的坐標  
  346.          */ 
  347.         void onImageSwitch(int currentImage);  
  348.  
  349.     }  
  350. }  

這段代碼也比較長，我們來一點點進行分析。在onLayout()方法首先要判斷子視圖個數是不是大於等於5，如果不足5個則圖片輪播器無法正常顯示，直接return掉。如果大於等於5個，就會通過一個for循環來為每個子視圖分配顯示的位置，而每個子視圖都是一個Image3DView，在for循環中又會調用Image3DView的initImageViewBitmap()方法來為每個控件執行初始化操作，之後會調用refreshImageShowing()方法來刷新圖片的顯示狀態。

 

接著當手指在Image3DSwitchView控件上滑動的時候就會進入到onTouchEvent()方法中，當手指按下時會記錄按下時的橫坐標，然後當手指滑動時會計算出滑動的距離，並調用scrollBy()方法來進行滾動，當手指離開屏幕時會距離當前滑動的距離和速度來決定，是滾動到下一張圖片，還是滾動到上一張圖片，還是滾動回原圖片。分別調用的方法是scrollToNext()、scrollToPrevious()和scrollBack()。

在scrollToNext()方法中會先計算一下還需滾動的距離，然後進行一下邊界檢查，防止當前圖片的下標超出合理范圍，接著會調用beginScroll()方法來進行滾動。在beginScroll()方法中其實就是調用了Scroller的startScroll()方法來執行滾動操作的，當滾動結束後還會調用requestLayout()方法來要求重新布局，之後onLayout()方法就會重新執行，每個圖片的位置也就會跟著改變了。至於scrollToPrevious()和scrollBack()方法的原理也是一樣的，這裡就不再重復分析了。

那麼在onLayout()方法的最後調用的refreshImageShowing()方法到底執行了什麼操作呢？其實就是遍歷了一下每個Image3DView控件，然後調用它的setRotateData()方法，並把圖片的下標和滾動距離傳進去，這樣每張圖片就知道應該如何進行旋轉了。

另外一些其它的細節就不在這裡講解了，注釋寫的還是比較詳細的，你可以慢慢地去分析和理解。

那麼下面我們來看下如何使用Image3DSwitchView這個控件吧，打開或新建activity_main.xml作為程序的主布局文件，代碼如下所示：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:layout_width="match_parent" 
  3.     android:layout_height="match_parent" 
  4.     android:background="#fff" >  
  5.  
  6.     <com.example.imageswitchviewtest.Image3DSwitchView  
  7.         android:id="@+id/image_switch_view" 
  8.         android:layout_width="match_parent" 
  9.         android:layout_height="150dp" >  
  10.  
  11.         <com.example.imageswitchviewtest.Image3DView  
  12.             android:id="@+id/image1" 
  13.             android:layout_width="match_parent" 
  14.             android:layout_height="match_parent" 
  15.             android:scaleType="fitXY" 
  16.             android:src="@drawable/image1" />  
  17.  
  18.         <com.example.imageswitchviewtest.Image3DView  
  19.             android:id="@+id/image2" 
  20.             android:layout_width="match_parent" 
  21.             android:layout_height="match_parent" 
  22.             android:scaleType="fitXY" 
  23.             android:src="@drawable/image2" />  
  24.  
  25.         <com.example.imageswitchviewtest.Image3DView  
  26.             android:id="@+id/image3" 
  27.             android:layout_width="match_parent" 
  28.             android:layout_height="match_parent" 
  29.             android:scaleType="fitXY" 
  30.             android:src="@drawable/image3" />  
  31.  
  32.         <com.example.imageswitchviewtest.Image3DView  
  33.             android:id="@+id/image4" 
  34.             android:layout_width="match_parent" 
  35.             android:layout_height="match_parent" 
  36.             android:scaleType="fitXY" 
  37.             android:src="@drawable/image4" />  
  38.  
  39.         <com.example.imageswitchviewtest.Image3DView  
  40.             android:id="@+id/image5" 
  41.             android:layout_width="match_parent" 
  42.             android:layout_height="match_parent" 
  43.             android:scaleType="fitXY" 
  44.             android:src="@drawable/image5" />  
  45.  
  46.         <com.example.imageswitchviewtest.Image3DView  
  47.             android:id="@+id/image6" 
  48.             android:layout_width="match_parent" 
  49.             android:layout_height="match_parent" 
  50.             android:scaleType="fitXY" 
  51.             android:src="@drawable/image6" />  
  52.  
  53.         <com.example.imageswitchviewtest.Image3DView  
  54.             android:id="@+id/image7" 
  55.             android:layout_width="match_parent" 
  56.             android:layout_height="match_parent" 
  57.             android:scaleType="fitXY" 
  58.             android:src="@drawable/image7" />  
  59.     </com.example.imageswitchviewtest.Image3DSwitchView>  
  60.  
  61. </RelativeLayout>  

可以看到，這裡我們引入了一個Image3DSwitchView控件，然後在這個控件下面又添加了7個Image3DView控件，每個Image3DView其實就是一個ImageView，因此我們可以通過android:src屬於給它指定一張圖片。注意前面也說過了，Image3DSwitchView控件下的子控件必須大於等於5個，不然將無法正常顯示。

代碼到這裡就寫得差不多了，現在運行一下程序就可以看到一個3D版的圖片輪播器，使用手指進行滑動可以查看更多的圖片，如下圖所示：


 

怎麼樣？效果還是非常不錯的吧！除此之外，Image3DSwitchView中還提供了setCurrentImage()方法和setOnImageSwitchListener()方法，分別可用於設置當前顯示哪張圖片，以及設置圖片滾動的監聽器，有了這些方法，你可以更加輕松地在Image3DSwitchView的基礎上進行擴展，比如說加入頁簽顯示功能等。

源碼下載，請點擊這裡
 

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android 程序應用的生命周期 Android簽名用keytool和jarsigner制作apk文件 android在ubuntu桌面系統下編譯可能的錯誤和解決方法 基於Android XML解析與保存的實現 Android本地化 Android開發ToggleButton控件的學習
Android本地化

Android應用程序可以在許多不同地區的許多設備上運行。為了使應用程序
Android App中用Handler實現ViewPager頁面的自動切換

在很多電商網頁及app上都有自動切換的商品的推廣快，感覺體驗挺不
Android登錄實例

登錄應用程序的屏幕，詢問憑據登錄到一些特定的應用。可能需要登錄到Face
Android使用ImageView 制作透明圓弧實例代碼

這幾天因為項目需求，需要在ImageView上面疊加一層透明圓弧
閱讀排行版
Copyright © Android教程網 All Rights Reserved