time 
设为首页】【收藏本站
当前位置: 主页 > 电脑网络 > 操作系统 > 嵌入式 > Android > Android实现3D版的图片轮播器

Android实现3D版的图片轮播器

时间:2014-06-20 14:47 点击:4853次 字体:[ ]




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

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

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

Android实现3D版的图片轮播器_www.fengfly.com
 

对图片进行立体操作还是要使用到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()方法来判断出当前图片是否可见了,具体详细的算法逻辑你可以阅读代码来慢慢分析。



本文地址 : http://www.fengfly.com/plus/view-215116-1.html
标签: Android 3D
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: