程序博客网 > eclipse无法运行java

Android特效

来源：互联网 发布：eclipse无法运行java 编辑：程序博客网 时间：2024/06/11 06:09

1、概述

无意中翻到的FoldingLayout的介绍的博客，以及github地址。感觉很nice呀，于是花了点时间研究以及编写，本篇博客将带大家从最基本的原理分析，一步一步的实现我们的FoldingLayout，当然了，如果你能力过硬，可以直接下载github上的代码进行学习。

博客基本分为以下几个部分：

1、Matrix的setPolyToPoly使用

2、在图片上使用渐变和阴影

3、初步的FoldingLayout的实现，完成图片的折叠显示（可控制折叠次数、包含阴影的绘制）

4、引入手势，手指可以可以FoldingLayout的折叠

5、结合DrawerLayout实现折叠式侧滑

6、结合SlidingPaneLayout实现折叠式侧滑

ok，贴下部分的效果图：


改图对应上述3，妹子不错吧~

ok，对应上述4.


对应上述5。

ok，挑选了部分图，不然太占篇幅了。

那么接下来，我们就按照顺序往下学习了~~~

2、Matrix的setPolyToPoly使用

想要实现折叠，最重要的就是其核心的原理了，那么第一步我们要了解的就是，如何能把一张正常显示的图片，让它能够进行偏移显示。

其实精髓就在于Matrix的setPolyToPoly的方法。

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public boolean setPolyToPoly(float[] src, int srcIndex,  float[] dst, int dstIndex,int pointCount)   
简单看一下该方法的参数，src代表变换前的坐标；dst代表变换后的坐标；从src到dst的变换，可以通过srcIndex和dstIndex来制定第一个变换的点，一般可能都设置位0。pointCount代表支持的转换坐标的点数，最多支持4个。

如果不明白没事，下面通过一个简单的例子，带大家了解：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. package com.zhy.sample.folderlayout;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.graphics.Bitmap;  
  6. import android.graphics.BitmapFactory;  
  7. import android.graphics.Canvas;  
  8. import android.graphics.Matrix;  
  9. import android.os.Bundle;  
  10. import android.view.View;  
  11.   
  12. public class MatrixPolyToPolyActivity extends Activity  
  13. {  
  14.   
  15.     @Override  
  16.     protected void onCreate(Bundle savedInstanceState)  
  17.     {  
  18.         super.onCreate(savedInstanceState);  
  19.         setContentView(new PolyToPolyView(this));  
  20.     }  
  21.   
  22.     class PolyToPolyView extends View  
  23.     {  
  24.   
  25.         private Bitmap mBitmap;  
  26.         private Matrix mMatrix;  
  27.   
  28.         public PolyToPolyView(Context context)  
  29.         {  
  30.             super(context);  
  31.             mBitmap = BitmapFactory.decodeResource(getResources(),  
  32.                     R.drawable.tanyan);  
  33.             mMatrix = new Matrix();  
  34.             float[] src = { 0, 0,//  
  35.                     mBitmap.getWidth(), 0,//  
  36.                     mBitmap.getWidth(), mBitmap.getHeight(),//  
  37.                     0, mBitmap.getHeight() };  
  38.             float[] dst = { 0, 0,//  
  39.                     mBitmap.getWidth(), 100,//  
  40.                     mBitmap.getWidth(), mBitmap.getHeight() - 100,//  
  41.                     0, mBitmap.getHeight() };  
  42.             mMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);  
  43.         }  
  44.   
  45.         @Override  
  46.         protected void onDraw(Canvas canvas)  
  47.         {  
  48.             super.onDraw(canvas);  
  49.             canvas.drawBitmap(mBitmap, mMatrix, null);  
  50.         }  
  51.   
  52.     }  
  53.   
  54. }  

我们编写了一个PolyToPolyView作为我们的Activity的主视图。

在PolyToPolyView中，我们加载了一张图片，初始化我们的Matrix，注意src和dst两个数组，src就是正常情况下图片的4个顶点。dst将图片右侧两个点的y坐标做了些许的修改。

大家可以在纸上稍微标一下src和dst的四个点的位置。

最后我们在onDraw的时候进行图像的绘制，效果为：


如果你已经在纸上稍微的画了dst的四个点，那么这个结果你一定不陌生。

可以看到我们通过matrix.setPolyToPoly实现了图片的倾斜，那么引入到折叠的情况，假设折叠两次，大家有思路么，考虑一下，没有的话，继续往下看。

3、引入阴影

其实阴影应该在实现初步的折叠以后来说，这样演示其实比较方便，但是为了降低其理解的简单性，我们先把阴影抽取出来说。

假设我们现在要给上图加上阴影，希望的效果图是这样的：


可以看到我们左侧加入了一点阴影，怎么实现呢？

主要还是利用LinearGradient，我们从左到右添加一层从黑色到透明的渐变即可。

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class MatrixPolyToPolyWithShadowActivity extends Activity  
  2. {  
  3.   
  4.     @Override  
  5.     protected void onCreate(Bundle savedInstanceState)  
  6.     {  
  7.         super.onCreate(savedInstanceState);  
  8.         setContentView(new PolyToPolyView(this));  
  9.   
  10.     }  
  11.   
  12.     class PolyToPolyView extends View  
  13.     {  
  14.   
  15.         private Bitmap mBitmap;  
  16.         private Matrix mMatrix;  
  17.           
  18.         private Paint mShadowPaint;  
  19.         private Matrix mShadowGradientMatrix;  
  20.         private LinearGradient mShadowGradientShader;  
  21.   
  22.         public PolyToPolyView(Context context)  
  23.         {  
  24.             super(context);  
  25.             mBitmap = BitmapFactory.decodeResource(getResources(),  
  26.                     R.drawable.tanyan);  
  27.             mMatrix = new Matrix();  
  28.   
  29.             mShadowPaint = new Paint();  
  30.             mShadowPaint.setStyle(Style.FILL);  
  31.             mShadowGradientShader = new LinearGradient(0, 0, 0.5f, 0,  
  32.                     Color.BLACK, Color.TRANSPARENT, TileMode.CLAMP);  
  33.             mShadowPaint.setShader(mShadowGradientShader);  
  34.   
  35.             mShadowGradientMatrix = new Matrix();  
  36.             mShadowGradientMatrix.setScale(mBitmap.getWidth(), 1);  
  37.             mShadowGradientShader.setLocalMatrix(mShadowGradientMatrix);  
  38.             mShadowPaint.setAlpha((int) (0.9*255));  
  39.   
  40.         }  
  41.   
  42.         @Override  
  43.         protected void onDraw(Canvas canvas)  
  44.         {  
  45.             super.onDraw(canvas);  
  46.             canvas.save();  
  47.             float[] src = //...;  
  48.             float[] dst = //...;  
  49.             mMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);  
  50.   
  51.             canvas.concat(mMatrix);  
  52.             canvas.drawBitmap(mBitmap, 0, 0, null);  
  53.             //绘制阴影                                                                                                                        canvas.drawRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(),  
  54.                     mShadowPaint);  
  55.             canvas.restore();  
  56.   
  57.         }  
  58.   
  59.     }  
  60.   
  61. }  

