做开发时经常碰到底部菜单的需求。通常情况下，不需要支持手势滑动，只需要有滑动进入和滑动退出的效果即可。但有些时候，需要支持下滑关闭，这里我们来踩踩下滑关闭的那些坑。

谈到手势下滑关闭，我们立即想到了BottomSheetBehavior、BottomSheetDialog、BottomSheetDialogFragment这三个类。它们本质上都是由BottomSheetBehavior实现，而BottomSheetDialog与BottomSheetDialogFragment是Dialog与DialogFragment的关系，所以我们仅以BottomSheetBehavior和BottomSheetDialogFragment两个类来分别考虑如何实现。

下面开始探索之旅。以如下场景为例：

点击页面按钮弹出底部菜单，首先展示商品种类的页面，点击某一种类后切换到某一类商品页面，点击back键或者返回按钮返回到商品种类页面。
两个页面各包含一个列表，底部菜单支持嵌套滑动，下拉关闭。

主页面布局如下：

<?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"
    android:background="#aaa"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/bt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="openGoodsBehaviorFragment"
        android:text="openGoodsBehaviorFragment"
        android:textAllCaps="false" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bt1"
        android:onClick="openGoodsDialogFragment"
        android:text="openGoodsDialogFragment"
        android:textAllCaps="false" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

坑1 按钮在底部菜单之上

非常简单的布局就碰到了一个坑，我们给FrameLayout设置一个蓝色背景android:background="#09c看下效果图：

图1 第一个坑

发生了什么情况？FrameLayout不应该在最上层吗，为什么两个按钮没有被覆盖？

没有被覆盖的话，推测应该是按钮被设置了translationZ或者elevation这两个属性，然后顺着当前应用的styleTheme.AppCompat.Light.DarkActionBar一步步找到了如下代码：

<style name="Base.V21.Theme.AppCompat.Light" parent="Base.V7.Theme.AppCompat.Light">
    ...
    <item name="buttonStyle">?android:attr/buttonStyle</item>
    ...
</style>

在themes_material.xml中：

<item name="buttonStyle">@style/Widget.Material.Button</item>

继续找，在styles_material.xml中：

    <style name="Widget.Material.Button">
        <item name="background">@drawable/btn_default_material</item>
        <item name="textAppearance">?attr/textAppearanceButton</item>
        <item name="minHeight">48dip</item>
        <item name="minWidth">88dip</item>
        <item name="stateListAnimator">@anim/button_state_list_anim_material</item>
        <item name="focusable">true</item>
        <item name="clickable">true</item>
        <item name="gravity">center_vertical|center_horizontal</item>
    </style>

然后在button_state_list_anim_material.xml中找到了目标：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_enabled="true">
        <set>
            <!-- 4dp -->
            <objectAnimator android:propertyName="translationZ"
                            android:duration="@integer/button_pressed_animation_duration"
                            android:valueTo="@dimen/button_pressed_z_material"
                            android:valueType="floatType"/>
            <!-- 2dp -->
            <objectAnimator android:propertyName="elevation"
                            android:duration="0"
                            android:valueTo="@dimen/button_elevation_material"
                            android:valueType="floatType"/>
        </set>
    </item>
    <!-- base state -->
    <item android:state_enabled="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                            android:duration="@integer/button_pressed_animation_duration"
                            android:valueTo="0"
                            android:startDelay="@integer/button_pressed_animation_delay"
                            android:valueType="floatType"/>
            <!-- 2dp -->
            <objectAnimator android:propertyName="elevation"
                            android:duration="0"
                            android:valueTo="@dimen/button_elevation_material"
                            android:valueType="floatType" />
        </set>
    </item>
    <item>
        <set>
            <objectAnimator android:propertyName="translationZ"
                            android:duration="0"
                            android:valueTo="0"
                            android:valueType="floatType"/>
            <objectAnimator android:propertyName="elevation"
                            android:duration="0"
                            android:valueTo="0"
                            android:valueType="floatType"/>
        </set>
    </item>
</selector>

elevation是绝对值，是View本身的属性，与left、top共同决定了View在三维空间的绝对位置。
translationZ是相对于elevation的偏移量。同理，translationX是相对于left的偏移量，translationY是相对于top的偏移量。
View的最终位置=绝对位置+偏移量

