简易抽屉实现

项目中用的抽屉经常有Bug，拉出来的时候偶尔推不进去，由于是别人写的，一时半会找不到问题所在，推迟了一个多月又重新找了慕课网的视频仿写了一下，感觉不错。

大神是用继承HorizontalScrollView的方式实现的（项目中用的是继承FrameLayout），巧妙避开了滑动冲突……

话不多说，先感受一下超简洁的代码

这是关键的自定义view

/**
 * 具有立体效果的抽屉
 * 著作权：http://www.imooc.com/learn/211 作者hyman
 *
 * Created by Administrato
 */
public class ThreeDimenDrawer extends HorizontalScrollView {
    public static ThreeDimenDrawer getThreeDimenDrawer() {
        return threeDimenDrawer;
    }

    public static ThreeDimenDrawer threeDimenDrawer;
    private LinearLayout mWraaper;
    private ViewGroup mMenu;//菜单栏
    private ViewGroup mContent;
    private int mScreenWidth;//屏幕宽度
    private int mMenuRightpadding = 100;//菜单与主界面距离
    private boolean once;
    public static int mMenuWidth;//ca菜单宽度

    /**
     * 决定内部View的宽高以及自己的宽和高
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        加判断，防止重复调用浪费性能
        if (!once) {// 如果once为false
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            mWraaper = (LinearLayout) getChildAt(0);// 最外层
            mMenu = (ViewGroup) mWraaper.getChildAt(0);// 最外层里面的第一个子view
            mContent = (ViewGroup) mWraaper.getChildAt(1);//最外层里面的第二个子view
            mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightpadding;//设置菜单宽度
            mContent.getLayoutParams().width = mScreenWidth;  //        设置主界面宽度
            once = true;
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 决定view放置的位置
     * 通过设偏移量 将menu隐藏
     *
     * @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) {
            this.scrollTo(mMenuWidth, 0);//menu隐藏
        }


    }

    /**
     * 处理触摸事件
     *
     * @param ev
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_UP:
                /**
                 * 判断手指抬起时 菜单显示到屏幕的大小，如果大于菜单宽度的一半 就全部显示  否则隐藏
                 */
                int scrollX = getScrollX();//就是抽屉部分
                if (scrollX >= mMenuWidth / 2) {
                    this.smoothScrollTo(mMenuWidth, 0);
                } else {
                    this.smoothScrollTo(0, 0);
                }
                return true;
        }
        return super.onTouchEvent(ev);
    }

    /**
     * @param context
     */
    public ThreeDimenDrawer(Context context) {
        super(context);

    }

    /**
     * 未使用自定义属性时调用
     *
     * @param context
     * @param attrs
     */
    public ThreeDimenDrawer(Context context, AttributeSet attrs) {
        super(context, attrs);
        threeDimenDrawer = this;
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outmetrics = new DisplayMetrics();
        windowManager.getDefaultDisplay().getMetrics(outmetrics);//屏幕配置
        mScreenWidth = outmetrics.widthPixels;
//        把dp转换为PX
        mMenuRightpadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mMenuRightpadding, context.getResources().getDisplayMetrics());
    }

 
}

主布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com *****>

    <com.***.weidget.ThreeDimenDrawer
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <!--水平滑动只能包含一个容器-->
            <include layout="@layout/common_leftmenu" />（这是抽屉内容）

            <include layout="@layout/common_main" />（主布局内容）

（理论上这里可以添加右侧抽屉甚至更多....）
        </LinearLayout>

    </com.****.weidget.ThreeDimenDrawer>
</RelativeLayout>

原理其实很简单：

1-将所有内容（包括看不见的），当成是左右滑动的页面，打开抽屉就相当于看页面最左侧内容，关闭抽屉就相当于向左滑动直到隐藏抽屉的内容；

2-显示方面，在onMeasure里面拿到所有的子View（抽屉和主界面），对宽度进行赋值，并使用标记位避免频繁重绘影响性能

3-滑动事件方面，就看代码里的注释吧 ，毕竟不难，只是我想不到而已 ，一看就懂 了 哈哈哈 ，还是人家老司机经验多

4-还有就是项目有个需求，点最上角那个按钮能打开“<span style="font-family: Arial, Helvetica, sans-serif;">抽屉</span>”，当时我是懵逼的，不过试了一下还是好弄的：

<pre style="font-family: Consolas; font-size: 10.5pt; background-color: rgb(202, 230, 202);"><span style="color:#002db5;"><strong>ThreeDimenDrawer</strong></span><span style="color:#333333;">.</span><span style="color:#680069;"><strong>getThreeDimenDrawer</strong></span><span style="color:#000066;">()</span><span style="color:#333333;">.</span>smoothScrollTo<span style="color:#000066;">(</span><span style="color:#333333;"><strong>0</strong></span><span style="color:#333333;">, </span><span style="color:#333333;"><strong>0</strong></span><span style="color:#000066;">)</span><span style="color:#333333;">;</span>

//  拿到该类引用，调用方法即可哈哈哈哈哈哈哈哈

好了 ，这次写到这里 ，今天还要研究立体效果呢   ，研究好了再写博客