Android material design 之 BottomSheet基础入门

---

前言

学习过一部分Android知识后，在接触了material design之后就感觉 开始自己想，自己也可以做出这么好看的样式嘛？
所以就开始自己琢磨，想到既然可以侧面抽屉，类似于常见的地图的app
可以学一下底部的，进而开始学习BottomSheet

---

一、BottomSheet是什么？

BottomSheet 我的理解 他是一个底部的一个抽屉 🙃也许不大形象 或者说他是一个底部的对话框 这样比较确切

BottomSheet 🙃依赖于 CoordinatorLayout 和 BottomSheetBehavior
需要将底部菜单布局（BottomSheet）作为CoordinatorLayout的子View(而且是必须作为CoordinatorLayout的子组件)
也就是让CoordinatorLayout 作为一个ViewGroup来装载， 然后还要有一个拉伸的一个效果 所需还需要Behavior
虽然实现简单但BottomSheet不够灵活，适用于底部菜单布局稳定的情况。

二、BottomSheet使用步骤

1.添加依赖

代码如下（示例）：
BottomSheet 要求的依赖 design是要在23.0.0以上的
这里我就使用26.0.0的这个依赖，使用其他在23.0.0以上的版本也是可以的

dependencies {
	implementation 'com.android.support:design:26.0.0-alpha1'
}

2.编写布局

代码如下（示例）：
既然Android的布局嘛 那就要发挥我们的想象力了 不过就是要保证是作为CoordinatorLayout的子组件！！🙃🙃

<?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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">
            <Button
                android:id="@+id/button_1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="RecyclerView + CardView"
                android:textSize="16sp"
                android:textAllCaps="false"
                android:padding="15dp"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="@drawable/button" />
        </LinearLayout>
    </ScrollView>
    <LinearLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="450dp"
        android:layout_alignParentBottom="true"
        android:background="#CCFFFF"
        android:orientation="vertical"
        app:layout_behavior="@string/bottom_sheet_behavior">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/sheet_recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp" />
    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

这里呢 我写了一个按钮 然后按钮呢 我是在drawable中写了背景色和圆角的 有知道怎么设置的 可以按照自己风格写 不然也是可以去掉的😎
以后也可以再讲一讲关于圆角等的设置

然后我在底部菜单写了一个RecyclerView 就也是尝试一下能不能实现
实现了 以后写TextView ImageView 也更有底一点 好歹他是成功了😆

关键来了！
app:layout_behavior="@string/bottom_sheet_behavior"

这一句话 很重要 很重要 很重要 （重要的话多强调几遍）
没有它就没办法实现效果

3.编写活动

然后 让我们来到活动

//简单的定义 这个不用说的
private BottomSheetBehavior mBottomSheetBehavior;
//然后是绑定实例
View bottomSheet = findViewById(R.id.bottom_sheet);
mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);

嘿嘿 然后这样我们就可以开始设置BottomSheet了😘
😜😜😜

然后接着找到实例的语句 我们开始设置BottomSheet

mBottomSheetBehavior.setState(STATE_COLLAPSED);
mBottomSheetBehavior.setPeekHeight(150);

这里呢 我设置它一开始为折叠状态 然后设置了一个高度为150 让他有一个小的效果 可以看到它

然后还记得我们在布局中写的按钮嘛 我们给他设置一个点击事件

 @Override
 public void onClick(View v) {
    switch (v.getId()) {
        case R.id.button_1:
            if (mBottomSheetBehavior.getState() == STATE_COLLAPSED){
                mBottomSheetBehavior.setState(STATE_EXPANDED);
         } else if(mBottomSheetBehavior.getState() == STATE_EXPANDED) {
                    mBottomSheetBehavior.setState(STATE_COLLAPSED);
            }
         break;
        }
    }

通过获取这个底部菜单的状态，当它是折叠的状态时候 我们就让他展开
如果是展开的状态 那么我们就让他折叠

只要注意一下 STATE_COLLAPSED 和 STATE_EXPANDED 分别是什么
还有高度就可以掌握基本的BottomSheet 了
然后再加上自己的设计 就可以变得很好看啦❤

4. 样例

最后来放一下样例 那个动物的RecyclerView就是我用来装饰的 大家可以随意发挥👍

这是初始的样子 然后我们点击一下上面的按钮 触发点击事件 就有效果了

按钮就可以用来一直控制BottomSheet
这样子 BottomSheet简单的使用就完成啦😄

---

总结

这就是关于Material Design中BottomSheet的内容 Material Design 还有很多种样式，BottomSheet只是其中之一 还有很多UI等着我们逐一去学习