最简单的基于SlidingMenu仿QQ侧滑效果

很久没有写博客了,其实写的也很少啦!!今天看了下SlidingMenu这个第三方库,非常感谢SlidingMenu库的作者,大大减少了我们在android中开发侧滑布局的难度.今天我要说的是基于SlidingMenu的一个简单的仿QQ侧滑效果,其实代码很简单啦!接下来就进入正题吧!

使用SlidingMenu首先将下载好的SlidngMenu作为依赖包导入开发工具,第二将它作为自己新建工程的依赖包,这样就可以开发了.这种第三方控件其实就几个步骤,记住就行了,如果有兴趣想研究的话,也可以深入的看看大牛们写的源码.这里我就直接上代码了,里面有很详细的说明:

MainActivity.Java

public class MainActivity extends Activity {

	/**
	 * 声明侧滑菜单对象
	 */
	private SlidingMenu slidMenu;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//设置窗口背景
		getWindow().setBackgroundDrawableResource(R.drawable.img);
		
		//实例化SlidingMenu对象,并指定指定菜单的归属模式为SLIDING_WINDOW
		slidMenu = new SlidingMenu(this, SlidingMenu.SLIDING_WINDOW);
		
		//设置模式为左侧滑
		slidMenu.setMode(SlidingMenu.LEFT);
		
		//设置侧滑菜单显示的布局
		slidMenu.setMenu(R.layout.qq_slidingmenu);
		
		//设置菜单出来的触摸方式,此处指定全屏
		slidMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		
		//设置侧滑菜单出来的宽度为屏幕宽度的0.5
		slidMenu.setBehindWidth((int) (getResources().getDisplayMetrics().widthPixels*0.5));
		
		//设置侧滑效果:渐变效果
		slidMenu.setFadeDegree(1f);
		
		//仿QQ侧滑效果关键就在这个方法
		//设置菜单UI的移动效果
		slidMenu.setBehindCanvasTransformer(new CanvasTransformer() {
			
			@Override
			public void transformCanvas(Canvas canvas, float percentOpen) {
				float scale = 0.75f+0.25f*percentOpen;
				canvas.scale(scale, scale, -canvas.getWidth()/2,canvas.getHeight()/2);
			}
		});
		
		//设置activity层内容UI移动效果
		//此方法为slidingmenu中自己增加的方法
		slidMenu.setAboveCanvasTransformer(new CanvasTransformer() {
			
			@Override
			public void transformCanvas(Canvas canvas, float percentOpen) {
				float scale=1f-0.25f*percentOpen;
				canvas.scale(scale, scale,0,canvas.getHeight()/2);
			}
		});
	}
}

看了是不是感觉很简单啊 ,其实主要就是setAboveCanvasTransformer()这个自己新增的方法,也就是在SlidingMenu自己新增的一个方法.

其实也就是仿照SlidingMenu自己提供的setBehindCanvasTransformer()方法模仿的;效果实现的代码就这么点,简单吧!接下来就看怎么修改SlidingMenu中的代码了;

首先在SlidingMenu.java这个核心类中添加以下方法:

public void setAboveCanvasTransformer(CanvasTransformer t) {
		mViewAbove.setCanvasTransformer(t);
	}

这个时候你会发现直接报错了,这时需要对 CustomViewAbove.java这个文件进行修改;

首先新增属性成员:

private CanvasTransformer mTransformer;

接下来再新增一个方法:

public void setCanvasTransformer(CanvasTransformer t) {
		mTransformer = t;
	}

是不是迫不及待了,别急!!还有最关键的两步:

在该类的scrollTo()方法中加上以下代码:

if (mTransformer != null)
			invalidate();

在dispatchDraw()方法中添加以下代码:

if (mTransformer != null) {
			canvas.save();
			mTransformer.transformCanvas(canvas, getPercentOpen());
			super.dispatchDraw(canvas);
			canvas.restore();
		} else
			super.dispatchDraw(canvas);

这个地方需要注意的是一定要将这个方法中的调用父类dispatchDraw()方法注释掉,否则效果就不行了,现在都已经进行配置完成了,这个时候运行你的代码,一个简单的仿QQ侧滑效果就出来了,是不是很简单啊
下面是效果图: