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的方法。
|
1 |
public boolean setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex,int pointCount) |
简单看一下该方法的参数，src代表变换前的坐标；dst代表变换后的坐标；从src到dst的变换，可以通过srcIndex和dstIndex来制定第一个变换的点，一般可能都设置位0。pointCount代表支持的转换坐标的点数，最多支持4个。
如果不明白没事，下面通过一个简单的例子，带大家了解：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
package com.zhy.sample.folderlayout; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Matrix; import android.os.Bundle; import android.view.View; public class MatrixPolyToPolyActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new PolyToPolyView(this)); } class PolyToPolyView extends View { private Bitmap mBitmap; private Matrix mMatrix; public PolyToPolyView(Context context) { super(context); mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.tanyan); mMatrix = new Matrix(); float[] src = { 0, 0,// mBitmap.getWidth(), 0,// mBitmap.getWidth(), mBitmap.getHeight(),// 0, mBitmap.getHeight() }; float[] dst = { 0, 0,// mBitmap.getWidth(), 100,// mBitmap.getWidth(), mBitmap.getHeight() - 100,// 0, mBitmap.getHeight() }; mMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawBitmap(mBitmap, mMatrix, null); } } } |
我们编写了一个PolyToPolyView作为我们的Activity的主视图。
在PolyToPolyView中，我们加载了一张图片，初始化我们的Matrix，注意src和dst两个数组，src就是正常情况下图片的4个顶点。dst将图片右侧两个点的y坐标做了些许的修改。
大家可以在纸上稍微标一下src和dst的四个点的位置。
最后我们在onDraw的时候进行图像的绘制，效果为：
如果你已经在纸上稍微的画了dst的四个点，那么这个结果你一定不陌生。
可以看到我们通过matrix.setPolyToPoly实现了图片的倾斜，那么引入到折叠的情况，假设折叠两次，大家有思路么，考虑一下，没有的话，继续往下看。
3、引入行图像的绘制，效果为：
如果你已经在纸上稍微的画了dst的四个点，那么这个结果你一定不陌生。
可以看到我们通过matrix.setPolyToPoly实现了图片的倾斜，那么引入到折叠的情况，假设折叠两次，大家有思路么，考虑一下，没有的话，继续往下看。