重点看mShadowPaint，mShadowGradientShader，mShadowGradientMatrix一个是画笔，我们为画笔设置了一个渐变的Shader，这个Shader的参数为

new LinearGradient(0, 0, 0.5f, 0,Color.BLACK, Color.TRANSPARENT, TileMode.CLAMP);

起点（0，0）、终点（0.5f，0）；颜色从和BLACK到透明；模式为CLAMP，也就是拉伸最后一个像素。

这里你可能会问，这才为0.5个像素的区域设置了渐变，不对呀，恩，是的，继续看接下来我们使用了setLocalMatrix(mShadowGradientMatrix);，而这个

mShadowGradientMatrix将和坐标扩大了mBitmap.getWidth()倍，也就是说现在设置渐变的区域为（0.5f*mBitmap.getWidth()，0）半张图的大小，那么后半张图呢？

后半张应用CLAMP模式，拉伸的透明。

关于Shader、setLocalMatrix等用法也可以参考：Android BitmapShader 实战 实现圆形、圆角图片

4、初步实现折叠

了解了原理以及阴影的绘制以后，接下来要开始学习真正的去折叠了，我们的目标效果为：


妹子折叠成了8份，且阴影的范围为：每个沉下去夹缝的左右两侧，左侧黑色半透明遮盖，右侧短距离的黑色到透明阴影（大家可以仔细看）。

现在其实大家以及会将图片简单倾斜和添加阴影了，那么唯一的难点就是怎么将一张图分成很多快，我相信每块的折叠大家都会。

其实我们可以通过绘制该图多次，比如第一次绘制往下倾斜；第二次绘制网上倾斜；这样就和我们标题2的实现类似了，只需要利用setPolyToPoly。

