DrawerLayout是實現(xiàn)側(cè)邊抽屜(Drawer)最方便的方法, 但是它僅僅支持單層Drawer, 這應該是因為在Material Design里面僅提及使用單層Drawer. 不過實際中有些場景需要我們實現(xiàn)雙層Drawer, 例如京東下面的這個功能.
關(guān)鍵的交互就是, 打開第一層Drawer后, 點擊其中的按鈕會打開第二層Drawer.
題外話: 雖然這里使用了京東的做示例, 但是京東這里應該不是用雙層DrawerLayout實現(xiàn), 因為第二層Drawer關(guān)閉后不會返回第一層Drawer, 不過也有可能是需求就是這樣.
原生實現(xiàn)的問題
如果要用DrawerLayout實現(xiàn), 當然想到的會是直接添加兩個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解決辦法
源碼分析的過程就不說太多了, 只說關(guān)鍵的地方.
因為存在兩個同側(cè)的Drawer, 所以在遍歷子控件發(fā)現(xiàn)第二個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是不錯報錯退出了, 但是因為拋出異常, 所以會導致一些方法沒執(zhí)行, 看DrawerLayout#onMeasure中異常拋出之后的代碼可以知道, 如果沒有拋出異常, 正常獲取到一個Drawer之后, 會調(diào)用child.measure(drawerWidthSpec, drawerHeightSpec)來限定Drawer的寬高, 所以我們捕獲異常之后需要手動做這部分的工作. 因為只會在遍歷到第二個Drawer的時候才會拋出異常, 所以
在捕獲異常時, 手動調(diào)用第二層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了.
問題
仔細測試之后會發(fā)現(xiàn)有一個小BUG, 第一層Drawer不能通過點擊左側(cè)的陰影來收起Drawer.
具體的debug過程就不說了, 當點擊左側(cè)陰影的時候確實會執(zhí)行收起Drawer的相關(guān)代碼, 但是相關(guān)的動畫卻不會起作用, 具體的原因超出本文范圍就不探究了.
為了解決這個問題自然想到我們自己處理點擊事件.
點擊事件一般在onTouchEvent中處理ACTION_UP事件, 所以查看DrawerLayout#onTouchEvent源碼, 可以知道當接收到ACTION_UP事件時會查找點擊區(qū)域的控件, 如果該控件不是Drawer, 就會調(diào)用closeDrawers()來關(guān)閉Drawer.
所以我們針對上面出現(xiàn)的問題, 專門處理第一層Drawer的關(guān)閉問題. 思路是
接收到
ACTION_UP事件后判斷是不是第一層Drawer打開, 第二層Drawer關(guān)閉, 如果是就關(guān)閉第一層Drawer, 其他情況則交給原來的方法處理.
基本的代碼如下:
@Override
public boolean onTouchEvent(MotionEvent ev) {
/** 雙層Drawer時, 不能正常通過點擊收起第一層Drawer, 所以在這里自己處理 */
final int action = ev.getAction();
switch (action & MotionEventCompat.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
// 記錄坐標參數(shù)
break;
case MotionEvent.ACTION_UP: {
// mRightBelowView為第一層Drawer
// mRightAboveView為第二層Drawer
final float x = ev.getX();
final float y = ev.getY();
if (x < mRightBelowView.getLeft()) {
// 判斷點擊的是陰影區(qū)域
final float dx = x - mInitialMotionX;
final float dy = y - mInitialMotionY;
final int slop = mTouchSlop;
if (dx * dx + dy * dy < slop * slop) {// 判斷不是滑動
// 當?shù)诙覦rawer沒有打開而第一層Drawer打開時, 收起第一層Drawer
if (!isDrawerOpen(mRightAboveView) && isDrawerOpen(mRightBelowView)) {
closeDrawer(mRightBelowView);
// 直接返回不執(zhí)行默認代碼
return true;
}
}
}
break;
}
}
// 其他情況使用默認代碼
return super.onTouchEvent(ev);
}
這樣就解決點擊關(guān)閉第一層Drawer的問題.
這里有一個小細節(jié), 因為有雙層Drawer, 所以不應該使用openDrawer(@EdgeGravity int gravity)等方法來操作Drawer, 而應該直接指定Drawer控件, 使用openDrawer(View drawerView)等方法.
實際效果如下:
完整的自定義View代碼戳這里
