time 
设为首页】【收藏本站
当前位置: 主页 > 电脑网络 > 操作系统 > 嵌入式 > Android > Android实现推拉门式的立体特效滑动菜单

Android实现推拉门式的立体特效滑动菜单

时间:2014-06-18 15:37 点击:2913次 字体:[ ]




在上一篇文章中,我们学习了Camera的基本用法,并借助它们编写了一个例子,实现了类似于API Demos里的图片中轴旋转功能。不过那个例子的核心代码是来自于API Demos中带有的Rotate3dAnimation这个类,是它帮助我们完成了所有的三维旋转操作,所有Matrix和Camera相关的代码也是封装在这个类中。

这样说来的话,大家心里会不会痒痒的呢?虽然学习了Camera的用法,但却没有按照自己的理解来实现一套非常炫酷的3D效果。不要着急,今天我就带着大家一起来实现一种3D推拉门式的滑动菜单,而且完全不会借助任何API Demos里面的代码。

当然如果你还不是很了解Camera的使用方式,可以先去阅读我的上一篇文章 http://www.fengfly.com/plus/view-215100-1.html 。

关于滑动菜单的文章我也已经写过好几篇了,相信看过的朋友对滑动菜单的实现方式应该都已经比较熟悉了,那么本篇文章的重点就在于,如何在传统滑动菜单的基础上加入推拉门式的立体效果。还不了解滑动菜单如何实现的朋友,可以去翻一翻我之前的文章。

下面还是回到正题,首先来讲一下这次的实现原理吧,其实传统的滑动菜单功能就是把菜单部分放在了下面,主布局放在了上面,然后根据手指滑动的距离来偏移主布局,让菜单部分得以显示出来就行了。不过我们这次既然要做推拉门式的立体效果,就需要将传统的思维稍微转变一下,可以先让菜单部分隐藏掉,但却复制一个菜单的镜像并生成一张图片,然后在手指滑动的时候对这张图片进行三维操作,让它产生推拉门式的效果,等滑动操作结束的时候,才让真正的菜单显示出来,然后将这个图片隐藏。原理示意图如下所示:

                                      Android实现推拉门式的立体特效滑动菜单_www.fengfly.com
 

那么下面我们就开始动手实现吧,首先新建一个Android项目,起名叫做ThreeDSlidingLayoutDemo。
 

然后新建一个Image3dView类继承自View,用于生成镜像图片,以及完成三维操作,代码如下所示:

  1. public class Image3dView extends View {  
  2.  
  3.     /**  
  4.      * 源视图,用于生成图片对象。  
  5.      */ 
  6.     private View sourceView;  
  7.  
  8.     /**  
  9.      * 根据传入的源视图生成的图片对象。  
  10.      */ 
  11.     private Bitmap sourceBitmap;  
  12.  
  13.     /**  
  14.      * 源视图的宽度。  
  15.      */ 
  16.     private float sourceWidth;  
  17.  
  18.     /**  
  19.      * Matrix对象,用于对图片进行矩阵操作。  
  20.      */ 
  21.     private Matrix matrix = new Matrix();  
  22.  
  23.     /**  
  24.      * Camera对象,用于对图片进行三维操作。  
  25.      */ 
  26.     private Camera camera = new Camera();  
  27.  
  28.     /**  
  29.      * Image3dView的构造函数  
  30.      *   
  31.      * @param context  
  32.      * @param attrs  
  33.      */ 
  34.     public Image3dView(Context context, AttributeSet attrs) {  
  35.         super(context, attrs);  
  36.     }  
  37.  
  38.     /**  
  39.      * 提供外部接口,允许向Image3dView传入源视图。  
  40.      *   
  41.      * @param view  
  42.      *            传入的源视图  
  43.      */ 
  44.     public void setSourceView(View view) {  
  45.         sourceView = view;  
  46.         sourceWidth = sourceView.getWidth();  
  47.     }  
  48.  
  49.     /**  
  50.      * 清除掉缓存的图片对象。  
  51.      */ 
  52.     public void clearSourceBitmap() {  
  53.         if (sourceBitmap != null) {  
  54.             sourceBitmap = null;  
  55.         }  
  56.     }  
  57.  
  58.     @Override 
  59.     protected void onDraw(Canvas canvas) {  
  60.         super.onDraw(canvas);  
  61.         if (sourceBitmap == null) {  
  62.             getSourceBitmap();  
  63.         }  
  64.         // 计算图片需要旋转的角度  
  65.         float degree = 90 - (90 / sourceWidth) * getWidth();  
  66.         camera.save();  
  67.         camera.rotateY(degree);  
  68.         camera.getMatrix(matrix);  
  69.         camera.restore();  
  70.         // 将旋转的中心点移动到屏幕左边缘的中间位置  
  71.         matrix.preTranslate(0, -getHeight() / 2);  
  72.         matrix.postTranslate(0, getHeight() / 2);  
  73.         canvas.drawBitmap(sourceBitmap, matrix, null);  
  74.     }  
  75.  
  76.     /**  
  77.      * 获取源视图对应的图片对象。  
  78.      */ 
  79.     private void getSourceBitmap() {  
  80.         if (sourceView != null) {  
  81.             sourceView.setDrawingCacheEnabled(true);  
  82.             sourceView.layout(00, sourceView.getWidth(), sourceView.getHeight());  
  83.             sourceView.buildDrawingCache();  
  84.             sourceBitmap = sourceView.getDrawingCache();  
  85.         }  
  86.     }  
  87.  
  88. }  

可以看到,Image3dView中提供了一个setSourceView()方法,用于传递源视图进来,我们稍后复制镜像就是对它进行复制。然后在onDraw()方法里对sourceBitmap进行判断,如果为空,则去调用getSourceBitmap()方法来生成一张镜像图片,getSourceBitmap()方法的细节大家自己去看。在获得了镜像图片之后,接下来就是要计算图片的旋转角度了,这里根据Image3dView当前的宽度和源视图的总宽度进行对比,按比例算出旋转的角度。然后调用Camera的rotateY()方法,让图片团练Y轴进行旋转,并将旋转的中心点移动到屏幕左边缘的中间位置,这几行代码我们在上篇文章中已经见过了,算是挺熟悉了吧!最后调用Canvas的drawBitmap()方法把图片绘制出来。

 



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