Android界面动画初探之--探索侧边栏折叠效果的实现

不多说，看看效果先：



这个是我实现的Demo：http://pan.baidu.com/s/1c08qBtA

这就是今天要实现的效果；貌似这种效果以前有人实现过；今天我根据自己的探索带领大家来实现这个效果；

我记得在前面讲过自定义ViewGroup的侧边栏实现原理；/article/11311675.html

在这个里面我们知道了如何很方便的实现平移动画；很方便的处理触摸事件的焦点问题；今天我接着上面的知识，来带领大家搞定类似于这种自定义动画的实现。

首先大家根据效果图想一下：

要实现效果图，我们需要处理的是什么？

没错，你需要处理的是在侧边栏滑动时，需要处理菜单那一栏里面的视图绘制；也就是说我们根据边栏所在位置确定菜单内部的动画效果；当侧边栏完全打开时：我们的菜单栏应该是平铺的；随着边栏向里面滑动；菜单的内部视图应该进行一个折叠；今天我只是做了当菜单在左，主视图在右边的情况；

现在我们先分析一下这个效果：

第一：如何分割菜单栏图片
第二：如何计算每一部分转化需要的矩阵
第三：如何实现阴影效果

其实解决上上述三个问题，我们也就实现了这个效果；首先我们思考一下第一个的解决方案：分割菜单栏图片；其实也就是将菜单栏的背景图片按照层叠的层数进行切割；

我查到了用：

void android.graphics.Canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)；
将bitmap的src区域的内容绘制到画布的dst区域上；

因此切割的核心必须是上面这个方法；折叠效果的每一块都是等比例分割的，因此他们切割的位置代码如下：

// 初始化切割图片的位置
mRects = new Rect[foldcound];
// 计算每一个折叠的宽度
int foldchildwidth = width / foldcound;
// 计算好切割图片的每一个区域
for (int i = 0; i < foldcound; i++) {
mRects[i] = new Rect(i * foldchildwidth, 0, (i + 1)
* foldchildwidth, height);
}

现在看第二个问题：如何计算每一部分转化需要的矩阵;我又查了一下：发现有这个api:

public boolean setPolyToPoly (float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount)
大意是根据多边形变化前的坐标集合src和变化后的坐标集合dst计算出Matrix矩阵

因此切割变化的核心就是这个方法了；我们每一个都是4个点，当切割的区域在偶数层时：他们只是右边的两个左边点进行变化；当切割的区域在奇数页面时，就只是左边的两个点进行变化；切割形成的三角形的高度可以用勾股定理得出；因此可以产生大概如下的代码：

/** 根据变化计算矩阵转换 */
//startX指的是绘制的起点，endX指的是当前菜单页面的终点，width和height都是没有折叠时候平铺的宽高
private void getMatrixsbyscroll(int startX, int endX, int width, int height) {
// 初始化矩阵变化数组
float[] spoi = new float[8], dpoi = new float[8];
// 计算每一个折叠前的宽度
int foldchildwidth = width / foldcound;
// 计算每一个折叠后的宽度
int foldchangewidth = (endX - startX) / foldcound;
// 根据勾股定理计算出折叠变化的高度
int deteheight = (int) Math.sqrt(Math.pow(foldchildwidth, 2)
- Math.pow(foldchangewidth, 2));
for (int i = 0; i < foldcound; i++) {
// 图片变化前的坐标
// 左上角
spoi[0] = startX + i * foldchildwidth;
spoi[1] = 0;
// 左下角
spoi[2] = spoi[0];
spoi[3] = height;
// 右上角，纵坐标和左上角一样
spoi[4] = spoi[0] + foldchildwidth;
spoi[5] = spoi[1];
// 右下角,横坐标和右上角一样
spoi[6] = spoi[4];
spoi[7] = height;
// 图片变化后的坐标,这个要分奇数和偶数
if (i % 2 == 0) {
// 偶数情况下
// 左上角
dpoi[0] = startX + i * foldchangewidth;
dpoi[1] = 0;
// 左下角
dpoi[2] = dpoi[0];
dpoi[3] = height;
// 右上角
dpoi[4] = dpoi[0] + foldchangewidth;
dpoi[5] = dpoi[1] + deteheight;
// 右下角
dpoi[6] = dpoi[4];
dpoi[7] = height - deteheight;
} else {
// 奇数情况下
// 左上角
dpoi[0] = startX + i * foldchangewidth;
dpoi[1] = deteheight;
// 左下角
dpoi[2] = dpoi[0];
dpoi[3] = height - deteheight;
// 右上角
dpoi[4] = dpoi[0] + foldchangewidth;
dpoi[5] = 0;
// 右下角
dpoi[6] = dpoi[4];
dpoi[7] = height;
}
matrixs[i].setPolyToPoly(spoi, 0, dpoi, 0, 4);
}
}

