Android学习之简单的侧滑效果

今天在自己的应用的是由遇到了要使用侧滑的界面，所以就写下此文，到以后再来复习

首先

我们先来看一下布局文件

<com.example.cehua.SildingView
  android:id="@+id/mSilding"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
    >

是不是非常简单

那么接下来就看看这个我们自定义的View

package com.example.cehua;

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);
		// TODO Auto-generated constructor stub
		init();
	}
	private void init() {
		// TODO Auto-generated method stub
		mBottomLinear= new LinearLayout(getContext());
		mTopLinear= new LinearLayout(getContext());
		mBottomLinear.setOrientation(LinearLayout.VERTICAL);
		mTopLinear.setOrientation(LinearLayout.VERTICAL);
		mBottomLinear.setBackgroundColor(Color.YELLOW);
		mTopLinear.setBackgroundColor(Color.GREEN);
	}
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		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;
	}
		public void setBottom(View v) {
	     v.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
		mBottomLinear.addView(v);
		}
		public void setTop(View v){
			v.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
			mTopLinear.addView(v);
		}
		@Override
		public boolean dispatchTouchEvent(MotionEvent ev) {
			// TODO Auto-generated method stub
			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 {
					//垂直状态，关闭
					if (!IsSping) {
						return super.dispatchTouchEvent(ev);
					}else{
						return true;
					}
						
				}
				//设置一个边界值：防止手指按下出现抽屉抖动的情况
//				if(Math.abs(disX)<10){
//					return super.dispatchTouchEvent(ev);
//				}
				//根据手指滑动的x轴移动的距离的正负，判断抽屉打开的方向

				
				if (disX>0) {//大于0从左右滑动；打开
					//获取到顶部布局的属性
					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) {
					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);
		}
}

也很简单对吧‘

然后我们在重写一个适配器

package com.example.cehua;

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 arg0) {
		// TODO Auto-generated method stub
		return list.get(arg0);
	}

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

	@Override
	public View getView(int arg0, View arg1, ViewGroup arg2) {
		// TODO Auto-generated method stub
	ViewHolder holder;
		if(arg1==null){
			holder=new ViewHolder();
			arg1=View.inflate(ctx, R.layout.item, null);
			holder.tv=(TextView) arg1.findViewById(R.id.mTv);
			arg1.setTag(holder);
		}else{
			holder=(ViewHolder) arg1.getTag();
		}
		holder.tv.setText(list.get(arg0));
		return arg1;

	}
	private class ViewHolder{
		private TextView tv;
	}


}

最后我们回到主界面来实现侧滑

package com.example.cehua;

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.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.ListView;

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() {
		// TODO Auto-generated method stub
		for (int i = 0; i < 100; i++) {
			list.add("啦啦啦"+(i+1)+"嘿嘿");
		}
	}

	private void initView() {
		// TODO Auto-generated method stub
		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);

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

	@Override
	public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
		// TODO Auto-generated method stub
		Toast.makeText(this, list.get(arg2), 0).show();
		
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		Toast.makeText(this, "ok", 500).show();
	}

}

最后还有侧滑item的布局

扫描二维码关注公众号，回复： 4270960 查看本文章

   <TextView 
        android:id="@+id/mTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        />

是不是很简单呢！

如果对你有帮助就给我点个赞吧