DrawerLayout實現雙層Drawer

轉  https://www.jianshu.com/p/34366a80b425

DrawerLayout是實現側邊抽屜(Drawer)最方便的方法, 但是它僅僅支持單層Drawer, 這應該是因為在Material Design里面僅提及使用單層Drawer. 不過實際中有些場景需要我們實現雙層Drawer, 例如京東下面的這個功能.

 

京東篩選面板

關鍵的交互就是, 打開第一層Drawer后, 點擊其中的按鈕會打開第二層Drawer.

題外話: 雖然這里使用了京東的做示例, 但是京東這里應該不是用雙層DrawerLayout實現, 因為第二層Drawer關閉后不會返回第一層Drawer, 不過也有可能是需求就是這樣.

原生實現的問題

如果要用DrawerLayout實現, 當然想到的會是直接添加兩個Gravity.Right的控件了, 不過很快你就會得到一個IllegalStateException異常, 提示

java.lang.IllegalStateException: Child drawer has absolute gravity RIGHT but this DrawerLayout already has a drawer view along that edge at android.support.v4.widget.DrawerLayout.onMeasure(DrawerLayout.java:1100) at android.view.View.measure(View.java:18417) ... 

看錯誤提示就可以知道

DrawerLayout每個邊緣只能添加一個Drawer.

雙層Drawer解決辦法

源碼分析的過程就不說太多了, 只說關鍵的地方.
因為存在兩個同側的Drawer, 所以在遍歷子控件發現第二個Drawer的時候就會拋出異常.從上面的異常信息就可以知道異常的從DrawerLayout#onMeasure方法中拋出的, 所以要想不報錯

自定義View繼承DrawerLayout並重寫DrawerLayout#onMeasure方法, 處理它拋出的異常.

