BottomSheet使用详解

Android Support Library 23.2里的 Design Support Library新加了一个Bottom Sheets控件,Bottom Sheets顾名思义就是底部操作控件，用于在屏幕底部创建一个可滑动关闭的视图，可以替代对话框和菜单。其中包含BottomSheets、BottomSheetDialog和BottomSheetDialogFragment三种可以使用。

BottomSheets常见的效果如图,并且在国内的知乎、百度地图上也是可以看到效果。

这里写图片描述这里写图片描述

首先我们学习使用BottomSheets，BottomSheets其实也是依赖于Behavior机制的使用。
先引用依赖,最新的design包已经到24了

1
compile 'com.android.support:design:24.2.1'

BottomSheets

在布局文件xml中的使用,BottomSheets需要配合CoordinatorLayout控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/cl"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        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">
            <!-- 你自己的代码-->
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

其中包含三个属性

1
2
3
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="@string/bottom_sheet_behavior"

app:behavior_peekHeight=”50dp” peekHeight是当Bottom Sheets关闭的时候，底部我们能看到的高度,默认是0不可见。

app:behavior_hideable=”true” hideable是当我们拖拽下拉的时候，bottom sheet是否能全部隐藏。

layout_behavior指向bottom_sheet_behavior,代表这是一个bottom Sheets

在java代码中的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
BottomSheetBehavior behavior;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_sheet);
        View bottomSheet = findViewById(R.id.bottom_sheet);
        behavior = BottomSheetBehavior.from(bottomSheet);
        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_hideable对应代码 behavior.setHideable(false);
behavior_peekHeight对应代码 behavior.setPeekHeight(50);

setBottomSheetCallback可以监听回调的状态,onStateChanged监听状态的改变,onSlide是拖拽的回调,onStateChanged可以监听到的回调一共有5种:

  • STATE_HIDDEN: 隐藏状态。默认是false，可通过app:behavior_hideable属性设置。
  • STATE_COLLAPSED: 折叠关闭状态。可通过app:behavior_peekHeight来设置显示的高度,peekHeight默认是0。
  • STATE_DRAGGING: 被拖拽状态
  • STATE_SETTLING: 拖拽松开之后到达终点位置（collapsed or expanded）前的状态。
  • STATE_EXPANDED: 完全展开的状态。
    BottomSheets控件配合NestedScrollView、RecyclerView使用效果会更好,合理的使用让APP逼格满满。

我们需要在按钮按钮上添加对BottomSheets的显示和隐藏

1
2
3
4
5
if(behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
    behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}else {
    behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}

效果如图:
效果图

design24.2.1的BottomSheets和23.2.0的BottomSheet有很大的区别,design23.2.0的包中如果你使用了BottomSheet,可以在屏幕外任何位置上拉即可拉出来布局,在24.2.1中没有了这个效果。

BottomSheetDialog

BottomSheetDialog应该是最实用的控件,也是使用率非常高的控件。它可以替代大多数网格显示和列表展示的dialog和popupwindow，默认宽度撑满，并且在BottomSheetDialog 区域中向下滑动也让对话框消失。

首先写一个dialog展示的xml，dialog中xml可以不用被CoordinatorLayout包裹，但是还是推荐实用推荐的滑动控件NestedScrollView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:onClick="doclick"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="啦啦啦啦啦啦啦啦啦"
            android:textColor="@color/white"
            android:textSize="18sp"/>
        <ImageView
            android:onClick="doclick"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/banner"/>
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

编写java代码

1
2
3
4
BottomSheetDialog dialog = new BottomSheetDialog(this);
View view = getLayoutInflater().inflate(R.layout.dialog_bottom_sheet, null);
dialog.setContentView(view);
dialog.show();

只需要四行我们就可以展示BottomSheets效果的dialog,高度为你设置的behavior_peekHeight或者默认高度，宽度撑满。在很多情况底部显示dialog的时候，都可以考虑实用BottomSheetDialog来实现。
效果如图:
这里写图片描述

BottomSheetDialogFragment

BottomSheetDialogFragment可以帮助我们实现全屏的BottomSheet展示效果。新建一个类继承BottomSheetDialogFragment

xml使用BottomSheetDialog的布局样式,我们直接看java代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public class FullSheetDialogFragment extends BottomSheetDialogFragment {
    private BottomSheetBehavior mBehavior;
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState)
    {
        BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
        View view = View.inflate(getContext(), R.layout.dialog_bottom_sheet, null);
        dialog.setContentView(view);
        mBehavior = BottomSheetBehavior.from((View) view.getParent());
        return dialog;
    }
    @Override
    public void onStart()
    {
        super.onStart();
        //默认全屏展开
        mBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
    }
    public void doclick(View v)
    {
        //点击任意布局关闭
        mBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
    }
}

调用BottomSheetDialogFragment展示

1
new FullSheetDialogFragment().show(getSupportFragmentManager(), "dialog");

BottomSheetDialogFragment的效果跟BottomSheetDialog差不多,根据情况选择。
效果如图:
这里写图片描述

BottomSheetDialog就介绍到此，如果有错误请指出，谢谢。

参考：
泡在网上的日子BottomSheets的使用

个人网站 歌吟有梦 itdais.com

更多内容可以关注我的公众号：丁军伟Dev（或者搜索DingAndroid）
丁军伟Dev

本文地址： http://itdais.com/2016/10/12/BottomSheet使用详解/