第二个问题解决如上：那我们进行第三个问题：如何实现阴影？

public LinearGradient (float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)
以x0,y0为起点,x1,y1为终点，color0为开始颜色，color1为终止颜色的一个渐变区域绘制

上面这个方法可以实现我们需要的阴影效果；当然，阴影的透明度需要根据折叠的程度来决定；

在本例中，折叠程度和阴影程度取决于边栏滑动的程度！

下面我就上重点代码了：大家注意看代码注释就可以看出实现的原理；重点搜索dispatchDraw方法进行查看：

package com.xy.framework.widget;

import com.xy.framework.Utils.Utils;
import com.xy.framework.widget.SideView.SideViewinterface;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Paint.Style;
import android.graphics.Shader.TileMode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.Scroller;

/**
* @author 徐晔
* @note 实现侧边栏的View
*/
public class Sidebarview extends RelativeLayout {

/**
* @author 徐晔
* @note 侧边栏需要实现需要的配置文件
*/
public static interface SidebarConfig {
/** 边栏所占用的百分比 */
public int setSidebarpercent();
/** 左边还是右边 */
public int setSidebarPosition();
}

/** 元素 */
private class SideElements {
/** 上下文 */
private Context mContext;
/** 屏幕宽度 */
private int screenwidth;
/** 菜单页面所在的页面 */
private RelativeLayout mMenuLayout;
/** 侧栏所在的页面 */
private RelativeLayout mSideLayout;
/** 配置文件 */
private SidebarConfig mConfig;
/** 触摸时需要的临时文件 */
private int menuspace;
private int mMotionX, mdeteX;

public void setmMotionX(int mMotionX) {
this.mMotionX = mMotionX;
}

}

/** 元素 */
private SideElements mElements;
/** 平移动画实现类 */
private Scroller mScroller;

/** 折叠效果所需要的变量 */
// 需要实现几个折叠页面，建议都是2的倍数
private final int foldcound = 4;

// 两个折叠的图片分别需要的矩阵
private Matrix[] matrixs;
// 将View切割成两部分的坐标
private Rect[] mRects;
private Rect deRect;
// 切割前的图片
private Bitmap viewbitmap;
// 画阴影
private LinearGradient shadowGrad;
private Paint mshadowpaint;

public void setElements(int setnumber) {
mElements.setmMotionX(setnumber);
}

public RelativeLayout getmMenuLayout() {
return mElements.mMenuLayout;
}

public Sidebarview(Context context, SidebarConfig sidebarConfig) {
super(context);
mElements = new SideElements();
initView(context, sidebarConfig);
}

public Sidebarview(Context context, AttributeSet attrs,
SidebarConfig sidebarConfig) {
super(context, attrs);
mElements = new SideElements();
initView(context, sidebarConfig);
}

public Sidebarview(Context context, AttributeSet attrs, int defStyle,
SidebarConfig sidebarConfig) {
super(context, attrs, defStyle);
mElements = new SideElements();
initView(context, sidebarConfig);
}

/** 初始化组件 */
private void initView(Context context, SidebarConfig sidebarConfig) {

mScroller = new Scroller(context);
// 设置
mElements.mContext = context;
mElements.screenwidth = Utils.getScreenSize(context)[0];
mElements.mConfig = sidebarConfig;

this.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
// 添加菜单页面
mElements.mMenuLayout = new RelativeLayout(context) {
//重点方法，不知道为什么我重写这个方法的最好去百度一下
@Override
protected void dispatchDraw(Canvas canvas) {
// 获取原始坐标
int endX = mElements.mSideLayout.getScrollX();
// 当没有折叠时
if (-endX == mElements.menuspace) {
super.dispatchDraw(canvas);
return;
}
int width = getChildAt(0).getMeasuredWidth();
int height = getChildAt(0).getMeasuredHeight();

// 获取到侧边栏的视图
if (getChildAt(0) != null && viewbitmap == null) {
viewbitmap = Bitmap.createBitmap(width, height,
Bitmap.Config.ARGB_8888);
Canvas canvas2 = new Canvas(viewbitmap);
getChildAt(0).draw(canvas2);
}

endX = Math.abs(endX);
//准备绘制所需要的数据
perpareFolddata(width, height);
//计算折叠效果需要的数据
getMatrixsbyscroll(0, endX, width, height);
Rect src;
for (int i = 0; i < foldcound; i++) {
src = mRects[i];
canvas.save();
//将效果连接起来
canvas.concat(matrixs[i]);
if (deRect == null) {
deRect = new Rect();
}
// 设置需要绘制到的地方
deRect.set(src.left, src.top, src.left + src.width(),
src.height());
// 分别绘制每一块扇形区域
canvas.drawBitmap(viewbitmap, src, deRect, null);
// 计算阴影的透明度
int shadowalpha = 255 * (width - (endX - 0)) / width;
if (mshadowpaint == null) {
mshadowpaint = new Paint();
mshadowpaint.setStyle(Style.FILL);
}
// 设置阴影的透明度，折叠程度越深，透明度越低，也就是说看起来越暗
mshadowpaint.setAlpha(shadowalpha);
if (i % 2 == 0) {
shadowGrad = new LinearGradient(i * width / foldcound,
0, (i + 1) * width / foldcound, 0,
Color.TRANSPARENT, Color.BLACK, TileMode.CLAMP);
} else {
shadowGrad = new LinearGradient(i * width / foldcound,
0, (i + 1) * width / foldcound, 0, Color.BLACK,
Color.TRANSPARENT, TileMode.CLAMP);

}
mshadowpaint.setShader(shadowGrad);
// 绘制阴影
canvas.drawRect(i * width / foldcound, 0, (i + 1) * width
/ foldcound, height, mshadowpaint);
canvas.restore();
}
}
};
mElements.mMenuLayout.setId(0);
mElements.mMenuLayout.setTag("sidemenu");
LayoutParams mMenuParams = new LayoutParams(mElements.screenwidth
* ((100 - mElements.mConfig.setSidebarpercent())) / 100,
LayoutParams.MATCH_PARENT);
mElements.mMenuLayout.setLayoutParams(mMenuParams);
addView(mElements.mMenuLayout);
// 添加侧边栏页面
mElements.mSideLayout = new RelativeLayout(context) {

/** 平移动画 */
@Override
public void computeScroll() {
mElements.mMenuLayout.postInvalidate();
if (mScroller.computeScrollOffset()) {
mElements.mSideLayout.scrollTo(mScroller.getCurrX(), 0);
mElements.mSideLayout.postInvalidate();
}

if (mElements.mConfig.setSidebarPosition() % 2 == 0) {
if (mElements.mSideLayout.getScrollX() == mElements.menuspace) {
mElements.mMenuLayout.invalidate();
return;
}
if (mElements.mSideLayout.getScrollX() == 0) {
return;
}
mElements.mMenuLayout.scrollTo(
(-mElements.menuspace + mElements.mSideLayout
.getScrollX()) >> 1, 0);
}
if (mElements.mConfig.setSidebarPosition() % 2 == 1) {
if (mElements.mSideLayout.getScrollX() == 0) {
return;
}
if (mElements.mSideLayout.getScrollX() == mElements.menuspace) {
mElements.mMenuLayout.invalidate();
return;
}
}
super.computeScroll();
}
};
mElements.mSideLayout.setId(1);
mElements.mSideLayout.setTag("sideside");
LayoutParams mSideParams = new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);
mElements.mSideLayout.setLayoutParams(mSideParams);
addView(mElements.mSideLayout);
mElements.menuspace = mElements.screenwidth
* (100 - mElements.mConfig.setSidebarpercent()) / 100;
}

