zoukankan      html  css  js  c++  java
  • Android高级图片滚动控件,编写3D版的图片轮播器

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

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

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

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

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

    那么我们现在就开始动手吧,首先新建一个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的基础上进行扩展,比如说加入页签显示功能等。

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

    源码下载,请点击这里

  • 相关阅读:
    C#下对象与JSON串互相转换
    靠纯技术是否能渡过中年危机
    个人小结
    Qt:Drag-Drop操作在QGraphicsView及Model/View框架下的实现
    Lex&Yacc Parser错误发生后再次parser之前恢复初始状态
    lex中yyrestart()的使用
    go特性-数组与切片
    go特性-defer
    golang实现mysql udf
    go创建动态库
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/4096015.html
Copyright © 2011-2022 走看看