Android FoldingLayout 折叠布局 原理及实现

Posted Coding_the_world

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android FoldingLayout 折叠布局 原理及实现相关的知识，希望对你有一定的参考价值。

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/44278417，本文出自：【张鸿洋的博客】

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 plain  copy  
  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 plain  copy  
  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 plain  copy  
  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. Android FoldingLayout 折叠布局 原理及实现

    Android FoldingLayout 折叠布局 原理及实现

    Android FoldingLayout 折叠布局 原理及实现

    鲁大师4月新机性能/流畅榜：vivo霸榜，最流畅折叠屏手机出现

    又一个展会！思嘉空间布材料迎来德国Paddle expo 展会

    转发布android app到android market的方法