那么绘制多次，每次显示肯定不是一整张图，比如第一次，我只想显示第一块，所以我们还需要clipRect的配合，说到这，应该以及揭秘了~~~

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. package com.zhy.sample.folderlayout;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.graphics.Bitmap;  
  6. import android.graphics.BitmapFactory;  
  7. import android.graphics.Canvas;  
  8. import android.graphics.Color;  
  9. import android.graphics.LinearGradient;  
  10. import android.graphics.Matrix;  
  11. import android.graphics.Paint;  
  12. import android.graphics.Paint.Style;  
  13. import android.graphics.Shader.TileMode;  
  14. import android.os.Bundle;  
  15. import android.view.View;  
  16.   
  17. public class SimpleUseActivity extends Activity  
  18. {  
  19.   
  20.     @Override  
  21.     protected void onCreate(Bundle savedInstanceState)  
  22.     {  
  23.         super.onCreate(savedInstanceState);  
  24.         setContentView(new PolyToPolyView(this));  
  25.   
  26.     }  
  27.   
  28.     class PolyToPolyView extends View  
  29.     {  
  30.   
  31.         private static final int NUM_OF_POINT = 8;  
  32.         /** 
  33.          * 图片的折叠后的总宽度 
  34.          */  
  35.         private int mTranslateDis;  
  36.   
  37.         /** 
  38.          * 折叠后的总宽度与原图宽度的比例 
  39.          */  
  40.         private float mFactor = 0.8f;  
  41.         /** 
  42.          * 折叠块的个数 
  43.          */  
  44.         private int mNumOfFolds = 8;  
  45.   
  46.         private Matrix[] mMatrices = new Matrix[mNumOfFolds];  
  47.           
  48.         private Bitmap mBitmap;  
  49.   
  50.         /** 
  51.          * 绘制黑色透明区域 
  52.          */  
  53.         private Paint mSolidPaint;  
  54.   
  55.         /** 
  56.          * 绘制阴影 
  57.          */  
  58.         private Paint mShadowPaint;  
  59.         private Matrix mShadowGradientMatrix;  
  60.         private LinearGradient mShadowGradientShader;  
  61.   
  62.         /*** 
  63.          * 原图每块的宽度 
  64.          */  
  65.         private int mFlodWidth;  
  66.         /** 
  67.          * 折叠时，每块的宽度 
  68.          */  
  69.         private int mTranslateDisPerFlod;  
  70.   
  71.         public PolyToPolyView(Context context)  
  72.         {  
  73.             super(context);  
  74.             mBitmap = BitmapFactory.decodeResource(getResources(),  
  75.                     R.drawable.tanyan);  
  76.               
  77.             //折叠后的总宽度  
  78.             mTranslateDis = (int) (mBitmap.getWidth() * mFactor);  
  79.             //原图每块的宽度  
  80.             mFlodWidth = mBitmap.getWidth() / mNumOfFolds;  
  81.             //折叠时，每块的宽度  
  82.             mTranslateDisPerFlod = mTranslateDis / mNumOfFolds;  
  83.               
  84.             //初始化matrix  
  85.             for (int i = 0; i < mNumOfFolds; i++)  
  86.             {  
  87.                 mMatrices[i] = new Matrix();  
  88.             }  
  89.   
  90.             mSolidPaint = new Paint();  
  91.             int alpha = (int) (255 * mFactor * 0.8f) ;  
  92.             mSolidPaint  
  93.                     .setColor(Color.argb((int) (alpha*0.8F), 0, 0, 0));  
  94.   
  95.             mShadowPaint = new Paint();  
  96.             mShadowPaint.setStyle(Style.FILL);  
  97.             mShadowGradientShader = new LinearGradient(0, 0, 0.5f, 0,  
  98.                     Color.BLACK, Color.TRANSPARENT, TileMode.CLAMP);  
  99.             mShadowPaint.setShader(mShadowGradientShader);  
  100.             mShadowGradientMatrix = new Matrix();  
  101.             mShadowGradientMatrix.setScale(mFlodWidth, 1);  
  102.             mShadowGradientShader.setLocalMatrix(mShadowGradientMatrix);  
  103.             mShadowPaint.setAlpha(alpha);  
  104.   
  105.             //纵轴减小的那个高度，用勾股定理计算下  
  106.             int depth = (int) Math.sqrt(mFlodWidth * mFlodWidth  
  107.                     - mTranslateDisPerFlod * mTranslateDisPerFlod)/2;  
  108.   
  109.             //转换点  
  110.             float[] src = new float[NUM_OF_POINT];  
  111.             float[] dst = new float[NUM_OF_POINT];  
  112.   
  113.             /** 
  114.              * 原图的每一块，对应折叠后的每一块，方向为左上、右上、右下、左下，大家在纸上自己画下 
  115.              */  
  116.             for (int i = 0; i < mNumOfFolds; i++)  
  117.             {  
  118.                 src[0] = i * mFlodWidth;  
  119.                 src[1] = 0;  
  120.                 src[2] = src[0] + mFlodWidth;  
  121.                 src[3] = 0;  
  122.                 src[4] = src[2];  
  123.                 src[5] = mBitmap.getHeight();  
  124.                 src[6] = src[0];  
  125.                 src[7] = src[5];  
  126.   
  127.                 boolean isEven = i % 2 == 0;  
  128.   
  129.                 dst[0] = i * mTranslateDisPerFlod;  
  130.                 dst[1] = isEven ? 0 : depth;  
  131.                 dst[2] = dst[0] + mTranslateDisPerFlod;  
  132.                 dst[3] = isEven ? depth : 0;  
  133.                 dst[4] = dst[2];  
  134.                 dst[5] = isEven ? mBitmap.getHeight() - depth : mBitmap  
  135.                         .getHeight();  
  136.                 dst[6] = dst[0];  
  137.                 dst[7] = isEven ? mBitmap.getHeight() : mBitmap.getHeight()  
  138.                         - depth;  
  139.   
  140.                 //setPolyToPoly  
  141.                 mMatrices[i].setPolyToPoly(src, 0, dst, 0, src.length >> 1);  
  142.             }  
  143.   
  144.         }  
  145.   
  146.         @Override  
  147.         protected void onDraw(Canvas canvas)  
  148.         {  
  149.             super.onDraw(canvas);  
  150.             //绘制mNumOfFolds次  
  151.             for (int i = 0; i < mNumOfFolds; i++)  
  152.             {  
  153.                   
  154.                 canvas.save();  
  155.                 //将matrix应用到canvas  
  156.                 canvas.concat(mMatrices[i]);  
  157.                 //控制显示的大小  
  158.                 canvas.clipRect(mFlodWidth * i, 0, mFlodWidth * i + mFlodWidth,  
  159.                         mBitmap.getHeight());  
  160.                 //绘制图片  
  161.                 canvas.drawBitmap(mBitmap, 0, 0, null);  
  162.                 //移动绘制阴影  
  163.                 canvas.translate(mFlodWidth * i, 0);  
  164.                 if (i % 2 == 0)  
  165.                 {  
  166.                     //绘制黑色遮盖  
  167.                     canvas.drawRect(0, 0, mFlodWidth, mBitmap.getHeight(),  
  168.                             mSolidPaint);  
  169.                 }else  
  170.                 {  
  171.                     //绘制阴影  
  172.                     canvas.drawRect(0, 0, mFlodWidth, mBitmap.getHeight(),  
  173.                             mShadowPaint);  
  174.                 }  
  175.                 canvas.restore();  
  176.             }  
  177.   
  178.         }  
  179.   
  180.     }  
  181.   
  182. }  

简单讲解下，不去管绘制阴影的部分，其实折叠就是：

1、初始化转换点，这里注释说的很清楚，大家最好在纸上绘制下，标一下每个变量。

2、为matrix.setPolyToPoly

3、绘制时使用该matrix，且clipRect控制显示区域（这个区域也很简单，原图的第一块到最后一块），最好就是绘制bitmap了。

阴影这里大家可以换个明亮点的图片去看看~~


好了，由于篇幅原因，剩下的内容将在下一篇继续完成，下一篇将展示如何将简单的图片的折叠，转化为对一个布局内所有控件的折叠效果，以及引入手势、

和DrawerLayout等结合应用到侧滑中去。

对于类似这种效果的，一定要拿出稿纸笔去画一画，否则很难弄明白。

1、概述

在上一篇Android FoldingLayout 折叠布局 原理及实现（一）我们实现了下面的1，2，3。

1、Matrix的setPolyToPoly使用

2、在图片上使用渐变和阴影

3、初步的FoldingLayout的实现，完成图片的折叠显示（可控制折叠次数、包含阴影的绘制）

4、引入手势，手指可以可以FoldingLayout的折叠

5、结合DrawerLayout实现折叠式侧滑

6、结合SlidingPaneLayout实现折叠式侧滑

本篇博客将继续完成4，5，6的内容。

上一篇博客中，我们实现了在一个自定义View种绘制我们的折叠图片，使用的是一个固定的图片，当然我们在实际使用中，希望可以折叠某一个布局而不是一张固定的图片。

所以首先我们把上一篇的博客进行修改，改为一个自定义的ViewGroup，我们叫做FoldLayout。

2、FoldLayout的实现


1、实现

