BottomSheet使用详解
Android Support Library 23.2里的 Design Support Library新加了一个Bottom Sheets控件,Bottom Sheets顾名思义就是底部操作控件，用于在屏幕底部创建一个可滑动关闭的视图，可以替代对话框和菜单。其中包含BottomSheets、BottomSheetDialog和BottomSheetDialogFragment三种可以使用。
BottomSheets常见的效果如图,并且在国内的知乎、百度地图上也是可以看到效果。
这里写图片描述
这里写图片描述
首先我们学习使用BottomSheets，BottomSheets其实也是依赖于Behavior机制的使用。
先引用依赖,最新的design包已经到24了
compile 'com.android.support:design:24.2.1'
BottomSheets
在布局文件xml中的使用,BottomSheets需要配合CoordinatorLayout控件
<?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>
其中包含三个属性
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代码中的使用
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的显示和隐藏
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
<?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代码
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代码
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展示
new FullSheetDialogFragment().show(getSupportFragmentManager(), "dialog");
BottomSheetDialogFragment的效果跟BottomSheetDialog差不多,根据情况选择。
效果如图:
这里写图片描述
BottomSheetDialog就介绍到此，如果有错误请指出，谢谢。
Demo下载
https://github.com/itdais/MaterialDesignDing
个人网站 歌吟有梦 itdais.com
更多内容可以关注我的公众号：丁军伟Dev（或者搜索DingAndroid）
丁军伟Dev
网友评论
解决使用BottomSheetDialog时状态栏变黑的问题 (http://www.jianshu.com/p/8d43c222b551)