BottomSheet 实现高德/百度地图三段式抽屉效果

最近开发的项目有需求，就是要实现抽屉式隐藏菜单。然后就有了这文章的。哎！0到1就是一个曲折的过程啊！然后就是去漫无目的的搜索相关的效果的过程了。此处省略一万个字......

1.如果需求比较简单，只是单纯的小菜单

https://github.com/qhutch/BottomSheetLayout

上面的第三方就可以实现效果了。实现的代码，有需要的可以进链接去看看。但是如果你的内容很多，且内容满屏的时候。就不推荐了啦！我之前用了一段时间。可是后面需求改了。页面内容满屏的时候，尴尬了，居然划不动。哎！

2.BottomSheet 今天的主角登场

api 'androidx.constraintlayout:constraintlayout:2.1.4'

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        app:behavior_hideable="false"
        app:behavior_fitToContents="false"
        app:behavior_peekHeight="50dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tvShow"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/bg_cir_10"
                android:gravity="center"
                android:onClick="showBottomSheet"
                android:text="我是老大头头"
                tools:ignore="UsingOnClickInXml" />

            <TextView
                android:id="@+id/tvCheckAES"
                android:onClick="checkAES"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_55"
                android:background="@color/Gee"
                android:text="我要校验AES了"/>

            <TextView
                android:id="@+id/tvResultAES"
                android:onClick="ResultAES"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_55"
                android:background="@color/Gee"
                android:text="解密AES了"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="@color/G66"
                android:text="我是闪屏页"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="@color/Gee"
                android:text="我是闪屏页"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="@color/G66"
                android:text="我是闪屏页"/>

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

behavior = BottomSheetBehavior.from(viewBinding.nestedScrollView);
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                //这里是bottomSheet 状态的改变
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                //这里是拖拽中的回调，根据slideOffset可以做一些动画
            }
        });
        behavior.setState(BottomSheetBehavior.STATE_HALF_EXPANDED);// 内容如果足够多，可以用三段

    public void showBottomSheet(View view) {
        if(behavior.getState() == BottomSheetBehavior.STATE_COLLAPSED){
            behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }else {
            behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        }

    }

以上是代码实现，可以实现满屏也可以适应内容没满屏的状态，可以实现三段状态效果如下视频。正常介绍都是说最好父类用CoordinatorLayout。但是也不是必须的。我就不要他的建议。看个人需求吧。但是不接受建议就是会有bug。尴尬。就是父类不是CoordinatorLayout，往下滑动。会把BottomSheet的头部给划没掉。这就很尴尬了。所以我在监听互动的时候。加了个判断完成隐藏的时候状态变更一下。完美了。

behavior = BottomSheetBehavior.from(binding.llOrderBottom);
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @SuppressLint("SwitchIntDef")
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                //这里是bottomSheet 状态的改变
                switch (newState) {
                    case BottomSheetBehavior.STATE_EXPANDED://完全展开状态
                        binding.viewExpanded.setVisibility(View.VISIBLE);
                        binding.viewCollapsed.setVisibility(View.GONE);
                        break;
                    case BottomSheetBehavior.STATE_DRAGGING://拖动状态
                    case BottomSheetBehavior.STATE_COLLAPSED://折叠状态
                        binding.viewExpanded.setVisibility(View.GONE);
                        binding.viewCollapsed.setVisibility(View.VISIBLE);
                        break;
                    case BottomSheetBehavior.STATE_HIDDEN://完全隐藏状态
                        binding.viewExpanded.setVisibility(View.GONE);
                        binding.viewCollapsed.setVisibility(View.VISIBLE);
                        behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                        break;
                }

            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                //这里是拖拽中的回调，根据slideOffset可以做一些动画
            }
        });
        behavior.setState(BottomSheetBehavior.STATE_EXPANDED);

废话不多说，直接上效果

BottomSheet 的实现

下面是查找的资料，有兴趣的可以借鉴。

BottomSheet的使用-CSDN博客

可用！三行代码高仿高德地图三段式抽屉效果_android 三段式抽屉-CSDN博客

https://github.com/qhutch/BottomSheetLayout