我们的想法是这样的，我们的FoldLayout只能有一个直接子元素，当然这个子元素可以是RelativeLayout什么的，可以很复杂。然后只要外层套了我们的FoldLayout，就能实现折叠效果。

那么也就是说，我们的FoldLayout折叠效果展示的是它的子元素的“样子”，那么如何或者这个“样子”呢？

大家都知道，我们的ViewGroup有个方法叫做：dispatchDraw(Canvas)主要用来绘制子元素，我们可以对这个canvas进行设置matrix，以及重复调用dispatchDraw(Canvas)来实现类似上篇博客最后的效果，这样就完成了我们的可行性的分析。

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. package com.zhy.view;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Bitmap;  
  5. import android.graphics.Bitmap.Config;  
  6. import android.graphics.Canvas;  
  7. import android.graphics.Color;  
  8. import android.graphics.LinearGradient;  
  9. import android.graphics.Matrix;  
  10. import android.graphics.Paint;  
  11. import android.graphics.Paint.Style;  
  12. import android.graphics.Shader.TileMode;  
  13. import android.util.AttributeSet;  
  14. import android.view.View;  
  15. import android.view.ViewGroup;  
  16.   
  17. public class FoldLayout extends ViewGroup  
  18. {  
  19.   
  20.     private static final int NUM_OF_POINT = 8;  
  21.     /** 
  22.      * 图片的折叠后的总宽度 
  23.      */  
  24.     private float mTranslateDis;  
  25.   
  26.     protected float mFactor = 0.6f;  
  27.   
  28.     private int mNumOfFolds = 8;  
  29.   
  30.     private Matrix[] mMatrices = new Matrix[mNumOfFolds];  
  31.   
  32.     private Paint mSolidPaint;  
  33.   
  34.     private Paint mShadowPaint;  
  35.     private Matrix mShadowGradientMatrix;  
  36.     private LinearGradient mShadowGradientShader;  
  37.   
  38.     private float mFlodWidth;  
  39.     private float mTranslateDisPerFlod;  
  40.   
  41.     public FoldLayout(Context context)  
  42.     {  
  43.         this(context, null);  
  44.     }  
  45.   
  46.     public FoldLayout(Context context, AttributeSet attrs)  
  47.     {  
  48.         super(context, attrs);  
  49.   
  50.         for (int i = 0; i < mNumOfFolds; i++)  
  51.         {  
  52.             mMatrices[i] = new Matrix();  
  53.         }  
  54.   
  55.         mSolidPaint = new Paint();  
  56.         mShadowPaint = new Paint();  
  57.         mShadowPaint.setStyle(Style.FILL);  
  58.         mShadowGradientShader = new LinearGradient(0, 0, 0.5f, 0, Color.BLACK,  
  59.                 Color.TRANSPARENT, TileMode.CLAMP);  
  60.         mShadowPaint.setShader(mShadowGradientShader);  
  61.         mShadowGradientMatrix = new Matrix();  
  62.         this.setWillNotDraw(false);  
  63.   
  64.     }  
  65.   
  66.     @Override  
  67.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
  68.     {  
  69.         View child = getChildAt(0);  
  70.         measureChild(child, widthMeasureSpec, heightMeasureSpec);  
  71.         setMeasuredDimension(child.getMeasuredWidth(),  
  72.                 child.getMeasuredHeight());  
  73.   
  74.     }  
  75.   
  76.     @Override  
  77.     protected void onLayout(boolean changed, int l, int t, int r, int b)  
  78.     {  
  79.         View child = getChildAt(0);  
  80.         child.layout(0, 0, child.getMeasuredWidth(), child.getMeasuredHeight());  
  81.   
  82.         mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(),  
  83.                 Config.ARGB_8888);  
  84.         mCanvas.setBitmap(mBitmap);  
  85.         updateFold();  
  86.   
  87.     }  
  88.   
  89.     private void updateFold()  
  90.     {  
  91.         int w = getMeasuredWidth();  
  92.         int h = getMeasuredHeight();  
  93.   
  94.         mTranslateDis = w * mFactor;  
  95.         mFlodWidth = w / mNumOfFolds;  
  96.         mTranslateDisPerFlod = mTranslateDis / mNumOfFolds;  
  97.   
  98.         int alpha = (int) (255 * (1 - mFactor));  
  99.         mSolidPaint.setColor(Color.argb((int) (alpha * 0.8F), 0, 0, 0));  
  100.   
  101.         mShadowGradientMatrix.setScale(mFlodWidth, 1);  
  102.         mShadowGradientShader.setLocalMatrix(mShadowGradientMatrix);  
  103.         mShadowPaint.setAlpha(alpha);  
  104.   
  105.         float depth = (float) (Math.sqrt(mFlodWidth * mFlodWidth  
  106.                 - mTranslateDisPerFlod * mTranslateDisPerFlod) / 2);  
  107.   
  108.         float[] src = new float[NUM_OF_POINT];  
  109.         float[] dst = new float[NUM_OF_POINT];  
  110.   
  111.         for (int i = 0; i < mNumOfFolds; i++)  
  112.         {  
  113.             mMatrices[i].reset();  
  114.             src[0] = i * mFlodWidth;  
  115.             src[1] = 0;  
  116.             src[2] = src[0] + mFlodWidth;  
  117.             src[3] = 0;  
  118.             src[4] = src[2];  
  119.             src[5] = h;  
  120.             src[6] = src[0];  
  121.             src[7] = src[5];  
  122.   
  123.             boolean isEven = i % 2 == 0;  
  124.   
  125.             dst[0] = i * mTranslateDisPerFlod;  
  126.             dst[1] = isEven ? 0 : depth;  
  127.   
  128.             dst[2] = dst[0] + mTranslateDisPerFlod;  
  129.             dst[3] = isEven ? depth : 0;  
  130.             dst[4] = dst[2];  
  131.             dst[5] = isEven ? h - depth : h;  
  132.             dst[6] = dst[0];  
  133.             dst[7] = isEven ? h : h - depth;  
  134.   
  135.             for (int y = 0; y < 8; y++)  
  136.             {  
  137.                 dst[y] = Math.round(dst[y]);  
  138.             }  
  139.   
  140.             mMatrices[i].setPolyToPoly(src, 0, dst, 0, src.length >> 1);  
  141.         }  
  142.     }  
  143.   
  144.     private Canvas mCanvas = new Canvas();  
  145.     private Bitmap mBitmap;  
  146.     private boolean isReady;  
  147.   
  148.     @Override  
  149.     protected void dispatchDraw(Canvas canvas)  
  150.     {  
  151.   
  152.         if (mFactor == 0)  
  153.             return;  
  154.         if (mFactor == 1)  
  155.         {  
  156.             super.dispatchDraw(canvas);  
  157.             return;  
  158.         }  
  159.         for (int i = 0; i < mNumOfFolds; i++)  
  160.         {  
  161.             canvas.save();  
  162.   
  163.             canvas.concat(mMatrices[i]);  
  164.             canvas.clipRect(mFlodWidth * i, 0, mFlodWidth * i + mFlodWidth,  
  165.                     getHeight());  
  166.             if (isReady)  
  167.             {  
  168.                 canvas.drawBitmap(mBitmap, 0, 0, null);  
  169.             } else  
  170.             {  
  171.                 // super.dispatchDraw(canvas);  
  172.                 super.dispatchDraw(mCanvas);  
  173.                 canvas.drawBitmap(mBitmap, 0, 0, null);  
  174.                 isReady = true;  
  175.             }  
  176.             canvas.translate(mFlodWidth * i, 0);  
  177.             if (i % 2 == 0)  
  178.             {  
  179.                 canvas.drawRect(0, 0, mFlodWidth, getHeight(), mSolidPaint);  
  180.             } else  
  181.             {  
  182.                 canvas.drawRect(0, 0, mFlodWidth, getHeight(), mShadowPaint);  
  183.             }  
  184.             canvas.restore();  
  185.         }  
  186.     }  
  187.         //...dispatchDraw  
  188.   
  189.     public void setFactor(float factor)  
  190.     {  
  191.         this.mFactor = factor;  
  192.         updateFold();  
  193.         invalidate();  
  194.     }  
  195.   
  196.     public float getFactor()  
  197.     {  
  198.         return mFactor;  
  199.     }  
  200.   
  201. }  


