Material Design组件之Bottom sheets

Google Material Design之Bottom Sheet文档

本节介绍Material Design中的组件之一Bottom Sheet

components_buttons_usage_main

如何添加?

1、在你的builde.gradle文件中,添加最新版的appcompatdesign依赖库.

1
2
3
4
dependencies {
compile 'com.android.support:appcompat-v7:X.X.X' //这里的X.X.X代表版本
compile 'com.android.support.design:X.X.X'//这里的X.X.X代表版本
}

2、设置app:layout_behavior属性的值@string/bottom_sheet_behavior,将允许你的View或者ViewGroup作为一个bottom Sheet展现出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical"
android:padding="16dp"
app:layout_behavior="@string/bottom_sheet_behavior">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dandelion Chocolate"
android:textAppearance="@style/TextAppearance.AppCompat.Display1"
android:textColor="@android:color/black"/>
</LinearLayout>

提示:你能够使用behavior_peekHeight属性设置bottom sheet的默认高度
3、添加你的视图作为直接为CoordinatorLayout的一个孩子,实现bottom sheet的特性

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
30
31
32
33
34
35
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<android.support.design.widget.AppBarLayout
android:id="@+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

<android.support.v7.widget.Toolbar
android:id="@+id/appbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

</android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

<!-- Your content -->
<include layout="@layout/content_main" />

<!-- Bottom Sheet -->
<include layout="@layout/bottom_sheets_main" />
</android.support.design.widget.CoordinatorLayout>

提示:你能够在<include>节点下包裹你的View或者ViewGroups,为了保持整理你的布局。请记住,bottom sheet中的滑动容器(scrolling container)必须支持嵌套滑动(比如 NestedScrollView, RecyclerView, 或者API 21以下的ListView/ScrollView)。

4、根据一个视图有着底部特性设置的引用来获得一个BottomSheetBehavior的引用,使用BottomSheetBehavior里的from方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
LinearLayout bottomSheetViewgroup
= (LinearLayout) findViewById(R.id.bottom_sheet);

BottomSheetBehavior bottomSheetBehavior =
BottomSheetBehavior.from(bottomSheetViewgroup);

//如果你想接收状态改变的回调,可以加一个BottomSheetCallback
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
// React to state change
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
// React to dragging events
}
});

5、对于展开你的bottom sheet使用setState方法并传递参数BottomSheetBehavior.STATE_EXPANDED

1
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

提示:你能够处理来源于setState方法的这些状态:

  • STATE_COLLAPSED: 默认的折叠状态, bottom sheets只在底部显示一部分布局。显示高度可以通过 app:behavior_peekHeight 设置(默认是0)
  • STATE_DRAGGING : 过渡状态,此时用户正在向上或者向下拖动bottom sheet
  • STATE_SETTLING: 视图从脱离手指自由滑动到最终停下的这一小段时间
  • STATE_EXPANDEDbottom sheet 处于完全展开的状态:当bottom sheet的高度低于CoordinatorLayout容器时,整个bottom sheet都可见;或者CoordinatorLayout容器已经被bottom sheet填满。
  • STATE_HIDDEN : 默认无此状态(可通过app:behavior_hideable 启用此状态),启用后用户将能通过向下滑动完全隐藏 bottom sheet

modal-bottom-sheets

BottomSheetDialog

创建一个BottomSheetDialog,例如:

1
2
3
4
5
6
7
8
9
BottomSheetDialog dialog = new BottomSheetDialog(context);

View view = LayoutInflater.from(context).inflate(R.layout.bottom_sheet_list, null);

RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.bottom_sheet_recycler_view);
recyclerView.setLayoutManager(new LinearLayoutManager(context));
recyclerView.setAdapter(new SimpleAdapter());
dialog.setContentView(view);
dialog.show();

BottomSheetDialogFragment

1、创建一个类继承BottomSheetDialogFragmentinflated一个布局,将会作为你的Modal bottom Sheet的内容而被使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class ModalBottomSheet
extends BottomSheetDialogFragment {

static BottomSheetDialogFragment newInstance() {
return new BottomSheetDialogFragment();
}

@Override
public View onCreateView(
LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View v = inflater.inflate(
R.layout.bottom_sheet_modal, container, false);

return v;
}
}

2、创建一个你的modal bottom sheet实例并且使用它的show方法去显示,需要传递的参数是一个SupportFragmentManager和一个String.

1
2
ModalBottomSheet modalBottomSheet = new ModalBottomSheet();
modalBottomSheet.show(getSupportFragmentManager(), "bottom sheet");

if (本文对您有用) { Pay (请随意¥打赏) } else { Commit feedback (底部评论区提交建议、反馈) } 感谢支持!