Android中FoldingLayout折疊布局的用法及實(shí)戰(zhàn)全攻略
一、概述
無(wú)意中翻到的FoldingLayout的介紹的博客，以及github地址。感覺(jué)很nice呀，于是花了點(diǎn)時(shí)間研究以及編寫(xiě)，本篇博客將帶大家從最基本的原理分析，一步一步的實(shí)現(xiàn)我們的FoldingLayout，當(dāng)然了，如果你能力過(guò)硬，可以直接下載github上的代碼進(jìn)行學(xué)習(xí)。
博客基本分為以下幾個(gè)部分：
1、Matrix的setPolyToPoly使用
2、在圖片上使用漸變和陰影
3、初步的FoldingLayout的實(shí)現(xiàn)，完成圖片的折疊顯示（可控制折疊次數(shù)、包含陰影的繪制）
4、引入手勢(shì)，手指可以可以FoldingLayout的折疊
5、結(jié)合DrawerLayout實(shí)現(xiàn)折疊式側(cè)滑
6、結(jié)合SlidingPaneLayout實(shí)現(xiàn)折疊式側(cè)滑
ok，貼下部分的效果圖：
改圖對(duì)應(yīng)上述3，妹子不錯(cuò)吧~
ok，對(duì)應(yīng)上述4.
對(duì)應(yīng)上述5。
ok，挑選了部分圖，不然太占篇幅了。
那么接下來(lái)，我們就按照順序往下學(xué)習(xí)了~~~
二、Matrix的setPolyToPoly使用
想要實(shí)現(xiàn)折疊，最重要的就是其核心的原理了，那么第一步我們要了解的就是，如何能把一張正常顯示的圖片，讓它能夠進(jìn)行偏移顯示。
其實(shí)精髓就在于Matrix的setPolyToPoly的方法。
public boolean setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex,int pointCount)
簡(jiǎn)單看一下該方法的參數(shù)，src代表變換前的坐標(biāo)；dst代表變換后的坐標(biāo)；從src到dst的變換，可以通過(guò)srcIndex和dstIndex來(lái)制定第一個(gè)變換的點(diǎn)，一般可能都設(shè)置位0。pointCount代表支持的轉(zhuǎn)換坐標(biāo)的點(diǎn)數(shù)，最多支持4個(gè)。
如果不明白沒(méi)事，下面通過(guò)一個(gè)簡(jiǎn)單的例子，帶大家了解：
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);
}
}
}
我們編寫(xiě)了一個(gè)PolyToPolyView作為我們的Activity的主視圖。
在PolyToPolyView中，我們加載了一張圖片，初始化我們的Matrix，注意src和dst兩個(gè)數(shù)組，src就是正常情況下圖片的4個(gè)頂點(diǎn)。dst將圖片右側(cè)兩個(gè)點(diǎn)的y坐標(biāo)做了些許的修改。
大家可以在紙上稍微標(biāo)一下src和dst的四個(gè)點(diǎn)的位置。
最后我們?cè)趏nDraw的時(shí)候進(jìn)行圖像的繪制，效果為：
如果你已經(jīng)在紙上稍微的畫(huà)了dst的四個(gè)點(diǎn)，那么這個(gè)結(jié)果你一定不陌生。
可以看到我們通過(guò)matrix.setPolyToPoly實(shí)現(xiàn)了圖片的傾斜，那么引入到折疊的情況，假設(shè)折疊兩次，大家有思路么，考慮一下，沒(méi)有的話，繼續(xù)往下看。
三、引入陰影
其實(shí)陰影應(yīng)該在實(shí)現(xiàn)初步的折疊以后來(lái)說(shuō)，這樣演示其實(shí)比較方便，但是為了降低其理解的簡(jiǎn)單性，我們先把陰影抽取出來(lái)說(shuō)。
假設(shè)我們現(xiàn)在要給上圖加上陰影，希望的效果圖是這樣的：
可以看到我們左側(cè)加入了一點(diǎn)陰影，怎么實(shí)現(xiàn)呢？
主要還是利用LinearGradient，我們從左到右添加一層從黑色到透明的漸變即可。
public class MatrixPolyToPolyWithShadowActivity 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;
private Paint mShadowPaint;
private Matrix mShadowGradientMatrix;
private LinearGradient mShadowGradientShader;
public PolyToPolyView(Context context)
{
super(context);
mBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.tanyan);
mMatrix = new Matrix();
mShadowPaint = new Paint();
mShadowPaint.setStyle(Style.FILL);
mShadowGradientShader = new LinearGradient(0, 0, 0.5f, 0,
Color.BLACK, Color.TRANSPARENT, TileMode.CLAMP);
mShadowPaint.setShader(mShadowGradientShader);
mShadowGradientMatrix = new Matrix();
mShadowGradientMatrix.setScale(mBitmap.getWidth(), 1);
mShadowGradientShader.setLocalMatrix(mShadowGradientMatrix);
mShadowPaint.setAlpha((int) (0.9*255));
}
@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.save();
float[] src = //...;
float[] dst = //...;
mMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);
canvas.concat(mMatrix);
canvas.drawBitmap(mBitmap, 0, 0, null);
//繪制陰影 canvas.drawRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(),
mShadowPaint);
canvas.restore();
}
}
}
重點(diǎn)看mShadowPaint，mShadowGradientShader，mShadowGradientMatrix一個(gè)是畫(huà)筆，我們?yōu)楫?huà)筆設(shè)置了一個(gè)漸變的Shader，這個(gè)Shader的參數(shù)為
new LinearGradient(0, 0, 0.5f, 0,Color.BLACK, Color.TRANSPARENT, TileMode.CLAMP);
起點(diǎn)（0，0）、終點(diǎn)（0.5f，0）；顏色從和BLACK到透明；模式為CLAMP，也就是拉伸最后一個(gè)像素。
這里你可能會(huì)問(wèn)，這才為0.5個(gè)像素的區(qū)域設(shè)置了漸變，不對(duì)呀，恩，是的，繼續(xù)看接下來(lái)我們使用了setLocalMatrix(mShadowGradientMatrix);，而這個(gè)
mShadowGradientMatrix將和坐標(biāo)擴(kuò)大了mBitmap.getWidth()倍，也就是說(shuō)現(xiàn)在設(shè)置漸變的區(qū)域?yàn)椋?.5f*mBitmap.getWidth()，0）半張圖的大小，那么后半張圖呢？
后半張應(yīng)用CLAMP模式，拉伸的透明。
關(guān)于Shader、setLocalMatrix等用法也可以參考：Android BitmapShader 實(shí)戰(zhàn) 實(shí)現(xiàn)圓形、圓角圖片
四、初步實(shí)現(xiàn)折疊
了解了原理以及陰影的繪制以后，接下來(lái)要開(kāi)始學(xué)習(xí)真正的去折疊了，我們的目標(biāo)效果為：
妹子折疊成了8份，且陰影的范圍為：每個(gè)沉下去夾縫的左右兩側(cè)，左側(cè)黑色半透明遮蓋，右側(cè)短距離的黑色到透明陰影（大家可以仔細(xì)看）。
現(xiàn)在其實(shí)大家以及會(huì)將圖片簡(jiǎn)單傾斜和添加陰影了，那么唯一的難點(diǎn)就是怎么將一張圖分成很多快，我相信每塊的折疊大家都會(huì)。
其實(shí)我們可以通過(guò)繪制該圖多次，比如第一次繪制往下傾斜；第二次繪制網(wǎng)上傾斜；這樣就和我們標(biāo)題2的實(shí)現(xiàn)類(lèi)似了，只需要利用setPolyToPoly。
那么繪制多次，每次顯示肯定不是一整張圖，比如第一次，我只想顯示第一塊，所以我們還需要clipRect的配合，說(shuō)到這，應(yīng)該以及揭秘了~~~
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.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Shader.TileMode;
import android.os.Bundle;
import android.view.View;
public class SimpleUseActivity extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(new PolyToPolyView(this));
}
class PolyToPolyView extends View
{
private static final int NUM_OF_POINT = 8;
/**
* 圖片的折疊后的總寬度
*/
private int mTranslateDis;
/**
* 折疊后的總寬度與原圖寬度的比例
*/
private float mFactor = 0.8f;
/**
* 折疊塊的個(gè)數(shù)
*/
private int mNumOfFolds = 8;
private Matrix[] mMatrices = new Matrix[mNumOfFolds];
private Bitmap mBitmap;
/**
* 繪制黑色透明區(qū)域
*/
private Paint mSolidPaint;
/**
* 繪制陰影
*/
private Paint mShadowPaint;
private Matrix mShadowGradientMatrix;
private LinearGradient mShadowGradientShader;
/***
* 原圖每塊的寬度
*/
private int mFlodWidth;
/**
* 折疊時(shí)，每塊的寬度
*/
private int mTranslateDisPerFlod;
public PolyToPolyView(Context context)
{
super(context);
mBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.tanyan);
//折疊后的總寬度
mTranslateDis = (int) (mBitmap.getWidth() * mFactor);
//原圖每塊的寬度
mFlodWidth = mBitmap.getWidth() / mNumOfFolds;
//折疊時(shí)，每塊的寬度
mTranslateDisPerFlod = mTranslateDis / mNumOfFolds;
//初始化matrix
for (int i = 0; i < mNumOfFolds; i++)
{
mMatrices[i] = new Matrix();
}
mSolidPaint = new Paint();
int alpha = (int) (255 * mFactor * 0.8f) ;
mSolidPaint
.setColor(Color.argb((int) (alpha*0.8F), 0, 0, 0));
mShadowPaint = new Paint();
mShadowPaint.setStyle(Style.FILL);
mShadowGradientShader = new LinearGradient(0, 0, 0.5f, 0,
Color.BLACK, Color.TRANSPARENT, TileMode.CLAMP);
mShadowPaint.setShader(mShadowGradientShader);
mShadowGradientMatrix = new Matrix();
mShadowGradientMatrix.setScale(mFlodWidth, 1);
mShadowGradientShader.setLocalMatrix(mShadowGradientMatrix);
mShadowPaint.setAlpha(alpha);
//縱軸減小的那個(gè)高度，用勾股定理計(jì)算下
int depth = (int) Math.sqrt(mFlodWidth * mFlodWidth
- mTranslateDisPerFlod * mTranslateDisPerFlod)/2;
//轉(zhuǎn)換點(diǎn)
float[] src = new float[NUM_OF_POINT];
float[] dst = new float[NUM_OF_POINT];
/**
* 原圖的每一塊，對(duì)應(yīng)折疊后的每一塊，方向?yàn)樽笊稀⒂疑?、右下、左下，大家在紙上自己?huà)下
*/
for (int i = 0; i < mNumOfFolds; i++)
{
src[0] = i * mFlodWidth;
src[1] = 0;
src[2] = src[0] + mFlodWidth;
src[3] = 0;
src[4] = src[2];
src[5] = mBitmap.getHeight();
src[6] = src[0];
src[7] = src[5];
boolean isEven = i % 2 == 0;
dst[0] = i * mTranslateDisPerFlod;
dst[1] = isEven ? 0 : depth;
dst[2] = dst[0] + mTranslateDisPerFlod;
dst[3] = isEven ? depth : 0;
dst[4] = dst[2];
dst[5] = isEven ? mBitmap.getHeight() - depth : mBitmap
.getHeight();
dst[6] = dst[0];
dst[7] = isEven ? mBitmap.getHeight() : mBitmap.getHeight()
- depth;
//setPolyToPoly
mMatrices[i].setPolyToPoly(src, 0, dst, 0, src.length >> 1);
}
}
@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
//繪制mNumOfFolds次
for (int i = 0; i < mNumOfFolds; i++)
{
canvas.save();
//將matrix應(yīng)用到canvas
canvas.concat(mMatrices[i]);
//控制顯示的大小
canvas.clipRect(mFlodWidth * i, 0, mFlodWidth * i + mFlodWidth,
mBitmap.getHeight());
//繪制圖片
canvas.drawBitmap(mBitmap, 0, 0, null);
//移動(dòng)繪制陰影
canvas.translate(mFlodWidth * i, 0);
if (i % 2 == 0)
{
//繪制黑色遮蓋
canvas.drawRect(0, 0, mFlodWidth, mBitmap.getHeight(),
mSolidPaint);
}else
{
//繪制陰影
canvas.drawRect(0, 0, mFlodWidth, mBitmap.getHeight(),
mShadowPaint);
}
canvas.restore();
}
}
}
}
簡(jiǎn)單講解下，不去管繪制陰影的部分，其實(shí)折疊就是：
1、初始化轉(zhuǎn)換點(diǎn)，這里注釋說(shuō)的很清楚，大家最好在紙上繪制下，標(biāo)一下每個(gè)變量。
2、為matrix.setPolyToPoly
3、繪制時(shí)使用該matrix，且clipRect控制顯示區(qū)域（這個(gè)區(qū)域也很簡(jiǎn)單，原圖的第一塊到最后一塊），最好就是繪制bitmap了。
陰影這里大家可以換個(gè)明亮點(diǎn)的圖片去看看~~
五、FoldLayout的實(shí)現(xiàn)
1、實(shí)現(xiàn)
我們的想法是這樣的，我們的FoldLayout只能有一個(gè)直接子元素，當(dāng)然這個(gè)子元素可以是RelativeLayout什么的，可以很復(fù)雜。然后只要外層套了我們的FoldLayout，就能實(shí)現(xiàn)折疊效果。
那么也就是說(shuō)，我們的FoldLayout折疊效果展示的是它的子元素的“樣子”，那么如何或者這個(gè)“樣子”呢？
大家都知道，我們的ViewGroup有個(gè)方法叫做：dispatchDraw(Canvas)主要用來(lái)繪制子元素，我們可以對(duì)這個(gè)canvas進(jìn)行設(shè)置matrix，以及重復(fù)調(diào)用dispatchDraw(Canvas)來(lái)實(shí)現(xiàn)類(lèi)似上篇博客最后的效果，這樣就完成了我們的可行性的分析。
package com.zhy.view;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Shader.TileMode;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
public class FoldLayout extends ViewGroup
{
private static final int NUM_OF_POINT = 8;
/**
* 圖片的折疊后的總寬度
*/
private float mTranslateDis;
protected float mFactor = 0.6f;
private int mNumOfFolds = 8;
private Matrix[] mMatrices = new Matrix[mNumOfFolds];
private Paint mSolidPaint;
private Paint mShadowPaint;
private Matrix mShadowGradientMatrix;
private LinearGradient mShadowGradientShader;
private float mFlodWidth;
private float mTranslateDisPerFlod;
public FoldLayout(Context context)
{
this(context, null);
}
public FoldLayout(Context context, AttributeSet attrs)
{
super(context, attrs);
for (int i = 0; i < mNumOfFolds; i++)
{
mMatrices[i] = new Matrix();
}
mSolidPaint = new Paint();
mShadowPaint = new Paint();
mShadowPaint.setStyle(Style.FILL);
mShadowGradientShader = new LinearGradient(0, 0, 0.5f, 0, Color.BLACK,
Color.TRANSPARENT, TileMode.CLAMP);
mShadowPaint.setShader(mShadowGradientShader);
mShadowGradientMatrix = new Matrix();
this.setWillNotDraw(false);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
View child = getChildAt(0);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(child.getMeasuredWidth(),
child.getMeasuredHeight());
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
View child = getChildAt(0);
child.layout(0, 0, child.getMeasuredWidth(), child.getMeasuredHeight());
mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(),
Config.ARGB_8888);
mCanvas.setBitmap(mBitmap);
updateFold();
}
private void updateFold()
{
int w = getMeasuredWidth();
int h = getMeasuredHeight();
mTranslateDis = w * mFactor;
mFlodWidth = w / mNumOfFolds;
mTranslateDisPerFlod = mTranslateDis / mNumOfFolds;
int alpha = (int) (255 * (1 - mFactor));
mSolidPaint.setColor(Color.argb((int) (alpha * 0.8F), 0, 0, 0));
mShadowGradientMatrix.setScale(mFlodWidth, 1);
mShadowGradientShader.setLocalMatrix(mShadowGradientMatrix);
mShadowPaint.setAlpha(alpha);
float depth = (float) (Math.sqrt(mFlodWidth * mFlodWidth
- mTranslateDisPerFlod * mTranslateDisPerFlod) / 2);
float[] src = new float[NUM_OF_POINT];
float[] dst = new float[NUM_OF_POINT];
for (int i = 0; i < mNumOfFolds; i++)
{
mMatrices[i].reset();
src[0] = i * mFlodWidth;
src[1] = 0;
src[2] = src[0] + mFlodWidth;
src[3] = 0;
src[4] = src[2];
src[5] = h;
src[6] = src[0];
src[7] = src[5];
boolean isEven = i % 2 == 0;
dst[0] = i * mTranslateDisPerFlod;
dst[1] = isEven ? 0 : depth;
dst[2] = dst[0] + mTranslateDisPerFlod;
dst[3] = isEven ? depth : 0;
dst[4] = dst[2];
dst[5] = isEven ? h - depth : h;
dst[6] = dst[0];
dst[7] = isEven ? h : h - depth;
for (int y = 0; y < 8; y++)
{
dst[y] = Math.round(dst[y]);
}
mMatrices[i].setPolyToPoly(src, 0, dst, 0, src.length >> 1);
}
}
private Canvas mCanvas = new Canvas();
private Bitmap mBitmap;
private boolean isReady;
@Override
protected void dispatchDraw(Canvas canvas)
{
if (mFactor == 0)
return;
if (mFactor == 1)
{
super.dispatchDraw(canvas);
return;
}
for (int i = 0; i < mNumOfFolds; i++)
{
canvas.save();
canvas.concat(mMatrices[i]);
canvas.clipRect(mFlodWidth * i, 0, mFlodWidth * i + mFlodWidth,
getHeight());
if (isReady)
{
canvas.drawBitmap(mBitmap, 0, 0, null);
} else
{
// super.dispatchDraw(canvas);
super.dispatchDraw(mCanvas);
canvas.drawBitmap(mBitmap, 0, 0, null);
isReady = true;
}
canvas.translate(mFlodWidth * i, 0);
if (i % 2 == 0)
{
canvas.drawRect(0, 0, mFlodWidth, getHeight(), mSolidPaint);
} else
{
canvas.drawRect(0, 0, mFlodWidth, getHeight(), mShadowPaint);
}
canvas.restore();
}
}
//...dispatchDraw
public void setFactor(float factor)
{
this.mFactor = factor;
updateFold();
invalidate();
}
public float getFactor()
{
return mFactor;
}
}
上述代碼大家應(yīng)該不陌生，只是把從View對(duì)單個(gè)圖片進(jìn)行繪制的修改為了ViewGroup。
既然是ViewGroup少不了onMeasure,onLayout等。測(cè)量和布局完全依賴于它的子View。
然后將需要初始化的一些東西，不依賴于寬度的，比如畫(huà)筆什么的都放在構(gòu)造中；依賴寬高的，都在onLayout之后，調(diào)用了updateFold();進(jìn)行初始化相關(guān)代碼。
updateFold中的代碼，我們也不陌生，因?yàn)楹蜕掀┛突疽恢?。主要就是?jì)算mFlodWidth，mTranslateDisPerFlod以及根據(jù)設(shè)置的mNumOfFolds去循環(huán)初始化我們的matrix.
matrix完成setPolyToPoly以后，我們就可以去繪制了：
private Canvas mCanvas = new Canvas();
private Bitmap mBitmap;
private boolean isReady;
@Override
protected void dispatchDraw(Canvas canvas)
{
if (mFactor == 0)
return;
if (mFactor == 1)
{
super.dispatchDraw(canvas);
return;
}
for (int i = 0; i < mNumOfFolds; i++)
{
canvas.save();
canvas.concat(mMatrices[i]);
canvas.clipRect(mFlodWidth * i, 0, mFlodWidth * i + mFlodWidth,
getHeight());
if (isReady)
{
canvas.drawBitmap(mBitmap, 0, 0, null);
} else
{
// super.dispatchDraw(canvas);
super.dispatchDraw(mCanvas);
canvas.drawBitmap(mBitmap, 0, 0, null);
isReady = true;
}
canvas.translate(mFlodWidth * i, 0);
if (i % 2 == 0)
{
canvas.drawRect(0, 0, mFlodWidth, getHeight(), mSolidPaint);
} else
{
canvas.drawRect(0, 0, mFlodWidth, getHeight(), mShadowPaint);
}
canvas.restore();
}
}
mFactor主要代表折疊后的總寬度與原寬度的比值，默認(rèn)不折疊時(shí)為1，所以直接調(diào)用super.dispatchDraw(canvas);
那么如果為0，說(shuō)明全部折起來(lái)了，我們直接if (mFactor == 0)return;就不要繪制了。
如果(0,1)之間就是正常情況了，如果還記得上一篇博客內(nèi)容，無(wú)非就是根據(jù)mNumOfFolds循環(huán)繪制多次，每次繪制的時(shí)候設(shè)置matrix,利用clipRect就可以實(shí)現(xiàn)我們的折疊。
這里大家注意看，我在第一次繪制的時(shí)候，調(diào)用了：
super.dispatchDraw(mCanvas); canvas.drawBitmap(mBitmap, 0, 0, null); isReady = true;
在我們自己new的mBitmap中也繪制了一份圖片，因?yàn)槲也幌Ｍ看味际钦{(diào)用super.dispatchDraw，所以只要isReady=true，我們就可以去調(diào)用繪制mBitmap而避免調(diào)用super.dispatchDraw()。
繪制完成圖片，就是繪制黑色的遮蓋和陰影了~~，就是兩個(gè)Rect的繪制。
完成這些以后，我們可以簡(jiǎn)單的坐下測(cè)試，使用我們的布局。
2、測(cè)試
布局文件:
<com.zhy.view.FoldLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/id_fold_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/xueshan" />
</com.zhy.view.FoldLayout>
Activity
package com.zhy.sample.folderlayout;
import com.zhy.view.FoldLayout;
import android.animation.ObjectAnimator;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
public class FoldLayoutActivity extends Activity
{
private FoldLayout mFoldLayout;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fold);
mFoldLayout = (FoldLayout) findViewById(R.id.id_fold_layout);
/*mFoldLayout.post(new Runnable()
{
@SuppressLint("NewApi")
@Override
public void run()
{
ObjectAnimator.ofFloat(mFoldLayout, "factor", 1, 0, 1)
.setDuration(5000).start();
}
});*/
}
}
現(xiàn)在的效果是，我們把mFactor改為0.6f:
當(dāng)然了，此時(shí)只是靜態(tài)的，但是我們成功的完成了繪制一個(gè)靜態(tài)圖到FlodLayout。
接下來(lái)我們?yōu)槠湓黾邮种傅挠|摸折疊功能。
六、TouchFoldLayout
1、實(shí)現(xiàn)
增加觸摸功能其實(shí)很簡(jiǎn)單，我們的繪制依賴mFactor這個(gè)值，我們只要在onTouchEvent里面去累加手指移動(dòng)距離，然后動(dòng)態(tài)更新這個(gè)值就可以了。
package com.zhy.view;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
public class TouchFoldLayout extends FoldLayout
{
private GestureDetector mScrollGestureDetector;
public TouchFoldLayout(Context context, AttributeSet attrs)
{
super(context, attrs);
init(context, attrs);
}
public void init(Context context, AttributeSet attrs)
{
mScrollGestureDetector = new GestureDetector(context,
new ScrollGestureDetector());
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
return mScrollGestureDetector.onTouchEvent(event);
}
private int mTranslation = -1;
@Override
protected void dispatchDraw(Canvas canvas)
{
if (mTranslation == -1)
mTranslation = getWidth();
super.dispatchDraw(canvas);
}
class ScrollGestureDetector extends GestureDetector.SimpleOnGestureListener
{
@Override
public boolean onDown(MotionEvent e)
{
return true;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY)
{
mTranslation -= distanceX;
if (mTranslation < 0)
{
mTranslation = 0;
}
if (mTranslation > getWidth())
{
mTranslation = getWidth();
}
float factor = Math.abs(((float) mTranslation)
/ ((float) getWidth()));
setFactor(factor);
return true;
}
}
}
我們選擇繼承FoldLayout，重寫(xiě)其onTouchEvent，然后通過(guò)mScrollGestureDetector獲取移動(dòng)的距離，最終和width做比值得到我們的factor，然后調(diào)用setFactor進(jìn)行改變。
public void setFactor(float factor)
{
this.mFactor = factor;
updateFold();
invalidate();
}
ok,這樣就完成了引入手指的控制。
2、測(cè)試
現(xiàn)在改變下布局文件里面的類(lèi)：
<com.zhy.view.TouchFoldLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/id_fold_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/xueshan" />
</com.zhy.view.TouchFoldLayout>
Activity不變，看一下測(cè)試效果：（測(cè)試前記得把mFactor改為默認(rèn)值1.0f）
至此我們完成了炫酷的效果，但是我們還需要應(yīng)用到具體的案例上，否則就是特技，有必要duang一下。
于是我們首先考慮增加到側(cè)滑菜單中去，側(cè)滑菜單有很多選擇，google也提供了兩個(gè)，一個(gè)是DrawerLayout，另一個(gè)是SlidingPaneLayout。
下面分別展示如何整合入這兩個(gè)布局。
首先看SlidingPaneLayout，因?yàn)镈rawerLayout還有些地方需要修改。
八、FoldSlidingPanelLayout
1、實(shí)現(xiàn)
對(duì)于SlidingPaneLayout的使用，應(yīng)該沒(méi)什么問(wèn)題吧，就是把布局文件的根布局設(shè)置為SlidingPaneLayout，然后里面放兩個(gè)子布局，一個(gè)代表側(cè)滑菜單，一個(gè)代表內(nèi)容區(qū)域。
那么，我們?cè)趺凑系絊lidingPaneLayout種去呢？大致兩種方法：
1、把我們的折疊菜單作為側(cè)滑布局的根布局，然后在Activity種去監(jiān)聽(tīng)setPanelSlideListener做出改變。
2、直接繼承SlidingPaneLayout，再其內(nèi)部將child(0)用FoldLayout包起來(lái)，然后監(jiān)聽(tīng)setPanelSlideListener。
這里我們選擇后者，因?yàn)楹笳叻庋b好了，就能直接按照SlidingPaneLayout原本的方式去使用了，不需要做多余的操作。
下面看代碼：
package com.zhy.view;
import android.content.Context;
import android.support.v4.widget.SlidingPaneLayout;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
public class FoldSlidingPanelLayout extends SlidingPaneLayout
{
public FoldSlidingPanelLayout(Context context, AttributeSet attrs)
{
super(context, attrs);
}
@Override
protected void onAttachedToWindow()
{
super.onAttachedToWindow();
View child = getChildAt(0);
if (child != null) {
removeView(child);
final FoldLayout foldLayout = new FoldLayout(getContext());
//foldLayout.setAnchor(0);
foldLayout.addView(child);
ViewGroup.LayoutParams layPar = child.getLayoutParams();
addView(foldLayout, 0, layPar);
setPanelSlideListener(new PanelSlideListener()
{
@Override
public void onPanelSlide(View arg0, float arg1)
{
foldLayout.setFactor(arg1);
}
@Override
public void onPanelOpened(View arg0)
{
// TODO Auto-generated method stub
}
@Override
public void onPanelClosed(View arg0)
{
}
});
}
}
}
我們繼承了SlidingPaneLayout，然后在onAttachedToWindow中，取出側(cè)滑的布局，在外層包上一個(gè)FoldLayout；并且在內(nèi)部去監(jiān)聽(tīng)setPanelSlideListener，在onPanelSlide種根據(jù)參數(shù)，去動(dòng)態(tài)設(shè)置FoldLayout的factor.
2、測(cè)試
（1）、布局文件
<com.zhy.view.FoldSlidingPanelLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/id_drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<fragment
android:id="@+id/id_left_menu"
android:name="com.zhy.sample.folderlayout.LeftMenuFragment"
android:layout_width="240dp"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="@drawable/xueshan" />
</RelativeLayout>
</com.zhy.view.FoldSlidingPanelLayout>
我們的菜單使用的是一個(gè)fragment。
（2）、菜單布局
package com.zhy.sample.folderlayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class LeftMenuFragment extends Fragment
{
private ListView mMenus;
private String[] mMenuItemStr = { "Bear", "Bird", "Cat", "Tigers", "Panda" };
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.fragment_left_menu, container,
false);
mMenus = (ListView) view.findViewById(R.id.id_left_menu_lv);
mMenus.setAdapter(new ArrayAdapter<String>(getActivity(),
R.layout.item_left_menu, mMenuItemStr));
return view;
}
}
<ListView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/id_left_menu_lv" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#FFF" android:choiceMode="singleChoice" />
Item就是一個(gè)TextView，就不貼了~~
3、Activity
package com.zhy.sample.folderlayout;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
public class SlidingPanelLayoutSampleActivity extends FragmentActivity
{
@Override
protected void onCreate(Bundle arg0)
{
super.onCreate(arg0);
setContentView(R.layout.activity_slidingpanellayout);
}
}
恩，Activity里面什么都不用做，引入布局文件就行了。
最好看看效果圖。
3、效果圖
這里菜單塊數(shù)比較多，大家可以自行修改運(yùn)行。
ok，到此我們將FoldLayout與SlidingPaneLayout進(jìn)行了整合，構(gòu)造了這么個(gè)個(gè)性的側(cè)滑。
最好還剩下與Drawerlayout的整合。
九、FoldDrawerLayout
1、實(shí)現(xiàn)
關(guān)于DrawerLayout的使用，與上面的SlidingPaneLayout類(lèi)似，寫(xiě)寫(xiě)布局文件，引入Activity就好了。我們依然使用上述的方法2，去實(shí)現(xiàn)一個(gè)DrawerLayout的子類(lèi)。
package com.zhy.view;
import android.content.Context;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.DrawerLayout;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
public class FoldDrawerLayout extends DrawerLayout
{
private static final String TAG = "DrawerFoldLayout";
public FoldDrawerLayout(Context context, AttributeSet attrs)
{
super(context, attrs);
}
@Override
protected void onAttachedToWindow()
{
super.onAttachedToWindow();
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++)
{
final View child = getChildAt(i);
if (isDrawerView2(child))
{
Log.e(TAG, "at" + i);
FoldLayout foldlayout = new FoldLayout(
getContext());
//<span style="font-family: Arial, Helvetica, sans-serif;">foldlayout</span><span style="font-family: Arial, Helvetica, sans-serif;">.setAnchor(1);</span>
removeView(child);
foldlayout.addView(child);
ViewGroup.LayoutParams layPar = child.getLayoutParams();
addView(foldlayout, i, layPar);
}
}
setDrawerListener(new DrawerListener()
{
@Override
public void onDrawerStateChanged(int arg0)
{
// TODO Auto-generated method stub
}
@Override
public void onDrawerSlide(View drawerView, float slideOffset)
{
if (drawerView instanceof FoldLayout)
{
FoldLayout foldLayout = ((FoldLayout) drawerView);
Log.e(TAG, "slideOffset = " + slideOffset);
foldLayout.setFactor(slideOffset);
}
}
@Override
public void onDrawerOpened(View arg0)
{
}
@Override
public void onDrawerClosed(View arg0)
{
}
});
}
boolean isDrawerView2(View child)
{
final int gravity = ((LayoutParams) child.getLayoutParams()).gravity;
final int absGravity = GravityCompat.getAbsoluteGravity(gravity,
ViewCompat.getLayoutDirection(child));
return (absGravity & (Gravity.LEFT | Gravity.RIGHT)) != 0;
}
}
看到這，大家可能會(huì)想，然后就和SlidingPaneLayout一樣，寫(xiě)寫(xiě)布局文件就好了？其實(shí)不是的，如果你這么做了，你會(huì)發(fā)現(xiàn)側(cè)滑很難拉出來(lái)，因?yàn)槭沁@樣的：
DraweLayout的側(cè)滑菜單，比如我們拉出來(lái)50%，那么正常來(lái)說(shuō)顯示的時(shí)側(cè)滑布局右側(cè)的50%，但是這個(gè)0.5如果設(shè)置給我們的factor，它會(huì)把布局縮小到50%且在左邊。
導(dǎo)致，你拉了50%其實(shí)還是上面都看不到，因?yàn)檎郫B到左側(cè)的50%去了。這里依然有兩種解決方案：
（1）、結(jié)合屬性動(dòng)畫(huà)，做偏移，具體可參考：Android DrawerLayout 高仿QQ5.2雙向側(cè)滑菜單
（2）、讓我們的折疊，收縮到最終的位置可以控制，我們現(xiàn)在統(tǒng)統(tǒng)往最坐標(biāo)收縮，如果可以設(shè)置為最右邊，那么本例就沒(méi)有問(wèn)題了。
2、引入anchor
我們引入一個(gè)mAnchor變量，值范圍[0，1]，控制FoldLayout最終折疊到的位置。其實(shí)修改的代碼比較少，我貼一下修改的代碼：
private void updateFold()
{
//...
float anchorPoint = mAnchor * w;
float midFold = (anchorPoint / mFlodWidth);
for (int i = 0; i < mNumOfFolds; i++)
{
//引入anchor
dst[0] = (anchorPoint > i * mFlodWidth) ? anchorPoint
+ (i - midFold) * mTranslateDisPerFlod : anchorPoint
- (midFold - i) * mTranslateDisPerFlod;
dst[2] = (anchorPoint > (i + 1) * mFlodWidth) ? anchorPoint
+ (i + 1 - midFold) * mTranslateDisPerFlod : anchorPoint
- (midFold - i - 1) * mTranslateDisPerFlod; }
}
唯一改變的就是dst[0]和dst[2]的坐標(biāo)，當(dāng)然了，anchor引入以后，你需要判斷原始的坐標(biāo)是否小于anchorPoint，如果小于需要加一些偏移量，大于則反之。
記得：
public void setAnchor(float anchor)
{
this.mAnchor = anchor;
updateFold();
invalidate();
}
打開(kāi)上述的FoldDrawerLayout的這行代碼：foldlayout.setAnchor(1);讓其最后合并位置為右側(cè)。
使用方式，現(xiàn)在就是寫(xiě)好布局文件，大家直接使用SlidingPaneLayout那個(gè)布局文件，改一個(gè)根布局類(lèi)就行。
3、效果圖
- Android UI實(shí)現(xiàn)多行文本折疊展開(kāi)效果
- Android TextView多文本折疊展開(kāi)效果
- Android TextView實(shí)現(xiàn)多文本折疊、展開(kāi)效果
- Android中RecyclerView實(shí)現(xiàn)多級(jí)折疊列表效果（二）
- Android中RecyclerView實(shí)現(xiàn)多級(jí)折疊列表效果(TreeRecyclerView)
- Android折疊式Toolbar使用完全解析（CollapsingToolbarLayout）
- android給RecyclerView加上折疊的效果示例
- Android TextView仿微信可折疊效果
- Android顯示全文折疊控件使用方法詳解
- Android開(kāi)發(fā)實(shí)現(xiàn)的文本折疊點(diǎn)擊展開(kāi)功能示例
相關(guān)文章
實(shí)例講解Android中的View類(lèi)以及自定義View控件的方法
這篇文章主要介紹了Android中的View類(lèi)以及自定義View控件的方法,講解了如何繼承View類(lèi)并且展示了一個(gè)對(duì)View進(jìn)行重繪的例子,需要的朋友可以參考下2016-04-04
基于Android實(shí)現(xiàn)數(shù)獨(dú)游戲
這篇文章主要為大家詳細(xì)介紹了基于Android實(shí)現(xiàn)數(shù)獨(dú)游戲，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
android-獲取網(wǎng)絡(luò)時(shí)間、獲取特定時(shí)區(qū)時(shí)間、時(shí)間同步的方法
本篇文章主要介紹了android-獲取網(wǎng)絡(luò)時(shí)間、獲取特定時(shí)區(qū)時(shí)間、時(shí)間同步，小編覺(jué)得不錯(cuò)，現(xiàn)在就分享給大家，有興趣的可以了解一下。2016-12-12
Android8.0適配前臺(tái)定位服務(wù)service的示例代碼
這篇文章主要介紹了Android8.0適配前臺(tái)定位服務(wù)service的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
android視頻播放簡(jiǎn)單實(shí)現(xiàn)示例（VideoView&MediaPlayer）
本篇文章主要介紹了android視頻播放簡(jiǎn)單實(shí)現(xiàn)示例（VideoView&MediaPlayer），具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
Android自定義控件之創(chuàng)建可復(fù)用的組合控件
這篇文章主要為大家詳細(xì)介紹了Android自定義控件之創(chuàng)建可復(fù)用的組合控件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)邊錄邊播功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
二維碼，我們也稱作QRCode，QR表示quick response即快速響應(yīng)，在很多App中我們都能見(jiàn)到二維碼的身影，最常見(jiàn)的莫過(guò)于微信了。下面通過(guò)本文給大家講解Android 二維碼掃描和生成二維碼功能，需要的朋友參考下吧2017-12-12
AndroidStudio報(bào)錯(cuò)Emulator:PANIC:Cannot find AVD system path. P
這篇文章主要介紹了AndroidStudio報(bào)錯(cuò)Emulator:PANIC:Cannot find AVD system path. Please define ANDROID_SDK_ROOT完整的解決方案2021-08-08
Android 通過(guò)ViewHolder優(yōu)化適配器的實(shí)現(xiàn)方法(必看)
下面小編就為大家?guī)?lái)一篇Android 通過(guò)ViewHolder優(yōu)化適配器的實(shí)現(xiàn)方法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04