安卓实现QQ侧滑菜单效果

学习的是慕课网的教程：http://www.imooc.com/learn/211
有兴趣的朋友可以看看。
一、概述
实现QQ侧滑效果的思路：
1、一个滚动条里面左边包含菜单内容，右边包含主页内容。
初始化时，通过偏移量默认显示主页内容。
2、通过自定义滚动条的几个方法，实现：
设置菜单的宽度，内容的宽度。
（在此次，内容的宽度=屏幕宽度，菜单的宽度=屏幕宽度-边距）
设置偏移量，把内容菜单显示出来。
设置手指放开的时候，菜单是弹出还是收回。

二、实现菜单布局
1、写一个sliding_layout.xml，里面是侧边菜单的布局
sliding_layout.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background3">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/ic_launcher"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="30dp"
                android:textSize="50sp"
                android:text="Item1"
                android:textColor="#ffffff"
                android:layout_toRightOf="@id/img1"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/ic_launcher"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="30dp"
                android:textSize="50sp"
                android:text="Item2"
                android:textColor="#ffffff"
                android:layout_toRightOf="@id/img2"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/ic_launcher"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="30dp"
                android:textSize="50sp"
                android:text="Item3"
                android:textColor="#ffffff"
                android:layout_toRightOf="@id/img3"/>
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

2、写一个自定义滚动条布局，包含内容和侧边栏布局
activity_sliding_menu.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.barbara.slidingmenu.SlidingMenu
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/background">
            </LinearLayout>
        </LinearLayout>
    </com.example.barbara.slidingmenu.SlidingMenu>


</RelativeLayout>

三、自定义ViewGroup
上面的代码中用了一个com.example.barbara.slidingmenu.SlidingMenu
就是一个自定义的滚动条，继承了HorizontalScrollView
SlidingMenu.java代码：

package com.example.barbara.slidingmenu;

import android.content.Context;
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;

/**
 * Created by barbara on 2016/5/4.
 */
public class SlidingMenu extends HorizontalScrollView {

    private LinearLayout mWapper;
    private ViewGroup mMenu;
    private ViewGroup mContent;
    private int mScreenWidth;
    //dp
    private int mMenuRightPadding;
    private int menuWidth;
    private boolean flag = false;



    /**
     * override constructor with 2 params
     * 当没有使用自定义参数时调用的构造器
     * @param context
     * @param attrs
     */
    public SlidingMenu(Context context, AttributeSet attrs) {
        super(context, attrs);

        //get ScreenWidth
        WindowManager wm = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        mScreenWidth = outMetrics.widthPixels;

        //change mRightPadding from dp to px
        mMenuRightPadding = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50
                ,context.getResources().getDisplayMetrics());
    }


    /**
     * measure method : measure childViews' width &height
     * calculate width &height itself
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if(!flag) {
            //获取整个容器
            mWapper = (LinearLayout) getChildAt(0); 
            //获取左边菜单
            mMenu = (ViewGroup) mWapper.getChildAt(0); 
            //获取右边内容
            mContent = (ViewGroup) mWapper.getChildAt(1);
            //菜单的宽度=屏幕宽度-右边距
            menuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding; 
            //内容宽度=屏幕宽度
            mContent.getLayoutParams().width = mScreenWidth; 
            flag = true;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    /**
     * doSomething while touchEvent happening(ACTION_UP)
     * @param ev
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_UP: {//用户抬起手指
                int scrollX = getScrollX(); //隐藏在左边的宽度
                if (scrollX >= menuWidth >> 1) {
                    smoothScrollTo(menuWidth, 0);
                } else {
                    smoothScrollTo(0, 0);
                }
                return true;
            }
        }
        return super.onTouchEvent(ev);
    }


    /**
     * 通过设置偏移量，把内容区域显示出来
     * @param changed
     * @param l
     * @param t
     * @param r
     * @param b
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if(changed) {
            //x 为正值，滚动条向右移动，内容向左移动
            this.scrollTo(menuWidth,0);
        }
    }
}