上述代码大家应该不陌生，只是把从View对单个图片进行绘制的修改为了ViewGroup。

既然是ViewGroup少不了onMeasure,onLayout等。测量和布局完全依赖于它的子View。

然后将需要初始化的一些东西，不依赖于宽度的，比如画笔什么的都放在构造中；依赖宽高的，都在onLayout之后，调用了updateFold();进行初始化相关代码。

updateFold中的代码，我们也不陌生，因为和上篇博客基本一致。主要就是计算mFlodWidth，mTranslateDisPerFlod以及根据设置的mNumOfFolds去循环初始化我们的matrix.

matrix完成setPolyToPoly以后，我们就可以去绘制了：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. private Canvas mCanvas = new Canvas();  
  2.     private Bitmap mBitmap;  
  3.     private boolean isReady;  
  4.   
  5.     @Override  
  6.     protected void dispatchDraw(Canvas canvas)  
  7.     {  
  8.   
  9.         if (mFactor == 0)  
  10.             return;  
  11.         if (mFactor == 1)  
  12.         {  
  13.             super.dispatchDraw(canvas);  
  14.             return;  
  15.         }  
  16.         for (int i = 0; i < mNumOfFolds; i++)  
  17.         {  
  18.             canvas.save();  
  19.   
  20.             canvas.concat(mMatrices[i]);  
  21.             canvas.clipRect(mFlodWidth * i, 0, mFlodWidth * i + mFlodWidth,  
  22.                     getHeight());  
  23.             if (isReady)  
  24.             {  
  25.                 canvas.drawBitmap(mBitmap, 0, 0, null);  
  26.             } else  
  27.             {  
  28.                 // super.dispatchDraw(canvas);  
  29.                 super.dispatchDraw(mCanvas);  
  30.                 canvas.drawBitmap(mBitmap, 0, 0, null);  
  31.                 isReady = true;  
  32.             }  
  33.             canvas.translate(mFlodWidth * i, 0);  
  34.             if (i % 2 == 0)  
  35.             {  
  36.                 canvas.drawRect(0, 0, mFlodWidth, getHeight(), mSolidPaint);  
  37.             } else  
  38.             {  
  39.                 canvas.drawRect(0, 0, mFlodWidth, getHeight(), mShadowPaint);  
  40.             }  
  41.             canvas.restore();  
  42.         }  
  43.     }  

mFactor主要代表折叠后的总宽度与原宽度的比值，默认不折叠时为1，所以直接调用super.dispatchDraw(canvas);
那么如果为0，说明全部折起来了，我们直接if (mFactor == 0)return;就不要绘制了。

如果(0,1)之间就是正常情况了，如果还记得上一篇博客内容，无非就是根据mNumOfFolds循环绘制多次，每次绘制的时候设置matrix,利用clipRect就可以实现我们的折叠。

这里大家注意看，我在第一次绘制的时候，调用了：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. super.dispatchDraw(mCanvas);  
  2. canvas.drawBitmap(mBitmap, 0, 0, null);  
  3. isReady = true;  


在我们自己new的mBitmap中也绘制了一份图片，因为我不希望每次都是调用super.dispatchDraw，所以只要isReady=true，我们就可以去调用绘制mBitmap而避免调用super.dispatchDraw()。

绘制完成图片，就是绘制黑色的遮盖和阴影了~~，就是两个Rect的绘制。

完成这些以后，我们可以简单的坐下测试，使用我们的布局。

2、测试

布局文件:

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <com.zhy.view.FoldLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/id_fold_layout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <ImageView  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:scaleType="fitXY"  
  11.         android:src="@drawable/xueshan" />  
  12.   
  13. </com.zhy.view.FoldLayout>  