基本代碼如下:

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 雙層Drawer, 原生會拋出異常 try { super.onMeasure(widthMeasureSpec, heightMeasureSpec); } catch (IllegalStateException e) { // 捕獲異常... } } 

不過這樣app是不錯報錯退出了, 但是因為拋出異常, 所以會導致一些方法沒執行, 看DrawerLayout#onMeasure中異常拋出之后的代碼可以知道, 如果沒有拋出異常, 正常獲取到一個Drawer之后, 會調用child.measure(drawerWidthSpec, drawerHeightSpec)來限定Drawer的寬高, 所以我們捕獲異常之后需要手動做這部分的工作. 因為只會在遍歷到第二個Drawer的時候才會拋出異常, 所以

在捕獲異常時, 手動調用第二層Drawer的measure方法.

具體的邏輯直接從DrawerLayout#onMeasure復制出來就可以了, 代碼如下:

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 雙層Drawer, 原生會拋出異常 try { super.onMeasure(widthMeasureSpec, heightMeasureSpec); } catch (IllegalStateException e) { // 取第二層Drawer, demo里面最后一個子View就是第二層Drawer final int childCount = getChildCount(); final View child = getChildAt(childCount - 1); // 源碼的默認值是64dp, 為了方便直接寫死 final float density = getResources().getDisplayMetrics().density; int minDrawerMargin = (int) (64 * density + 0.5f); // 以下代碼直接取自DrawerLayout#onMeasure final LayoutParams lp = (LayoutParams) child.getLayoutParams(); final int drawerWidthSpec = getChildMeasureSpec(widthMeasureSpec, minDrawerMargin + lp.leftMargin + lp.rightMargin, lp.width); final int drawerHeightSpec = getChildMeasureSpec(heightMeasureSpec, lp.topMargin + lp.bottomMargin, lp.height); child.measure(drawerWidthSpec, drawerHeightSpec); } } 

到這里就可以正常顯示雙層Drawer了.

問題

仔細測試之后會發現有一個小BUG, 第一層Drawer不能通過點擊左側的陰影來收起Drawer.
具體的debug過程就不說了, 當點擊左側陰影的時候確實會執行收起Drawer的相關代碼, 但是相關的動畫卻不會起作用, 具體的原因超出本文范圍就不探究了.

為了解決這個問題自然想到我們自己處理點擊事件.
點擊事件一般在onTouchEvent中處理ACTION_UP事件, 所以查看DrawerLayout#onTouchEvent源碼, 可以知道當接收到ACTION_UP事件時會查找點擊區域的控件, 如果該控件不是Drawer, 就會調用closeDrawers()來關閉Drawer.

所以我們針對上面出現的問題, 專門處理第一層Drawer的關閉問題. 思路是

接收到ACTION_UP事件后判斷是不是第一層Drawer打開, 第二層Drawer關閉, 如果是就關閉第一層Drawer, 其他情況則交給原來的方法處理.

基本的代碼如下:

@Override public boolean onTouchEvent(MotionEvent ev) { /** 雙層Drawer時, 不能正常通過點擊收起第一層Drawer, 所以在這里自己處理 */ final int action = ev.getAction(); switch (action & MotionEventCompat.ACTION_MASK) { case MotionEvent.ACTION_DOWN: // 記錄坐標參數 break; case MotionEvent.ACTION_UP: { // mRightBelowView為第一層Drawer // mRightAboveView為第二層Drawer final float x = ev.getX(); final float y = ev.getY(); if (x < mRightBelowView.getLeft()) { // 判斷點擊的是陰影區域 final float dx = x - mInitialMotionX; final float dy = y - mInitialMotionY; final int slop = mTouchSlop; if (dx * dx + dy * dy < slop * slop) {// 判斷不是滑動 // 當第二層Drawer沒有打開而第一層Drawer打開時, 收起第一層Drawer if (!isDrawerOpen(mRightAboveView) && isDrawerOpen(mRightBelowView)) { closeDrawer(mRightBelowView); // 直接返回不執行默認代碼 return true; } } } break; } } // 其他情況使用默認代碼 return super.onTouchEvent(ev); } 

這樣就解決點擊關閉第一層Drawer的問題.

這里有一個小細節, 因為有雙層Drawer, 所以不應該使用openDrawer(@EdgeGravity int gravity)等方法來操作Drawer, 而應該直接指定Drawer控件, 使用openDrawer(View drawerView)等方法.

實際效果如下:

 

Demo效果

完整的自定義View代碼戳這里

（對於國內可能需要梯子，為方便，直接把代碼粘貼過來）

package customView;

import android.content.Context;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.MotionEventCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.DrawerLayout;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;

/**
 * 增強DrawerLayout
 * 1. 支持右側雙層Drawer, 原本的DrawerLayout會報錯
 * 2. 支持第一層Drawer點擊收起
 * Created by assistne on 16/10/25.
 */

public class AdvancedDrawerLayout extends DrawerLayout {

    private float mInitialMotionX;
    private float mInitialMotionY;
    private View mRightBelowView;
    private View mRightAboveView;
    private int mTouchSlop;
    public AdvancedDrawerLayout(Context context) {
        this(context, null);
    }

    public AdvancedDrawerLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AdvancedDrawerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        final ViewConfiguration vc = ViewConfiguration.get(context);
        mTouchSlop = vc.getScaledTouchSlop();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int childCount = getChildCount();
        // 雙層Drawer, 原生會拋出異常
        try {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        } catch (IllegalStateException e) {
            /** 默認最后一個子View是第二層Drawer */
            // 因為拋出異常, 所以手動測量第二層Drawer
            final float density = getResources().getDisplayMetrics().density;
            int minDrawerMargin = (int) (64 * density + 0.5f);
            final View child = getChildAt(childCount - 1);
            final LayoutParams lp = (LayoutParams) child.getLayoutParams();
            final int drawerWidthSpec = getChildMeasureSpec(widthMeasureSpec,
                    minDrawerMargin + lp.leftMargin + lp.rightMargin,
                    lp.width);
            final int drawerHeightSpec = getChildMeasureSpec(heightMeasureSpec,
                    lp.topMargin + lp.bottomMargin,
                    lp.height);
            child.measure(drawerWidthSpec, drawerHeightSpec);
        }

        // 找出兩個Drawer, 用來處理點擊收起Drawer問題
        if (mRightBelowView == null || mRightAboveView == null) {
            mRightBelowView = null;
            mRightAboveView = null;
            for (int i = 0; i < childCount; i ++) {
                final View child = getChildAt(i);
                if (checkDrawerViewAbsoluteGravity(child, Gravity.RIGHT)) {
                    if (mRightBelowView == null) {
                        mRightBelowView = child;
                    } else {
                        mRightAboveView = child;
                    }
                }
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        /** 雙層Drawer時, 不能正常通過點擊收起第一層Drawer, 所以在這里自己處理 */
        final int action = ev.getAction();
        switch (action & MotionEventCompat.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN: {
                final float x = ev.getX();
                final float y = ev.getY();
                mInitialMotionX = x;
                mInitialMotionY = y;
                break;
            }

            case MotionEvent.ACTION_UP: {
                if (mRightAboveView != null && mRightBelowView != null) {
                    final float x = ev.getX();
                    final float y = ev.getY();
                    if (x < mRightBelowView.getLeft()) {
                        final float dx = x - mInitialMotionX;
                        final float dy = y - mInitialMotionY;
                        final int slop = mTouchSlop;
                        if (dx * dx + dy * dy < slop * slop) {
                            // 當第二層Drawer沒有打開而第一層Drawer打開時, 收起第一層Drawer
                            if (!isDrawerOpen(mRightAboveView) && isDrawerOpen(mRightBelowView)) {
                                closeDrawer(mRightBelowView);
                                return true;
                            }
                        }
                    }
                }
                break;
            }
        }
        // 其他情況使用默認代碼
        return super.onTouchEvent(ev);
    }

    int getDrawerViewAbsoluteGravity(View drawerView) {
        final int gravity = ((LayoutParams) drawerView.getLayoutParams()).gravity;
        return GravityCompat.getAbsoluteGravity(gravity, ViewCompat.getLayoutDirection(this));
    }

    boolean checkDrawerViewAbsoluteGravity(View drawerView, int checkFor) {
        final int absGravity = getDrawerViewAbsoluteGravity(drawerView);
        return (absGravity & checkFor) == checkFor;
    }
}

 

 

常用軟件開發學習資料收藏： 

 

1.經典編程電子書 

 

2.C&C++編程學習資料  

 

3.算法及數據結構（有關c,c++,java）  

 

4.Java開發學習資料    

 

5.Android開發學習資料 

 

6.Python開發學習資料 

 

7.大數據，機器學習，人工智能資料