Google官方抽屉DrawerLayout使用心得、踩坑经验以及定制化

基础使用

这里要介绍的是google的DrawerLayout，行为可见google官方应用如gmail，看手Q的抽屉，应该是根据android-undergarment项目来定制的一个控件。

Google Desgin GuildLines里面有介绍：http://www.google.com/design/spec/layout/structure.html#structure-system-bars

官方教程：Creating a Navigation Drawer

DrawerLayout添加在主内容区的上层，作为parent，下面的第一个child是主内容区域，第二个child则可以是其他任何东西，需要作为抽屉的view则需要声明android:layout_gravity。

DrawerLayout的setScrimColor可以设置抽屉拉出时右侧主内容剩余区域上面盖的颜色（默认0x99000000）。

高级应用

DrawerLayout默认只有在边缘的一个edge能够触发抽屉拉取的动作，而这个是通过ViewDragHelper这个类来实现的。

private static final int EDGE_SIZE = 20; // dp

    private static final int BASE_SETTLE_DURATION = 256; // ms
    private static final int MAX_SETTLE_DURATION = 600; // ms

EDGE_SIZE是触发区域，默认20dp，而BASE_SETTLE_DURATION和MAX_SETTLE_DURATION则是控制抽屉从打开到关闭之间的这个间隔。由于是私有静态常量，可以通过

public static void setDrawerLeftEdgeSize(DrawerLayout drawerLayout, float dp) {
        if (drawerLayout == null) {
            return;
        }

        try {
            // find ViewDragHelper and set it accessible
            Field leftDraggerField = drawerLayout.getClass().getDeclaredField("mLeftDragger");
            leftDraggerField.setAccessible(true);
            ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField.get(drawerLayout);
            // find edgesize and set is accessible
            Field edgeSizeField = leftDragger.getClass().getDeclaredField("mEdgeSize");
            edgeSizeField.setAccessible(true);
            int edgeSize = edgeSizeField.getInt(leftDragger);
            edgeSizeField.setInt(leftDragger, Math.max(edgeSize, ViewUtils.dpToPx(dp)));
        } catch (NoSuchFieldException e) {
            // ignore
        } catch (IllegalArgumentException e) {
            // ignore
        } catch (IllegalAccessException e) {
            // ignore
        }
    }

来设置左侧的触发区域，类似地可以修改右侧触发区域以及打开动画的间隔（当然你也可以直接去ViewDragHelper里面修改）。

不建议自己处理onTouch，会导致抽屉不能平滑跟手，比如stackoverflow上有给出以下这种方案的，简直坑爹：

// ======================== 触摸事件处理 ===================================
    private float startX, startY;

    public boolean dispatchTouchEvent(MotionEvent ev) {
        boolean handled = false;
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                startX = ev.getX();
                startY = ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_UP:
                float endX = ev.getX();
                float endY = ev.getY();

                if (startX > HOT_FIELD || Math.abs(endY - startY) > SENSIBILITY_Y) {
                    break;
                }
                // From left to right
                if (endX - startX >= SENSIBILITY_X) {
                    handled = openDrawer();
                }
                // From right to left
                if (startX - endX >= SENSIBILITY_X) {
                    handled = closeDrawer();
                }
                break;
        }
        if (handled) {
            mDrawerLayout.cancelChildViewTouch();
        }
        return handled;
    }

坑爹的bug们

初始化LayoutParam时可能出错

@Override
    public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
        LayoutParams layoutParams = null;
        try {
            // 出现异常时，用默认值
            layoutParams = new LayoutParams(getContext(), attrs);
        } catch (Throwable e) {
            layoutParams = null;
        }
        if (layoutParams == null) {
            layoutParams = new LayoutParams(-1, -1);
            layoutParams.gravity = Gravity.NO_GR***ITY;
        }
        return layoutParams;
    }

多点触摸的时候DrawerLayout抛出一个ArrayIndexOutOfBoundsException，这是由于多点触摸时候requestDisallowInterceptTouchEvent和DrawerLayout的innerViews问题。自己在外面继承DrawerLayout然后改一下行为。

public class SafeDrawerLayout extends DrawerLayout {

    public SafeDrawerLayout(Context context) {
        super(context);
    }

    public SafeDrawerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SafeDrawerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    private boolean mIsDisallowIntercept = false;

    @Override
    public void requestDisallowInterceptTouchEvent(boolean disallowIntercept) {
        // keep the info about if the innerViews do requestDisallowInterceptTouchEvent
        mIsDisallowIntercept = disallowIntercept;
        super.requestDisallowInterceptTouchEvent(disallowIntercept);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        // the incorrect array size will only happen in the multi-touch scenario.
        if (ev.getPointerCount() > 1 && mIsDisallowIntercept) {
            requestDisallowInterceptTouchEvent(false);
            boolean handled = super.dispatchTouchEvent(ev);
            requestDisallowInterceptTouchEvent(true);
            return handled;
        } else {
            return super.dispatchTouchEvent(ev);
        }
    }
}

有时候手动拉出抽屉时候，抽屉会卡在那里，拉不出来

这也是极其坑爹的一个bug，原因是触摸EDGE的时候，事件触发到抽屉出现有一个延时

/**
     * Length of time to delay before peeking the drawer.
     */
    private static final int PEEK_DELAY = 160; // ms

@Override
        public void onEdgeTouched(int edgeFlags, int pointerId) {
            postDelayed(mPeekRunnable, PEEK_DELAY);
        }

抽屉有STATE_IDLE, STATE_DRAGGING和STATE_SETTLING三种状态，而这个偶然状况下，已经处于STATE_DRAGGING，而这个动作打开了抽屉20dp并试图再次置回STATE_DRAGGING，

private boolean checkNewEdgeDrag(float delta, float odelta, int pointerId, int edge) {
        final float absDelta = Math.abs(delta);
        final float absODelta = Math.abs(odelta);

        if ((mInitialEdgesTouched[pointerId] & edge) != edge  || (mTrackingEdges & edge) == 0 ||
                (mEdgeDragsLocked[pointerId] & edge) == edge ||
                (mEdgeDragsInProgress[pointerId] & edge) == edge ||
                (absDelta <= mTouchSlop && absODelta <= mTouchSlop)) {
            return false;
        }
        if (absDelta < absODelta * 0.5f && mCallback.onEdgeLock(edge)) {
            mEdgeDragsLocked[pointerId] |= edge;
            return false;
        }
        return (mEdgeDragsInProgress[pointerId] & edge) == 0 && absDelta > mTouchSlop;
    }

但这里由于mEdgeDragsInProgress[pointerId] & edge) == edge所以阻止了DrawerLayout回到STATE_DRAGGING。

解决方案是把DrawerLayout的ViewDragCallback中的mPeekRunnable进行修改，简单粗暴。

private final Runnable mPeekRunnable = new Runnable() {
            @Override public void run() {
                //peekDrawer();
            }
        };