Activity

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. package com.zhy.sample.folderlayout;  
  2.   
  3. import com.zhy.view.FoldLayout;  
  4.   
  5. import android.animation.ObjectAnimator;  
  6. import android.annotation.SuppressLint;  
  7. import android.app.Activity;  
  8. import android.os.Bundle;  
  9.   
  10. public class FoldLayoutActivity extends Activity  
  11. {  
  12.     private FoldLayout mFoldLayout;  
  13.   
  14.     @Override  
  15.     protected void onCreate(Bundle savedInstanceState)  
  16.     {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.activity_fold);  
  19.   
  20.         mFoldLayout = (FoldLayout) findViewById(R.id.id_fold_layout);  
  21.       
  22.         /*mFoldLayout.post(new Runnable() 
  23.         { 
  24.  
  25.             @SuppressLint("NewApi") 
  26.             @Override 
  27.             public void run() 
  28.             { 
  29.                 ObjectAnimator.ofFloat(mFoldLayout, "factor", 1, 0, 1) 
  30.                         .setDuration(5000).start(); 
  31.             } 
  32.         });*/  
  33.   
  34.     }  
  35. }  


现在的效果是，我们把mFactor改为0.6f:


当然了，此时只是静态的，但是我们成功的完成了绘制一个静态图到FlodLayout。

接下来我们为其增加手指的触摸折叠功能。

3、TouchFoldLayout


1、实现

增加触摸功能其实很简单，我们的绘制依赖mFactor这个值，我们只要在onTouchEvent里面去累加手指移动距离，然后动态更新这个值就可以了。

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. package com.zhy.view;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.util.AttributeSet;  
  6. import android.view.GestureDetector;  
  7. import android.view.MotionEvent;  
  8.   
  9. public class TouchFoldLayout extends FoldLayout  
  10. {  
  11.   
  12.     private GestureDetector mScrollGestureDetector;  
  13.   
  14.     public TouchFoldLayout(Context context, AttributeSet attrs)  
  15.     {  
  16.         super(context, attrs);  
  17.         init(context, attrs);  
  18.     }  
  19.   
  20.     public void init(Context context, AttributeSet attrs)  
  21.     {  
  22.         mScrollGestureDetector = new GestureDetector(context,  
  23.                 new ScrollGestureDetector());  
  24.   
  25.     }  
  26.   
  27.     @Override  
  28.     public boolean onTouchEvent(MotionEvent event)  
  29.     {  
  30.         return mScrollGestureDetector.onTouchEvent(event);  
  31.     }  
  32.   
  33.     private int mTranslation = -1;  
  34.   
  35.     @Override  
  36.     protected void dispatchDraw(Canvas canvas)  
  37.     {  
  38.         if (mTranslation == -1)  
  39.             mTranslation = getWidth();  
  40.         super.dispatchDraw(canvas);  
  41.     }  
  42.   
  43.     class ScrollGestureDetector extends GestureDetector.SimpleOnGestureListener  
  44.     {  
  45.         @Override  
  46.         public boolean onDown(MotionEvent e)  
  47.         {  
  48.             return true;  
  49.         }  
  50.   
  51.         @Override  
  52.         public boolean onScroll(MotionEvent e1, MotionEvent e2,  
  53.                 float distanceX, float distanceY)  
  54.         {  
  55.             mTranslation -= distanceX;  
  56.   
  57.             if (mTranslation < 0)  
  58.             {  
  59.                 mTranslation = 0;  
  60.             }  
  61.             if (mTranslation > getWidth())  
  62.             {  
  63.                 mTranslation = getWidth();  
  64.             }  
  65.   
  66.             float factor = Math.abs(((float) mTranslation)  
  67.                     / ((float) getWidth()));  
  68.   
  69.             setFactor(factor);  
  70.   
  71.             return true;  
  72.         }  
  73.     }  
  74.   
  75. }  


我们选择继承FoldLayout，重写其onTouchEvent，然后通过mScrollGestureDetector获取移动的距离，最终和width做比值得到我们的factor，然后调用setFactor进行改变。

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public void setFactor(float factor)  
  2. {  
  3.     this.mFactor = factor;  
  4.     updateFold();  
  5.     invalidate();  
  6. }  


 

ok,这样就完成了引入手指的控制。


2、测试

现在改变下布局文件里面的类：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <com.zhy.view.TouchFoldLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/id_fold_layout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <ImageView  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:scaleType="fitXY"  
  11.         android:src="@drawable/xueshan" />  
  12.   
  13. </com.zhy.view.TouchFoldLayout>  


Activity不变，看一下测试效果：（测试前记得把mFactor改为默认值1.0f）


至此我们完成了炫酷的效果，但是我们还需要应用到具体的案例上，否则就是特技，有必要duang一下。

于是我们首先考虑增加到侧滑菜单中去，侧滑菜单有很多选择，google也提供了两个，一个是DrawerLayout，另一个是SlidingPaneLayout。

下面分别展示如何整合入这两个布局。

首先看SlidingPaneLayout，因为DrawerLayout还有些地方需要修改。

4、FoldSlidingPanelLayout


1、实现

对于SlidingPaneLayout的使用，应该没什么问题吧，就是把布局文件的根布局设置为SlidingPaneLayout，然后里面放两个子布局，一个代表侧滑菜单，一个代表内容区域。

那么，我们怎么整合到SlidingPaneLayout种去呢？大致两种方法：

1、把我们的折叠菜单作为侧滑布局的根布局，然后在Activity种去监听setPanelSlideListener做出改变。

2、直接继承SlidingPaneLayout，再其内部将child(0)用FoldLayout包起来，然后监听setPanelSlideListener。

这里我们选择后者，因为后者封装好了，就能直接按照SlidingPaneLayout原本的方式去使用了，不需要做多余的操作。

