android:自定义HorizontalScrollView实现qq侧滑菜单

android:自定义HorizontalScrollView实现qq侧滑菜单

今天看了鸿洋_大神在慕课网讲的qq5.0侧滑菜单。学了不少的知识，同时也佩服鸿洋_大神思路的清晰。

看了教程课下也自己实现了一下。代码几乎完全相同 别喷我啊。。没办法 o(︶︿︶)o 唉

像素不好 没办法 找不到好的制作gif的软件。

我们暂且称侧滑左边界面的为menu,右边为content

首先是menu的布局

<!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/img_frame_background">

    <linearlayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerinparent="true" android:orientation="vertical">

        <relativelayout android:layout_width="fill_parent" android:layout_height="wrap_content">

            <imageview android:id="@+id/image1" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginleft="20dp" android:src="@drawable/img_1">

            <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:layout_torightof="@id/image1" android:textcolor="#ffffff" android:layout_marginleft="20dp" android:text="第一个Item" android:textsize="20sp">
        </textview></imageview></relativelayout>

        <relativelayout android:layout_width="wrap_content" android:layout_height="wrap_content">

            <imageview android:id="@+id/image2" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginleft="20dp" android:src="@drawable/img_2">

            <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:layout_torightof="@id/image2" android:textcolor="#ffffff" android:layout_marginleft="20dp" android:text="第二个Item" android:textsize="20sp">
        </textview></imageview></relativelayout>

        <relativelayout android:layout_width="wrap_content" android:layout_height="wrap_content">

            <imageview android:id="@+id/image3" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginleft="20dp" android:src="@drawable/img_3">

            <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:layout_torightof="@id/image3" android:textcolor="#ffffff" android:layout_marginleft="20dp" android:text="第三个Item" android:textsize="20sp">
        </textview></imageview></relativelayout>

        <relativelayout android:layout_width="wrap_content" android:layout_height="wrap_content">

            <imageview android:id="@+id/image4" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginleft="20dp" android:src="@drawable/img_4">

            <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:layout_torightof="@id/image4" android:textcolor="#ffffff" android:layout_marginleft="20dp" android:text="第四个Item" android:textsize="20sp">
        </textview></imageview></relativelayout>

        <relativelayout android:layout_width="wrap_content" android:layout_height="wrap_content">

            <imageview android:id="@+id/image5" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginleft="20dp" android:src="@drawable/img_5">

            <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:layout_torightof="@id/image5" android:textcolor="#ffffff" android:layout_marginleft="20dp" android:text="第五个Item" android:textsize="20sp">
        </textview></imageview></relativelayout>
    </linearlayout>

</relativelayout>

<!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent">

    <com.example.myhorizontalscrollview.myhorizontalscrollview android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="none">

        <linearlayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:orientation="horizontal">

            <include layout="@layout/menu">

            <linearlayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/qq">
        </linearlayout>
    </include></linearlayout></com.example.myhorizontalscrollview.myhorizontalscrollview>

</relativelayout>

需要重写其中的两个方法

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		// TODO Auto-generated method stub
		super.onLayout(changed, l, t, r, b);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

* 因为HorizontalScrollView自己控制move和down的事件
* 所以我们还要通过onTouchEvent判断一下up.如果当前的x偏移量大于menu宽度的一半
* 隐藏menu，否则显示menu 显示的时候通过smoothScrollTo(x, y)方法来实现动画的效果

下面是所有的自定义的HorizontalScrollView

package com.example.myhorizontalscrollview;

import android.annotation.SuppressLint;
import android.content.Context;
import android.text.GetChars;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

public class MyHorizontalScrollView extends HorizontalScrollView {

	//滚动条中的水平先行布局
	private LinearLayout mWrpper;
	//水平线性布局的左侧菜单menu
	private ViewGroup mMenu;
	//水平先行布局的右侧线性布局
	private ViewGroup mContent;
	//屏幕的宽
	private int mScreenWidth;
	//menu的宽离屏幕右侧的距离
	private int mMenuRightPadding=50;
	//menu的宽度
	private int mMenuWidth;
	private boolean once;
	
	
	/**
	 * 未使用自定义属性时调用
	 * */
	public MyHorizontalScrollView(Context context, AttributeSet attrs) {
		super(context, attrs)