安卓原理写类似QQ侧滑效果

想要实现QQ侧滑菜单栏有两种方法，一种是运用框架，另一种是用原理写。而今天我要介绍的是用原理将QQ侧滑效果展示出来。

其实很简单，自定义抽屉菜单的原理即自定义继承自分层布局，使用事件分发，根据手指滑动的方向和距离进行判断抽屉打开的方向和位置。

由于代码中注释比较详细，所以就直接上代码了。下面请看代码【本代码是在eclipse中写的】：

第一步：首先新建一个自定义类继承frame layout，实现两个参数的方法。

package cn.bgs.sildingmenudemo;

import android.content.Context;
import android.graphics.Color;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

/*
 *  自定义抽屉菜单：  原理：自定义继承自分层布局，使用事件分发，根据手指滑动的方向和距离进行判断抽屉打开的方向和位置
 *  		
 * */
public class SildingView extends FrameLayout{
	private LinearLayout mBottomLinear;//底层的布局
	private LinearLayout mTopLinear;//顶层的布局
	private PointF pf=new PointF();
	private PointF pf1=new PointF();
	private boolean IsFirst=true;//第一次进入的标志
	private boolean IsSping=false;//抽屉菜单打开关闭的标志---》默认情况下关闭的
	private int maxWidth=0;//抽屉打开的最大宽度
	public SildingView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView();
	}
	private void initView() {
		//实例化顶部底部布局
		mBottomLinear=new LinearLayout(getContext());
		mTopLinear=new LinearLayout(getContext());
		//设置线性方向-垂直
		mBottomLinear.setOrientation(LinearLayout.VERTICAL);
		mTopLinear.setOrientation(LinearLayout.VERTICAL);
		//方便查看设置背景颜色
		mBottomLinear.setBackgroundColor(Color.BLACK);
		mTopLinear.setBackgroundColor(Color.WHITE);
	}
	//重写onmesure方法 ，获取底部布局的最大宽度
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		//获取view的宽度--->设值底部的宽度
		if(IsFirst){
			maxWidth=(int) (getMeasuredWidth()*0.7);
			mBottomLinear.setLayoutParams(new FrameLayout.LayoutParams(maxWidth, FrameLayout.LayoutParams.MATCH_PARENT));
			mTopLinear.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
			//将布局添加到自定义里面
			addView(mBottomLinear);
			addView(mTopLinear);
		}
		IsFirst=false;
	}
	//设置底部linear布局的方法
	public void setBottom(View v){
		//给要在bottom里面添加的布局设置其在父容器中所占位置的宽高属性
		v.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
		//将布局添加到底部linear中
		mBottomLinear.addView(v);
	}
	public void setTop(View v){
		v.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
		mTopLinear.addView(v);
	}
	//底层事件的处理： return :1.true:自己处理了，不往下发    2.return super.dispatchtouchenvent（ev），交给系统自己处理--》往下发
	@Override
	public boolean dispatchTouchEvent(MotionEvent ev) {
		if(ev.getAction()==MotionEvent.ACTION_DOWN){
			//记录手指的坐标
			pf.x=ev.getX();
			pf.y=ev.getY();
			pf1.x=ev.getX();
			pf1.y=ev.getY();
		}else if(ev.getAction()==MotionEvent.ACTION_MOVE){
			//获取当前手指滑动后的坐标
			int x=(int) ev.getX();
			int y=(int) ev.getY();
			//计算手指滑动后的坐标距离：disX disY
			int disX=(int) (x-pf.x);//x轴移动的距离
			int disY=(int) (y-pf.y);//y轴移动的距离
			
			//根据正余弦定理来判断  水平滑动或者是垂直滑动
			if(Math.abs(disX)/2-Math.abs(disY)>0){
				//不做处理
			}else{//垂直状态--》抽屉应该关闭
				//TODO 通过抽屉的开关来判断上层可否移动
				if(!IsSping){
					return super.dispatchTouchEvent(ev);
				}else{
					return true;
				}
			}
			//设置一个边界值：防止手指按下出现抽屉抖动的情况
//			if(Math.abs(disX)<10){
//				return super.dispatchTouchEvent(ev);
//			}
			//根据手指滑动的x轴移动的距离的正负，判断抽屉打开的方向
			if(disX>0){//大于0  从左往右滑动：抽屉打开
				//获取到顶部布局的属性  lp
				FrameLayout.LayoutParams lp=(LayoutParams) mTopLinear.getLayoutParams();
				//判断左边距超过最大边距，将最大边距设置给滑动距离
				if(lp.leftMargin>=maxWidth){
					disX=maxWidth;
					IsSping=true;//抽屉开启
				}
				lp.leftMargin=disX;//将移动的距离设置给左边距
				lp.rightMargin=-disX;
				mTopLinear.setLayoutParams(lp);//将属性设置给顶部布局
			}else if(disX<0){
				//获取到顶部布局的属性  lp
				FrameLayout.LayoutParams lp=(LayoutParams) mTopLinear.getLayoutParams();
				if(lp.leftMargin<=0){
					disX=0;
					IsSping=false;
				}
				lp.leftMargin=lp.leftMargin-Math.abs(disX);
				lp.rightMargin=-lp.leftMargin;
				mTopLinear.setLayoutParams(lp);
				pf.x=x;//将移动后的坐标赋值给初始坐标，解决再次移动的问题
			}
			requestLayout();//刷新界面
			return true;
		}else if(ev.getAction()==MotionEvent.ACTION_UP){
			//区分是点击还是滑动
			int disX=(int) Math.abs(ev.getX()-pf1.x);
			if(disX>10){
				//以底部linear的宽度的一半为分割线，超过分割线，手指抬起，抽屉自动打开或关闭
				FrameLayout.LayoutParams lp=(LayoutParams) mTopLinear.getLayoutParams();
				if(lp.leftMargin>maxWidth/2){//抽屉自动打开
					lp.leftMargin=maxWidth;
					lp.rightMargin=-maxWidth;
					IsSping=true;
				}else{
					//抽屉关闭
					lp.leftMargin=0;
					lp.rightMargin=0;
					IsSping=false;
				}
				mTopLinear.setLayoutParams(lp);
				requestLayout();
				return true;//自己处理
			}
		}
		return super.dispatchTouchEvent(ev);
	}
}