/** 给主页添加页面 */
public void addViewtoMenu(View view) {
mElements.mMenuLayout.addView(view, new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
}

/** 给菜单栏添加页面 */
public void addViewtoSide(View view, SideViewinterface sideViewinterface) {
SideView mSideView = new SideView(mElements.mContext, sideViewinterface);
mSideView.addView(view);
mElements.mSideLayout.addView(mSideView, new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
if (mElements.mConfig.setSidebarPosition() % 2 == 0) {
mSideView.setOnTouchListener(new mSidebarTouchListenerLeft());
}
if (mElements.mConfig.setSidebarPosition() % 2 == 1) {
mSideView.setOnTouchListener(new mSidebarTouchListenerRight());
}
}

/** 右边滑动时的触摸事件 */
private class mSidebarTouchListenerRight implements OnTouchListener {
@Override
public boolean onTouch(View v, MotionEvent event) {
int touchX = (int) event.getX();
switch (event.getAction()) {
// 按下
case MotionEvent.ACTION_DOWN:
mElements.mMotionX = touchX;
return true;
// 移动
case MotionEvent.ACTION_MOVE:
mElements.mdeteX = touchX - mElements.mMotionX;
if (mElements.mSideLayout.getScrollX() - mElements.mdeteX
+ mElements.menuspace >= 0
&& mElements.mSideLayout.getScrollX()
- mElements.mdeteX <= 0) {
mElements.mSideLayout.scrollBy(-mElements.mdeteX, 0);
}
return true;
// 抬起
case MotionEvent.ACTION_UP:
if (Math.abs(mElements.mdeteX) < 24) {
if (mElements.mSideLayout.getScrollX() == mElements.menuspace) {
close();
}
}
if (mElements.mSideLayout.getScrollX() > -mElements.menuspace >> 1) {
startAnimation(mElements.mSideLayout.getScrollX(), 0, 0, 0, 300);
} else {
startAnimation(mElements.mSideLayout.getScrollX(), 0, -mElements.menuspace, 0, 300);
}
mElements.mdeteX = 0;
mElements.mMotionX = 0;
return true;
}
return false;
}

}

/** 左边触摸时实现的事件 */
private class mSidebarTouchListenerLeft implements OnTouchListener {
@Override
public boolean onTouch(View v, MotionEvent event) {
int touchX = (int) event.getX();
switch (event.getAction()) {
// 按下
case MotionEvent.ACTION_DOWN:
mElements.mMotionX = touchX;
return true;
// 滑动
case MotionEvent.ACTION_MOVE:
if (mElements.mMotionX == 0) {
mElements.mMotionX = touchX;
}
mElements.mdeteX = touchX - mElements.mMotionX;
if (mElements.mSideLayout.getScrollX() - mElements.menuspace
- mElements.mdeteX <= 0
&& mElements.mSideLayout.getScrollX()
- mElements.mdeteX >= 0) {
mElements.mSideLayout.scrollBy(-mElements.mdeteX, 0);
}
return true;
// 抬起
case MotionEvent.ACTION_UP:
if (Math.abs(mElements.mdeteX) < 24) {
if (mElements.mSideLayout.getScrollX() == mElements.menuspace) {
close();
}
}
if (mElements.mSideLayout.getScrollX() >= mElements.menuspace >> 1) {
startAnimation(mElements.mSideLayout.getScrollX(), 0, mElements.menuspace, 0, 300);
} else {
startAnimation(mElements.mSideLayout.getScrollX(), 0, 0, 0, 300);
}
mElements.mdeteX = 0;
mElements.mMotionX = 0;
return true;
}
return false;
}
}

/** 侧边栏动画 */

private void startAnimation(int startX, int startY, int endX, int endY,
int time) {
if (!mScroller.computeScrollOffset()) {
mScroller.setFinalX(endX);
mScroller.setFinalY(endY);
mScroller.startScroll(startX, startY, endX - startX, endY - startY,
time);
mElements.mSideLayout.invalidate();
}
}

/**
* 判断其是否打开
*
* @return
*/
public boolean isopen() {
if (mElements.mSideLayout.getScrollX() == 0) {
return false;
} else {
return true;
}
}

/**
* 打开侧边栏
*/
public void open() {
if (!mScroller.computeScrollOffset()) {
if (mElements.mConfig.setSidebarPosition() % 2 == 0) {
mScroller.setFinalX(mElements.menuspace);
mScroller.setFinalY(0);
mScroller.startScroll(mElements.mSideLayout.getScrollX(), 0,
mElements.menuspace, 0, 600);
} else {
mScroller.setFinalX(-mElements.menuspace);
mScroller.setFinalY(0);
mScroller.startScroll(
mElements.mSideLayout.getScrollX(),
0,
mScroller.getFinalX()
- mElements.mSideLayout.getScrollX(), 0, 600);
}
mElements.mSideLayout.invalidate();
}
}

/**
* 关闭侧边栏
*/
public void close() {
if (!mScroller.computeScrollOffset()) {
if (mElements.mConfig.setSidebarPosition() % 2 == 0) {
mScroller.setFinalX(0);
mScroller.setFinalY(0);
mScroller.startScroll(
mElements.mSideLayout.getScrollX(),
0,
mScroller.getFinalX()
- mElements.mSideLayout.getScrollX(), 0, 600);
} else {
mScroller.setFinalX(0);
mScroller.setFinalY(0);
mScroller.startScroll(
mElements.mSideLayout.getScrollX(),
0,
mScroller.getFinalX()
- mElements.mSideLayout.getScrollX(), 0, 600);
}

mElements.mSideLayout.invalidate();
}

}

/** 初始化折叠的数据 */
private void perpareFolddata(int width, int height) {
// 初始化各个形状变化的矩阵
if (matrixs == null) {
matrixs = new Matrix[foldcound];
for (int i = 0; i < foldcound; i++) {
matrixs[i] = new Matrix();
}
}
if (mRects == null) {
// 初始化切割图片的位置
mRects = new Rect[foldcound];
// 计算每一个折叠的宽度
int foldchildwidth = width / foldcound;
// 计算好切割图片的每一个区域
for (int i = 0; i < foldcound; i++) {
mRects[i] = new Rect(i * foldchildwidth, 0, (i + 1)
* foldchildwidth, height);
}
}

}

/** 根据变化计算矩阵转换 */
private void getMatrixsbyscroll(int startX, int endX, int width, int height) {
// 初始化矩阵变化数组
float[] spoi = new float[8], dpoi = new float[8];
// 计算每一个折叠前的宽度
int foldchildwidth = width / foldcound;
// 计算每一个折叠后的宽度
int foldchangewidth = (endX - startX) / foldcound;
// 根据勾股定理计算出折叠变化的高度
int deteheight = (int) Math.sqrt(Math.pow(foldchildwidth, 2)
- Math.pow(foldchangewidth, 2));
for (int i = 0; i < foldcound; i++) {
// 图片变化前的坐标
// 左上角
spoi[0] = startX + i * foldchildwidth;
spoi[1] = 0;
// 左下角
spoi[2] = spoi[0];
spoi[3] = height;
// 右上角，纵坐标和左上角一样
spoi[4] = spoi[0] + foldchildwidth;
spoi[5] = spoi[1];
// 右下角,横坐标和右上角一样
spoi[6] = spoi[4];
spoi[7] = height;
// 图片变化后的坐标,这个要分奇数和偶数
if (i % 2 == 0) {
// 偶数情况下
// 左上角
dpoi[0] = startX + i * foldchangewidth;
dpoi[1] = 0;
// 左下角
dpoi[2] = dpoi[0];
dpoi[3] = height;
// 右上角
dpoi[4] = dpoi[0] + foldchangewidth;
dpoi[5] = dpoi[1] + deteheight;
// 右下角
dpoi[6] = dpoi[4];
dpoi[7] = height - deteheight;
} else {
// 奇数情况下
// 左上角
dpoi[0] = startX + i * foldchangewidth;
dpoi[1] = deteheight;
// 左下角
dpoi[2] = dpoi[0];
dpoi[3] = height - deteheight;
// 右上角
dpoi[4] = dpoi[0] + foldchangewidth;
dpoi[5] = 0;
// 右下角
dpoi[6] = dpoi[4];
dpoi[7] = height;
}
matrixs[i].setPolyToPoly(spoi, 0, dpoi, 0, 4);

}
}

/** 控制组件的位置 */
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
int measuredWidth = childView.getMeasuredWidth();
int measuredHeight = childView.getMeasuredHeight();
if (mElements.mConfig.setSidebarPosition() % 2 == 0) {
if (childView.getId() == 0) {
childView.layout(
mElements.screenwidth
* (mElements.mConfig.setSidebarpercent())
/ 100, 0, mElements.screenwidth
* (mElements.mConfig.setSidebarpercent())
/ 100 + measuredWidth, measuredHeight);
} else {
childView.layout(0, 0, measuredWidth, measuredHeight);
}
}
if (mElements.mConfig.setSidebarPosition() % 2 == 1) {
childView.layout(0, 0, measuredWidth, measuredHeight);
}
}
}

