Android高级图片滚动控件，编写3D版的图片轮播器

转载请注明出处：http://blog.csdn.net/guolin_blog/article/details/17482089

大家好，好久不见了，最近由于工作特别繁忙，已经有一个多月的时间没写博客了，我也是深感惭愧。那么今天的这篇既然是阔别了一个多月的文章，当然要带来更加给力点的内容了，那么话不多说，赶快进入到今天的正题吧。

说到图片轮播器，很多的Android应用中都会带有这个功能，比如说网易新闻、淘宝等。最新我们公司的一款应用也加入了这个功能，并且在图片轮播的基础上还增加了三维立体的效果，但比较遗憾的是，整体效果并不理想，用户体验性比较糟糕。因此，我就花了点时间去编写了一个效果更好的3D图片轮播器，自我感觉还是比较满意的，这里果断写一篇博客来分享给大家。

首先来介绍一下实现原理吧，传统的图片轮播器在一个界面上只会显示一张图片，要用手指进行左右滑动才能看到其它的图片。这里我们将思维发散一下，允许在一个界面上同时显示三张图片，再通过Camera的方式对左右的两张图进行3D旋转，这样就能制作出一种立体的图片轮播器了，原理示意图如下所示：

对图片进行立体操作还是要使用到Camera技术，如果你对这个技术还不太熟悉，可以到网上搜一些相关资料，或者参考我前面的一篇文章：Android中轴旋转特效实现，制作别样的图片浏览器 。

那么我们现在就开始动手吧，首先新建一个Android项目，起名叫做ImageSwitchViewTest。

然后新建一个Image3DView继承自ImageView，它会继承ImageView的所有属性，并且加入3D旋转的功能，代码如下所示：

[java]  view plain copy

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，代码如下所示：

[java]  view plain copy

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作为程序的主布局文件，代码如下所示：

[html]  view plain copy

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的基础上进行扩展，比如说加入页签显示功能等。

好了，今天的讲解就到这里，有疑问的朋友可以在下面留言（不过最近工作着实繁忙，恐怕无法一一回复大家）。

源码下载，请点击这里