下面看代码：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. package com.zhy.view;  
  2.   
  3. import android.content.Context;  
  4. import android.support.v4.widget.SlidingPaneLayout;  
  5. import android.util.AttributeSet;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class FoldSlidingPanelLayout extends SlidingPaneLayout  
  10. {  
  11.     public FoldSlidingPanelLayout(Context context, AttributeSet attrs)  
  12.     {  
  13.         super(context, attrs);  
  14.     }  
  15.     @Override  
  16.     protected void onAttachedToWindow()  
  17.     {  
  18.         super.onAttachedToWindow();  
  19.           
  20.         View child = getChildAt(0);  
  21.         if (child != null) {  
  22.   
  23.             removeView(child);  
  24.             final FoldLayout foldLayout = new FoldLayout(getContext());  
  25.             //foldLayout.setAnchor(0);  
  26.             foldLayout.addView(child);  
  27.             ViewGroup.LayoutParams layPar = child.getLayoutParams();  
  28.             addView(foldLayout, 0, layPar);  
  29.               
  30.             setPanelSlideListener(new PanelSlideListener()  
  31.             {  
  32.                   
  33.                 @Override  
  34.                 public void onPanelSlide(View arg0, float arg1)  
  35.                 {  
  36.                     foldLayout.setFactor(arg1);  
  37.                 }  
  38.                   
  39.                 @Override  
  40.                 public void onPanelOpened(View arg0)  
  41.                 {  
  42.                     // TODO Auto-generated method stub  
  43.                       
  44.                 }  
  45.                   
  46.                 @Override  
  47.                 public void onPanelClosed(View arg0)  
  48.                 {  
  49.                       
  50.                 }  
  51.             });  
  52.               
  53.         }  
  54.     }  
  55. }  


我们继承了SlidingPaneLayout，然后在onAttachedToWindow中，取出侧滑的布局，在外层包上一个FoldLayout；并且在内部去监听setPanelSlideListener，在onPanelSlide种根据参数，去动态设置FoldLayout的factor.

2、测试

1、布局文件

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <com.zhy.view.FoldSlidingPanelLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/id_drawerLayout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <fragment  
  8.         android:id="@+id/id_left_menu"  
  9.         android:name="com.zhy.sample.folderlayout.LeftMenuFragment"  
  10.         android:layout_width="240dp"  
  11.         android:layout_height="match_parent" />  
  12.   
  13.     <RelativeLayout  
  14.         android:layout_width="match_parent"  
  15.         android:layout_height="match_parent" >  
  16.   
  17.         <ImageView  
  18.             android:layout_width="match_parent"  
  19.             android:layout_height="match_parent"  
  20.             android:scaleType="fitCenter"  
  21.             android:src="@drawable/xueshan" />  
  22.     </RelativeLayout>  
  23.   
  24. </com.zhy.view.FoldSlidingPanelLayout>  

我们的菜单使用的是一个fragment。

2、菜单布局

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. package com.zhy.sample.folderlayout;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8. import android.widget.ArrayAdapter;  
  9. import android.widget.ListView;  
  10.   
  11. public class LeftMenuFragment extends Fragment  
  12. {  
  13.     private ListView mMenus;  
  14.     private String[] mMenuItemStr = { "Bear", "Bird", "Cat", "Tigers", "Panda" };  
  15.   
  16.     @Override  
  17.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  18.             Bundle savedInstanceState)  
  19.     {  
  20.   
  21.         View view = inflater.inflate(R.layout.fragment_left_menu, container,  
  22.                 false);  
  23.         mMenus = (ListView) view.findViewById(R.id.id_left_menu_lv);  
  24.         mMenus.setAdapter(new ArrayAdapter<String>(getActivity(),  
  25.                 R.layout.item_left_menu, mMenuItemStr));  
  26.         return view;  
  27.     }  
  28. }  


 

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <ListView xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/id_left_menu_lv"  
  4.     android:layout_width="240dp"  
  5.     android:layout_height="match_parent"  
  6.     android:layout_gravity="start"  
  7.     android:background="#FFF"  
  8.     android:choiceMode="singleChoice" />  


Item就是一个TextView，就不贴了~~

3、Activity

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. package com.zhy.sample.folderlayout;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.FragmentActivity;  
  5.   
  6. public class SlidingPanelLayoutSampleActivity extends FragmentActivity  
  7. {  
  8.     @Override  
  9.     protected void onCreate(Bundle arg0)  
  10.     {  
  11.         super.onCreate(arg0);  
  12.         setContentView(R.layout.activity_slidingpanellayout);  
  13.     }  
  14. }  

恩，Activity里面什么都不用做，引入布局文件就行了。

最好看看效果图。

3、效果图


这里菜单块数比较多，大家可以自行修改运行。

ok，到此我们将FoldLayout与SlidingPaneLayout进行了整合，构造了这么个个性的侧滑。

最好还剩下与Drawerlayout的整合。

5、FoldDrawerLayout

1、实现

关于DrawerLayout的使用，与上面的SlidingPaneLayout类似，写写布局文件，引入Activity就好了。我们依然使用上述的方法2，去实现一个DrawerLayout的子类。

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. package com.zhy.view;  
  2.   
  3. import android.content.Context;  
  4. import android.support.v4.view.GravityCompat;  
  5. import android.support.v4.view.ViewCompat;  
  6. import android.support.v4.widget.DrawerLayout;  
  7. import android.util.AttributeSet;  
  8. import android.util.Log;  
  9. import android.view.Gravity;  
  10. import android.view.View;  
  11. import android.view.ViewGroup;  
  12.   
  13. public class FoldDrawerLayout extends DrawerLayout  
  14. {  
  15.     private static final String TAG = "DrawerFoldLayout";  
  16.   
  17.     public FoldDrawerLayout(Context context, AttributeSet attrs)  
  18.     {  
  19.         super(context, attrs);  
  20.     }  
  21.   
  22.     @Override  
  23.     protected void onAttachedToWindow()  
  24.     {  
  25.         super.onAttachedToWindow();  
  26.   
  27.         final int childCount = getChildCount();  
  28.         for (int i = 0; i < childCount; i++)  
  29.         {  
  30.             final View child = getChildAt(i);  
  31.             if (isDrawerView2(child))  
  32.             {  
  33.                 Log.e(TAG, "at" + i);  
  34.                 FoldLayout foldlayout = new FoldLayout(  
  35.                         getContext());  
  36.                 //<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">foldlayout</SPAN><SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">.setAnchor(1);</SPAN>  
  37.                 removeView(child);  
  38.                 foldlayout.addView(child);  
  39.                 ViewGroup.LayoutParams layPar = child.getLayoutParams();  
  40.                 addView(foldlayout, i, layPar);  
  41.             }  
  42.   
  43.         }  
  44.         setDrawerListener(new DrawerListener()  
  45.         {  
  46.   
  47.             @Override  
  48.             public void onDrawerStateChanged(int arg0)  
  49.             {  
  50.                 // TODO Auto-generated method stub  
  51.   
  52.             }  
  53.   
  54.             @Override  
  55.             public void onDrawerSlide(View drawerView, float slideOffset)  
  56.             {  
  57.   
  58.                 if (drawerView instanceof FoldLayout)  
  59.                 {  
  60.                     FoldLayout foldLayout = ((FoldLayout) drawerView);  
  61.                     Log.e(TAG, "slideOffset = " + slideOffset);  
  62.                     foldLayout.setFactor(slideOffset);  
  63.                 }  
  64.   
  65.             }  
  66.   
  67.             @Override  
  68.             public void onDrawerOpened(View arg0)  
  69.             {  
  70.   
  71.             }  
  72.   
  73.             @Override  
  74.             public void onDrawerClosed(View arg0)  
  75.             {  
  76.   
  77.             }  
  78.         });  
  79.   
  80.     }  
  81.   
  82.     boolean isDrawerView2(View child)  
  83.     {  
  84.         final int gravity = ((LayoutParams) child.getLayoutParams()).gravity;  
  85.         final int absGravity = GravityCompat.getAbsoluteGravity(gravity,  
  86.                 ViewCompat.getLayoutDirection(child));  
  87.         return (absGravity & (Gravity.LEFT | Gravity.RIGHT)) != 0;  
  88.     }  
  89.   
  90. }  