至此，要解决上述问题，只需要保证FrameLayout的最终Z轴位置不小于按钮最终Z轴位置即可。由button_state_list_anim_material.xml可知，按钮按下状态，有最大Z轴位置6dp，所以可以为FrameLayout添加如下属性：

    <!-- 只需要保证elevation+translationZ>=6dp即可 -->
    android:elevation="6dp"

使用BottomSheetBehavior实现下滑关闭的GoodsBehaviorFragment

接下来研究如何通过BottomSheetBehavior实现下滑关闭。首先看一下BottomSheetBehavior的几种状态：

• STATE_DRAGGING：拖动状态
• STATE_SETTLING：松开手指后，自由滑动状态
• STATE_EXPANDED：完全展开状态
• STATE_COLLAPSED：折叠状态，或者称为半展开状态
• STATE_HIDDEN：隐藏状态

本例中，GoodsBehaviorFragment是用来展示商品信息的底部菜单，设置了BottomSheetBehavior，实现下滑关闭功能。该fragment包含了两个子fragment：GoodsTypeFragment和GoodsFragment，分别是商品种类fragment和某一种类的商品fragment。点击GoodsTypeFragment的一项，进入该种类的列表。两个子fragment各包含一个RecyclerView列表，所以还需要保证能够嵌套滑动（下滑关闭功能和列表的嵌套滑动）。

坑2 菜单首次弹出显示不全

BottomSheetBehavior默认是STATE_COLLAPSED，初次接触，总会被这个状态蹂躏一番。首先来看看这到底是个什么样的状态：

图2 STATE_COLLAPSED 图3 STATE_EXPANDED

显然，STATE_COLLAPSED不是我们想要的状态，在实现类GoodsBehaviorFragment做如下处理：

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        ...
        behavior = BottomSheetBehavior.from((ViewGroup) view.findViewById(R.id.root));
        view.post(new Runnable() {
            @Override
            public void run() {
                behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });
        ...
    }

这样在每次弹出时，便进入了STATE_EXPANDED状态。

坑3 隐藏菜单时崩溃

然而，当调用behavior.setState(BottomSheetBehavior.STATE_HIDDEN);来隐藏菜单时，发生了如下崩溃：

图4 隐藏菜单时的崩溃信息

崩溃处代码如下：

    void startSettlingAnimation(View child, int state) {
        int top;
        if (state == STATE_COLLAPSED) {
            top = mMaxOffset;
        } else if (state == STATE_EXPANDED) {
            top = mMinOffset;
        } else if (mHideable && state == STATE_HIDDEN) {
           //这是想要进入的隐藏状态
            top = mParentHeight;
        } else {
            throw new IllegalArgumentException("Illegal state argument: " + state);
        }
        if (mViewDragHelper.smoothSlideViewTo(child, child.getLeft(), top)) {
            setStateInternal(STATE_SETTLING);
            ViewCompat.postOnAnimation(child, new SettleRunnable(child, state));
        } else {
            setStateInternal(state);
        }
    }

可见，想要进入state == STATE_HIDDEN这个分支，还需要mHideable==true才可以，所以设置如下方法：

behavior.setHideable(true);

坑4 下滑仍会进入STATE_COLLAPSED状态

如上设置完毕，在菜单区域下滑，发现首先会进入STATE_COLLAPSED状态，如下：

图5 下滑进入STATE_COLLAPSED状态

再次下滑，才会隐藏。BottomSheetBehavior有如下方法判断是否该隐藏：

    boolean shouldHide(View child, float yvel) {
        if (mSkipCollapsed) {
            return true;
        }
        if (child.getTop() < mMaxOffset) {//这里进入到了折叠状态
            // It should not hide, but collapse.
            return false;
        }
        final float newTop = child.getTop() + yvel * HIDE_FRICTION;
        return Math.abs(newTop - mMaxOffset) / (float) mPeekHeight > HIDE_THRESHOLD;
    }

针对这种情况，只需要保证mSkipCollapsed==true，需要设置如下方法：

behavior.setSkipCollapsed(true);

