android 自定义viewGroup实现网易左侧菜单效果

我们低头族每天都喜欢看新闻,目前大家都喜欢用的是网易新闻,今日头条,特别是今日头条个人特别喜欢,平时没事就喜欢打开看看,但是今天要说下网易新闻有一个左侧滑出功能,今天就自定义一个这个效果,分析

1:这个我们直接自定义view是实现不了,或者用组合控件也实现不了,那就必须要自定义ViewGroup了,

2：先看一张图,这样对照图我们就好分析：

我们知道要自定义一个ViewGroup要实现onMeasure(),onLayout()方法,如果是继承了ViewGroup几大子类,我们在这可以不用实现onMeasure()方法,比如继承Framlayout,今天我们就采用这种方式,那么onLayout()方法是必须要实现的,他是让子view屏幕上具体的位置,从上面的图我们知道,左侧菜单一进来是隐藏的,我们知道一个view所在的位置,是由左上角坐标和右下角坐标构成的,它的右下角坐标很好确定是(0,屏幕的高度),左上角坐标应该是(-左侧layout的宽度,0),这样我们在onLayout()方法中代码就知道怎么写了,

4:现在滑动怎么实现了,我们知道view有个scrollTo()方法就是帮我们实现view的滑动的,这个是滑动到指定的坐标点,

比如我手指现在在(0,0)位置要滑动到(100,100)位置,那么它的偏移量是(0-100,0-100)也就是(-100,-100),而不是(100,100)如果这个搞错了,你会发现你手指向右滑动,view的内容是向左滑动,但是view本身向右滑动的奇怪现象,这就是因为你没搞明白偏移量是怎么算的,

5：还有一个功能就是当我们手指滑动到一半以上的距离,要实现回弹,这个是利用了android给我们提供了Scroller类,右这个类去帮我们实现,我们只要判断是否滑动到了一半,分析好了,现在把代码贴出来!

SlideMenu.java

package com.zhimore.slidemenudemo.view;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.Scroller;
public class SlideMenu extends FrameLayout {
	private static final String TAG = "SlideMenu";
	View  mContentView;
	View  mMenuView;
	private int mMenuViewWidth = 0;
	private int mDownX = 0;
	private  Scroller scroller;
	public SlideMenu(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public SlideMenu(Context context, AttributeSet attrs) {
		super(context, attrs);
		scroller = new Scroller(context);
	}

	public SlideMenu(Context context) {
		super(context);
	}
     @Override
    protected void onLayout(boolean changed, int left, int top, int right,int bottom) {
    	 mMenuView.layout(-mMenuViewWidth, 0, 0, mMenuView.getMeasuredHeight());
    	 mContentView.layout(left, top, right, bottom);
    	
    	 
    }
     @Override
    protected void onFinishInflate() {
    	 super.onFinishInflate();
    	 mMenuView = getChildAt(0);
    	mContentView = getChildAt(1);
    	mMenuViewWidth = mMenuView.getLayoutParams().width;//获取左侧菜单的宽度
    }
     int distanceX ;
     @Override
    public boolean onTouchEvent(MotionEvent event) {
    	 switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			mDownX = (int) event.getX();
			break;
		case MotionEvent.ACTION_MOVE:
			Log.e(TAG,"scrollX="+getScrollX());
			int moveX = (int) event.getX();
		    distanceX = moveX-mDownX;
			int scrollX = getScrollX()-distanceX;
			if(scrollX<-mMenuViewWidth)scrollX = -mMenuViewWidth;
			if(scrollX>0)scrollX = 0;
			scrollTo(scrollX, 0);
			mDownX = moveX;//每滑动一次就要把这个mDownX值记录下来
			break;
		case MotionEvent.ACTION_UP:
			if(getScrollX()>-mMenuViewWidth/2){
				closeMenu();
			}else {
				openMenu();
			}
			break;
		}
    	return true;
    }
     private void closeMenu(){
 		scroller.startScroll(getScrollX(), 0, 0-getScrollX(), 0, 300);
 		invalidate();
 	}
 	
 	private void openMenu(){
 		scroller.startScroll(getScrollX(), 0, -mMenuViewWidth-getScrollX(), 0, 300);
 		invalidate();
 	}
 	@Override
	public void computeScroll() {
		super.computeScroll();
		if(scroller.computeScrollOffset()){
			scrollTo(scroller.getCurrX(), 0);
			invalidate();
		}
	}
}

记住在move的时候mDownX = moveX;一定要对mDownX重新赋值,画个图就知道了!