看到这，大家可能会想，然后就和SlidingPaneLayout一样，写写布局文件就好了？其实不是的，如果你这么做了，你会发现侧滑很难拉出来，因为是这样的：
DraweLayout的侧滑菜单，比如我们拉出来50%，那么正常来说显示的时侧滑布局右侧的50%，但是这个0.5如果设置给我们的factor，它会把布局缩小到50%且在左边。

导致，你拉了50%其实还是上面都看不到，因为折叠到左侧的50%去了。这里依然有两种解决方案：

1、结合属性动画，做偏移，具体可参考：Android DrawerLayout 高仿QQ5.2双向侧滑菜单

2、让我们的折叠，收缩到最终的位置可以控制，我们现在统统往最坐标收缩，如果可以设置为最右边，那么本例就没有问题了。


2、引入anchor

我们引入一个mAnchor变量，值范围[0，1]，控制FoldLayout最终折叠到的位置。其实修改的代码比较少，我贴一下修改的代码：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. private void updateFold()  
  2.     {  
  3.           
  4.         //...   
  5.         float anchorPoint = mAnchor * w;  
  6.         float midFold = (anchorPoint / mFlodWidth);  
  7.   
  8.         for (int i = 0; i < mNumOfFolds; i++)  
  9.         {  
  10.             //引入anchor  
  11.             dst[0] = (anchorPoint > i * mFlodWidth) ? anchorPoint  
  12.                     + (i - midFold) * mTranslateDisPerFlod : anchorPoint  
  13.                     - (midFold - i) * mTranslateDisPerFlod;  
  14.             dst[2] = (anchorPoint > (i + 1) * mFlodWidth) ? anchorPoint  
  15.                     + (i + 1 - midFold) * mTranslateDisPerFlod : anchorPoint  
  16.                     - (midFold - i - 1) * mTranslateDisPerFlod;                                                             }                                                                                                                       }  
  17.               


唯一改变的就是dst[0]和dst[2]的坐标，当然了，anchor引入以后，你需要判断原始的坐标是否小于anchorPoint，如果小于需要加一些偏移量，大于则反之。

记得：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public void setAnchor(float anchor)  
  2.     {  
  3.         this.mAnchor = anchor;  
  4.         updateFold();  
  5.         invalidate();  
  6.     }  


打开上述的FoldDrawerLayout的这行代码：foldlayout.setAnchor(1);让其最后合并位置为右侧。

使用方式，现在就是写好布局文件，大家直接使用SlidingPaneLayout那个布局文件，改一个根布局类就行。

3、效果图




到此，我们完成了折叠式菜单从原理到实战的整个过程。当然了，可以完善还有优化的地方很多，大家可以自己去find and fix 。

 

0 0
eclipse无法运行java eclipse无法运行java
原创粉丝点击
热门IT博客
mac菜单栏图标删除mac菜单栏图标删除
qt网络编程实战源码qt网络编程实战源码
sweetalk好用吗 知乎
澳大利亚学生签证知乎
涉黄网络犯罪
现代诗集推荐 知乎
js 汉字长度
stereonet软件
淘宝代理协议
mac option
js随机数1到25
unity3d光效
卡祖笛 淘宝
网狐数据库配置生成器
ipad越狱软件
java 多线程并发处理
电脑分区数据恢复
网络证券交易平台
ctr预估算法
减肥从130到90 知乎
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 毕业季贺敬轩 毕业季歌曲贺敬轩 关于毕业季的歌 毕业季歌 幼儿园毕业歌曲 初三毕业歌曲 毕业歌歌词 适合毕业唱的歌 大班歌曲毕业歌简谱 大班毕业歌歌谱 毕业唱什么歌 苏打绿 毕业歌 毕业歌 歌词 毕业该听的歌 幼儿园的毕业歌 歌曲毕业歌 适合毕业的歌 大班毕业歌 毕业歌下载 毕业唱的歌有哪些流行 毕业伤感的歌 2017毕业必听十首歌 六年级毕业的歌 毕业歌额尔古纳乐队 毕业歌简谱 初三毕业歌 小学毕业歌 幼儿园毕业歌 毕业歌 聂耳 好听的毕业歌 幼儿园毕业歌mp3 毕业歌幼儿园 儿童毕业歌 巧虎毕业歌 幼儿园毕业歌歌词 毕业歌 幼儿园 毕业歌有哪些 毕业唱的歌 毕业听的歌 能把人唱哭的毕业的歌 一首超好听的毕业歌

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里