android侧滑和下拉刷新简单实现原理，基于margin属性

现在越来越多的安卓应用都引用了侧滑功能，他能使本来就很小的屏幕展示了很多的内容，当然了这不是一下子都加载出来，而是通过我们手指的滑动来决定侧滑菜单是显示还是隐藏，下拉刷新的功能更是常见，几乎是所有的手机应用都必须的，这篇文章主要是简单介绍一下原理，这里主要参考了郭林的博客，郭林真的是一位牛人，这是他的博客地址：http://blog.csdn.net/sinyu890807/。

其实侧滑和下拉刷新的实现都是基于都一个原理，就是不断改变margin的值，比如我们要做android的侧滑（菜单隐藏在屏幕左侧），首先是在我们的布局文件中，写好两个布局，其中一个是菜单布局，一个是内容布局，下面是示例代码

<LinearLayout 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"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/menu"
        android:background="#FF8800" >
        <ImageView 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/ic_launcher"
            android:scaleType="fitXY"
            />
        
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/content"
        android:gravity="center">
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/pullrefesh"
            android:text="跳转到下拉刷新界面"
            />
    </LinearLayout>

</LinearLayout>

其中button是跳转到下拉刷新示例界面，这里先不要管他。可以看出在主布局LinearLayout中有两个LinearLayout子布局，分别是代表了菜单和内容，当然了，这里我们必须要对以上布局初始化，比如说要把菜单隐藏掉，把内容布局充分显示在屏幕中。

public class MainActivity extends Activity  implements OnTouchListener{


	private LinearLayout menu; //菜单布局
	private LinearLayout content;//主布局
	private Context context;//上下文
	
	private int screenWidth;  //屏幕宽度
	private int menuPadding =  300; //Menu完全显示时留给content的宽度
	private LinearLayout.LayoutParams menuParams; 
	private int  leftEdge; //menu完全隐藏时 距离屏幕距离
	private int rightEdge = 0; 
	
	private float xDown; //手指按下时x轴的坐标
	private float xMove;// 手指在x轴移动坐标
	private float xUp;//手指抬起时候的X坐标
	private boolean isMenuVisible;  //菜单是否在显示
	
	private Button pullrefesh;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		context = this;
		menu  = (LinearLayout) this.findViewById(R.id.menu);
		content  = (LinearLayout) this.findViewById(R.id.content);
		pullrefesh  = (Button) this.findViewById(R.id.pullrefesh);
		pullrefesh.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				Intent freshen =  new Intent(context, PullFreshenActivity.class);
				startActivity(freshen);
				
			}
		});
		initLayout();
		content.setOnTouchListener(this);
	}
	
	/**
	 * 初始化布局
	 */
	private void initLayout() {
		WindowManager window = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
		screenWidth  = window.getDefaultDisplay().getWidth();
		menuParams  = (LinearLayout.LayoutParams) menu.getLayoutParams();
		menuParams.width = screenWidth - menuPadding;
		leftEdge = - menuParams.width;
		menuParams.leftMargin = leftEdge;
		content.getLayoutParams().width = screenWidth;
	}
	
	
	@Override
	public boolean onTouch(View v, MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			xDown = event.getRawX();
			break;
		case MotionEvent.ACTION_MOVE:
			xMove = event.getRawX();
			int distanceX = (int) (xMove - xDown);  
			
			if(isMenuVisible){
				
			}else{
				menuParams.leftMargin  = leftEdge + distanceX;
			}
			//menu不能滑出边界
			if(menuParams.leftMargin > rightEdge){
				menuParams.leftMargin  = rightEdge;
			}else if(menuParams.leftMargin < leftEdge){
				menuParams.leftMargin  = leftEdge;
			}
			menu.setLayoutParams(menuParams);
			break;


		case MotionEvent.ACTION_UP:
			xUp = event.getRawX();
			//用户是要显示菜单
			if(xUp - xDown > 0 && !isMenuVisible){
				new Mytask().execute(30);
			}else if(xUp - xDown < 0 && isMenuVisible){  //用户想要隐藏菜单
				new Mytask().execute(-30);
			}
			
			break;
		default:
			break;
		}
		
		return true;
	}


	
	/**
	 * 使菜单能有一个渐变效果
	 * @author c_fei
	 *
	 */
	class Mytask  extends AsyncTask<Integer, Integer, Integer>{
		@Override
		protected Integer doInBackground(Integer... params) {
			Integer leftMargin = menuParams.leftMargin;
			
			while(true){
				leftMargin  = leftMargin + params[0];
				if(leftMargin > rightEdge){
					leftMargin = rightEdge;
					break;
				}
				
				if(leftMargin < leftEdge){
					leftMargin  = leftEdge;
					break;
				}
				publishProgress(leftMargin);
				try {
					Thread.sleep(30);
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
			
				
			}
			
			//判断菜单是显示还是隐藏
			if(params[0]>0){
				isMenuVisible  = true;
			}else if(params[0] < 0){
				isMenuVisible = false;
			}
			
			return leftMargin;
		}
		
		@Override
		protected void onPostExecute(Integer result) {
			menuParams.leftMargin  = result;
			menu.setLayoutParams(menuParams);
			
		}
		
		@Override
		protected void onProgressUpdate(Integer... values) {
			menuParams.leftMargin  = values[0];
			menu.setLayoutParams(menuParams);
		}
		
	}


}

其中MainActivity中initlayout方法就是对布局初始化，紧接着我们通过手指的移动来判断菜单的隐藏或显示，这里的Mytask类呢，是为了菜单在滑动过程中能有一种滑动的效果，就是不断改变leftMargin的值。

下面是程序运行后展示的效果，当然了，这只是展示其中的原理，很多方面都没有考虑。

这是刚开始的界面，以下是当我们手指向右滑动时，左边的菜单布局会以每30ms滑动30像素的速度向右滑动，最终的效果是

安卓的下拉刷新和侧滑写法都差不多，这里就只展示效果，代码可以自行查看。

之后会以每30ms向上滑动30像素的速度向上滑动，最终是把下拉刷新头隐藏掉。

源码下载点击这里