android自定义控件 侧滑菜单(仿QQ)

效果图:这个效果是类似QQ客户端滑动那样的效果, 应该说差不多一样把.

实现原理: 自定义一个 view 继承 HorizontalScrollView(因为它可左右滑动).    view 里面包含 两个布局, 一个在左边(菜单layout),另一个右边(主layout), 通过重写父类方法 来实现 侧滑功能

下面贴布局文件: 

<pre name="code" class="html"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:it="http://schemas.android.com/apk/res/com.it.sideslipmenu"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context="com.it.sideslipmenu.MainActivity" >

    <com.it.sideslipmenuview.MyView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="false"
        android:scrollbars="none"
        it:rightPadding="100dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@drawable/ic_launcher"
            android:orientation="horizontal" >

            <include layout="@layout/menu" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <include
                    android:id="@+id/aa"
                    layout="@layout/messagetop" />

                <com.it.sideslipmenuview.mViewPager
                    android:id="@+id/vp1"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:background="#FFFFFF" >
                </com.it.sideslipmenuview.mViewPager>

                <include layout="@layout/bottom" />
            </LinearLayout>
        </LinearLayout>
    </com.it.sideslipmenuview.MyView>
<p></RelativeLayout></p><p>
</p>

最外层是一个RelativeLayout, 它里面只有一个 继承了 horizontalScroll 的 custom view.       因为 horizontalScroll  内 只能有一个子view, 所以我们写一个 linearlayout, 里面包含了 一个左menu,  右边是一个linearlayout 里面 组成的一个 主页面.

自定义属性it:rightPadding: 作用是滑动过后, 让内容区域显示多少的值!

左右布局在这里就不贴了, 左侧就是一些 linearlayout + relativelaout 写出来的., 而右侧 是  头部 +自定义viewpager +底部 组成 也没什么说的

下面来说说程序的核心, 我们的custom view 

/**
 * 5.0新特性 侧滑菜单
 * 
 * @author accer
 * 
 */
public class MyView extends HorizontalScrollView {
	private LinearLayout mWapper;
	private ViewGroup menu; // menu layout
	private ViewGroup content; // content layout

	private int mMenuPaddingRight;
	private int screenWidth;
	private boolean once; //是否分配过大小
	private int menuWidth;

	/**
	 * 当使用自定义属性的时候
	 * 
	 * @param context
	 * @param attrs
	 */
	public MyView(Context context, AttributeSet attrs) {
		super(context, attrs);
		DisplayMetrics outMetrics = new DisplayMetrics();
		WindowManager wm = (WindowManager) context
				.getSystemService(context.WINDOW_SERVICE);
		wm.getDefaultDisplay().getMetrics(outMetrics);
		screenWidth = outMetrics.widthPixels;

		// 获取自定义的属性
		TypedArray array = context.getTheme().obtainStyledAttributes(attrs,
				R.styleable.MyView, 0, 0);
		// 查看有多少个属性
		int attributeNumber = array.getIndexCount();
		// 遍历每个属性
		for (int i = 0; i < attributeNumber; i++) {
			int attribute = array.getIndex(i);
			// 判断属性值
			switch (attribute) {
			case R.styleable.MyView_rightPadding:
				mMenuPaddingRight = array.getDimensionPixelSize(attribute,
						(int) TypedValue.applyDimension(
								TypedValue.COMPLEX_UNIT_DIP, 50, context
										.getResources().getDisplayMetrics()));
				break;
			}
		}
		array.recycle();
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

		if (!once) { 
			mWapper = (LinearLayout) getChildAt(0); // horizontal 下的 linearlayout

			menu = (ViewGroup) mWapper.getChildAt(0);// linearlayout 下的 left menu

			content = (ViewGroup) mWapper.getChildAt(1);// linearlayout home page

			menuWidth = menu.getLayoutParams().width = screenWidth
					- mMenuPaddingRight;
			content.getLayoutParams().width = screenWidth;

			once = true;
		}
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);

	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		super.onLayout(changed, l, t, r, b);
		if (changed) {
			this.scrollTo(menuWidth, 0);
		}
	}

	/**
	 * 实现抽屉式菜单. 第一个参数 l 就相当于 getScrollX 当滚动条改变的时候 不停的计算偏移量
	 */
	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		super.onScrollChanged(l, t, oldl, oldt);

		float scale = l * 1.0f / menuWidth; // 1 ~ 0 变化
		ViewHelper.setTranslationX(menu, menuWidth * scale * 0.7f);
		/**
		 * 
		 * QQ侧滑菜单与抽屉式侧滑区别..
		 * 
		 * 1, 内容区域 1.0 ~ 0.7的缩放效果
		 * 
		 * scale : 1.0~0.0 0.7 + 0.3 * scale
		 * 
		 * 2, 菜单的偏移量需要修改
		 * 
		 * 3, 菜单显示的时候有缩放以及透明度变化 缩放: 0.7~ 1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0 0.6
		 * + 0.4 * (1 -scale) ;
		 **/
		float rightScale = 0.7f + 0.3f * scale;
		float leftScale = 1.0f - scale * 0.3f;
		float alpha = 0.6f + 0.4f * (1f - scale);
		ViewHelper.setPivotX(content, 0);
		ViewHelper.setPivotY(content, content.getHeight() / 2);
		ViewHelper.setScaleX(content, rightScale);
		ViewHelper.setScaleY(content, rightScale);
		ViewHelper.setScaleX(menu, leftScale);
		ViewHelper.setScaleY(menu, leftScale);
		ViewHelper.setAlpha(menu, alpha);
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {

		int action = ev.getAction();
		switch (action) {
		case MotionEvent.ACTION_UP:
			int scrollX = getScrollX();

			if (scrollX >= menuWidth / 2) {
				this.smoothScrollTo(menuWidth, 0);
			} else {
				this.smoothScrollTo(0, 0);
			}
			return true;
		}

		return super.onTouchEvent(ev);
	}
}

下面来说每个方法的作用 . 

onMeasure 中 需要计算子View 的宽和高, 以及设置自己的宽和高.
onLayout 中 计算 子 view 的位置

onTouchEvent 触摸时间,根据 offset 判断是否 切换

onScrollChanged  监听滑动状态, 方法内用到ViewHelper  是一个动画切换的jar包 (nineOldAndroids)

写的不好 忘见谅.