表示在隐藏时，跳过折叠状态，直接进入隐藏状态。

坑5 菜单弹出时，不是从底部弹出的

现象如下：

图6 菜单不是从底部弹出

上面提到过，BottomSheetBehavior的初始状态是折叠态，折叠态时，菜单的高度可以通过setPeekHeight方法设置。
虽然我们不需要折叠状态，但因为折叠状态是默认态，所以即便我们一开始就设置了展开状态，实际上底部菜单是从折叠状态的高度（而非隐藏状态的0）过渡到展开状态的高度。
所以为了达到我们想要的效果（菜单高度从0过渡到展开状态的高度），需要设置如下代码：

behavior.setPeekHeight(0);

设置完毕，再来看一下整体效果：

图7 弹出、隐藏效果展示

效果看起来不错，也可以下滑关闭。但到此就完事了吗？看一下嵌套滑动时的下滑关闭功能

坑6 展示某类商品时，嵌套滑动失效

展示商品种类列表时：

图8 展示商品种类列表时可以嵌套滑动

可以嵌套滑动，没问题。再看展示某类商品列表时：

图9 展示某类商品列表时不可以嵌套滑动

此时不可以嵌套滑动了。

继续翻看BottomSheetBehavior源码，在onLayoutChild方法中有这么一句：

    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, V child, int layoutDirection) {
        ...
        mViewRef = new WeakReference<>(child);
        mNestedScrollingChildRef = new WeakReference<>(findScrollingChild(child));
        return true;
    }

mNestedScrollingChildRef用于保存嵌套滑动的子View（本例中是RecyclerView），由findScrollingChild方法提供：

    View findScrollingChild(View view) {
        if (ViewCompat.isNestedScrollingEnabled(view)) {
            return view;
        }
        if (view instanceof ViewGroup) {
            ViewGroup group = (ViewGroup) view;
            for (int i = 0, count = group.getChildCount(); i < count; i++) {
                View scrollingChild = findScrollingChild(group.getChildAt(i));
                if (scrollingChild != null) {
                    return scrollingChild;
                }
            }
        }
        return null;
    }

该方法递归查找，将找到的第一个RecyclerView返回。
那么问题来了，在展示某类商品的列表GoodsFragment时，商品种类列表GoodsTypeFragment并没有被remove掉，也就是说同时存在两个RecyclerView，而从findScrollingChild的查找顺序看，总是会返回GoodsTypeFragment的列表，这才导致展示GoodsFragment时，不能嵌套滑动。

找到了原因，这个问题就不难解决了。一种方式是每次只添加一个fragment，自然不会存在多个RecyclerView的情况。但很多时候我们是需要两个fragment共存的。这时可以通过反射来修改mNestedScrollingChildRef的值。