第二步就是在MainActivity中，做一些简单的操作，运用自定义的slidingView。首先，先上一个activity_main.xml代码。具体代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
	<span style="color:#ff0000;"><cn.bgs.sildingmenudemo.SildingView//这个是你定义的包名加类名</span>
	    android:id="@+id/mSilding"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    />

</RelativeLayout>

这是activity的代码：

package cn.bgs.sildingmenudemo;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;
import android.widget.ImageView.ScaleType;
import android.widget.SlidingDrawer;

public class MainActivity extends Activity implements OnItemClickListener,
		OnClickListener {
	private SildingView mSilding;
	private ImageView mImg;
	private List<String> list = new ArrayList<String>();
	private ListView mLv;
	private MyAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initList();
		initView();
	}

	private void initList() {
		for (int i = 0; i < 100; i++) {
			list.add("第" + (i + 1) + "条数据");
		}
	}

	/* 此方法是针对一些控件进行初始化和设值 */
	private void initView() {
		mSilding = (SildingView) findViewById(R.id.mSilding);
		mImg = new ImageView(this);
		mImg.setImageResource(R.drawable.ic_launcher);
		mImg.setScaleType(ScaleType.FIT_XY);
		mSilding.setBottom(mImg);
		mLv = new ListView(this);
		adapter = new MyAdapter(this, list);
		mLv.setAdapter(adapter);
		mSilding.setTop(mLv);

		mLv.setOnItemClickListener(this);
		mImg.setOnClickListener(this);
	}

	// 顶层布局list view的监听事件
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		Toast.makeText(this, list.get(position), 0).show();
	}

	// 底层布局图片的监听事件
	@Override
	public void onClick(View v) {
		Toast.makeText(this, "哈哈，图片被点击了", 0).show();
	}

}

在运用以上的代码是会发现用到了list view，这时，我们就需要创建一个适配器的类。那么问题又来了，在写适配器类的时候，我们又会发现还需要引入一个布局item。所以我们首先要创建一个item的布局。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView 
        android:id="@+id/mTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        />

</LinearLayout>

接着，就是Adapter的类了，这个代码就比较简单了，就不多说了。直接上代码：

package cn.bgs.sildingmenudemo;

import java.util.List;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class MyAdapter extends BaseAdapter{
	private Context ctx;
	private List<String> list;
	public MyAdapter( Context ctx,List<String> list) {
		this.ctx=ctx;
		this.list=list;
	}
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return list.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return list.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder;
		if(convertView==null){
			holder=new ViewHolder();
			convertView=View.inflate(ctx, R.layout.item, null);
			holder.tv=(TextView) convertView.findViewById(R.id.mTv);
			convertView.setTag(holder);
		}else{
			holder=(ViewHolder) convertView.getTag();
		}
		holder.tv.setText(list.get(position));
		return convertView;
	}
	private class ViewHolder{
		private TextView tv;
	}
} 

这是一个从左侧滑出的效果。效果如图：

不足之处请多指正！！！