/** 度量组件的大小 */
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
measureChildren(widthMeasureSpec, heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(widthSize, heightSize);
}
}

相关代码1：

package com.xy.framework.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;

/**
* @author 徐晔
*/
public class SideView extends RelativeLayout{

/**
* @author 徐晔
* @note 传递触摸事件的接口
*/
public static interface SideViewinterface {
/**传递onInterceptTouchEvent*/
public boolean onSideInterceptTouchEvent(MotionEvent ev);
}

private SideViewinterface mSideViewinterface;
public SideView(Context context, AttributeSet attrs, int defStyle,SideViewinterface mSideViewinterface ) {
super(context, attrs, defStyle);
this.mSideViewinterface=mSideViewinterface;
}

public SideView(Context context, AttributeSet attrs,SideViewinterface mSideViewinterface ) {
super(context, attrs);
this.mSideViewinterface=mSideViewinterface;
}

public SideView(Context context,SideViewinterface mSideViewinterface ) {
super(context);
this.mSideViewinterface=mSideViewinterface;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {

return mSideViewinterface.onSideInterceptTouchEvent(ev);
}

/** 测量位置 */
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
int measuredWidth = childView.getMeasuredWidth();
int measuredHeight = childView.getMeasuredHeight();
childView.layout(0, 0, measuredWidth, measuredHeight);
}
}