本例采用反射修改值的方法解决这个问题：

    private final ViewTreeObserver.OnGlobalLayoutListener onGlobalLayoutListener = new MyOnGlobalLayoutListener();

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        
        //注册globalLayoutListener，在layout完毕时，手动反射修改值
        view.getViewTreeObserver().addOnGlobalLayoutListener(onGlobalLayoutListener);
        ...
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        View view = getView();
        if (view != null) {
            view.getViewTreeObserver().removeGlobalOnLayoutListener(onGlobalLayoutListener);
        }
    }

    private class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener {
        @Override
        public void onGlobalLayout() {
            updateBehavior();
        }

        /**
         * BottomSheetBehavior#mNestedScrollingChildRef字段保存了嵌套滑动的子滑动View。
         * 所以这里根据当前展示的fragment手动设置一下BottomSheetBehavior#mNestedScrollingChildRef
         */
        private void updateBehavior() {
            View list = null;
            if (goodsFragment != null && goodsFragment.isVisible()) {
                View view = goodsFragment.getView();
                list = findScrollingChild(view);

            } else if (goodsTypeFragment != null && goodsTypeFragment.isVisible()) {
                View view = goodsTypeFragment.getView();
                list = findScrollingChild(view);
            }

            if (list != null) {
                try {
                    Field field = BottomSheetBehavior.class.getDeclaredField("mNestedScrollingChildRef");
                    if (field != null) {
                        field.setAccessible(true);
                        field.set(behavior, new WeakReference<>(list));
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }

        private View findScrollingChild(View view) {
            if (view instanceof NestedScrollingChild) {
                return view;
            }
            if (view instanceof ViewGroup) {
                ViewGroup group = (ViewGroup) view;
                for (int i = 0, count = group.getChildCount(); i < count; i++) {
                    View scrollingChild = findScrollingChild(group.getChildAt(i));
                    if (scrollingChild != null) {
                        return scrollingChild;
                    }
                }
            }
            return null;
        }
    }

至此，GoodsBehaviorFragment的实现已经完成。

使用BottomSheetDialogFragment实现下滑关闭的GoodsDialogFragment

这种方式相对来说比较简单，直接继承自BottomSheetDialogFragment就可以。需要说明的是：BottomSheetDialogFragment如果要添加其他的Fragment，需要使用getChildFragmentManager()来添加，而不可以使用getActivity().getSupportFragmentManager()！

然而，看似快捷的实现，也暗藏大坑！

坑7 item宽度问题

直接看图：

图10 item宽度问题

可以看到，第一次展示item时，宽度变成了wrap_content，滑动列表，item复用时才展开到了parent的宽度。

填充RecyclerView的Adapter是与GoodsBehaviorFragment共用的。inflate item的代码如下：

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = inflater.inflate(R.layout.list_item_goods_base, viewGroup, false);
        return new ViewHolder(view);
    }

也并没有什么问题，但最终却出了问题。

这个问题我还有找到根本原因，目前只是找到了一个解决方法，直接贴上：

adapter中，手动设置item宽度：

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = inflater.inflate(R.layout.list_item_goods_base, viewGroup, false);
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.width = viewGroup.getWidth() - viewGroup.getPaddingLeft() - viewGroup.getPaddingRight()
                - params.leftMargin - params.rightMargin;
        if (params.width < 0) {
            params.width = ViewGroup.LayoutParams.MATCH_PARENT;
        }
        view.setLayoutParams(params);
        return new ViewHolder(view);
    }

然后，在RecyclerView设置adapter时，做个延迟：

        vList.post(new Runnable() {
            @Override
            public void run() {
                vList.setAdapter(adapter);
            }
        });

两处修改双管齐下，可以解决这个问题。若有其他解决方法，还请不吝赐教。

坑8 背景问题

为了方便辨认，我们将自定义的带圆角的背景换一下颜色：

图11 背景问题

看两个红色箭头所示的地方，很明显，父布局有一个白色的背景。

BottomSheetDialogFragment是由BottomSheetDialog实现的，在BottomSheetDialog的wrapInBottomSheet方法中：

private View wrapInBottomSheet(int layoutResId, View view, ViewGroup.LayoutParams params) {
        final FrameLayout container = (FrameLayout) View.inflate(getContext(),
                R.layout.design_bottom_sheet_dialog, null);
}

design_bottom_sheet_dialog.xml:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <View
            android:id="@+id/touch_outside"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:importantForAccessibility="no"
            android:soundEffectsEnabled="false"
            tools:ignore="UnusedAttribute"/>

        <!-- contentview的父布局 -->
        <FrameLayout
            android:id="@+id/design_bottom_sheet"
            style="?attr/bottomSheetStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|top"
            app:layout_behavior="@string/bottom_sheet_behavior"/>

    </android.support.design.widget.CoordinatorLayout>
</FrameLayout>

在style="?attr/bottomSheetStyle"中设置了背景色。

手动去掉背景色：

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //去掉父布局的背景
        View view = getView();
        if (view != null) {
            View parent = (View) view.getParent();
            if (parent != null) {
                parent.setBackgroundColor(Color.TRANSPARENT);
            }
        }
    }

之所以在onActivityCreated中设置，是因为Dialog.setContentView是在super.onActivityCreated中执行的。

至此，两种实现方式的坑差不多都填上了。完整实现代码，请转到
Demo地址

---

更正

BottomSheetDialogFragment可以添加其他的Fragment，需要使用getChildFragmentManager()来添加，而不可以使用getActivity().getSupportFragmentManager()！

对之前的错误表示深深的歉意！