/** 度量大小 */
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
measureChildren(widthMeasureSpec, heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);

setMeasuredDimension(widthSize, heightSize);
}

}

Activity中的代码：

package com.xy.framework;

import com.example.xyframework.R;
import com.xy.framework.widget.SideView.SideViewinterface;
import com.xy.framework.widget.Sidebarview;
import com.xy.framework.widget.Sidebarview.SidebarConfig;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.RelativeLayout;

public class SidebarActivity extends Activity {

private Sidebarview view;
private RelativeLayout menu, side;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
menu = (RelativeLayout) getLayoutInflater()
.inflate(R.layout.menu, null);
side = (RelativeLayout) getLayoutInflater()
.inflate(R.layout.side, null);
view = new Sidebarview(this, new SidebarConfig() {
@Override
public int setSidebarpercent() {
return 50;
}

@Override
public int setSidebarPosition() {
return 1;
}
});
view.addViewtoMenu(menu);
view.addViewtoSide(side, new SideViewinterface() {
@Override
public boolean onSideInterceptTouchEvent(MotionEvent ev) {
// TODO 自动生成的方法存根
return false;
```

});
setContentView(view);
}
}

其实实现的原理并不难；只要你仔细分析，类似于这种效果，你首先要将它分解开来看；然后分别找到实现相应效果的办法，最终将他组合在一起，那么就可以了；照着这篇介绍的原理，我相信大家可以自己研究一下类似于翻页效果的例子等等；