Material Design组件之Bottom sheets

Google Material Design之Bottom Sheet文档

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

components_buttons_usage_main

如何添加？

1、在你的builde.gradle文件中，添加最新版的appcompat和design依赖库.

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展现出来

<?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的特性

<?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方法

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_EXPANDED： bottom sheet 处于完全展开的状态：当bottom sheet的高度低于CoordinatorLayout容器时，整个bottom sheet都可见；或者CoordinatorLayout容器已经被bottom sheet填满。

STATE_HIDDEN ：默认无此状态（可通过app:behavior_hideable 启用此状态），启用后用户将能通过向下滑动完全隐藏 bottom sheet

modal-bottom-sheets

BottomSheetDialog

创建一个BottomSheetDialog,例如：

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的内容而被使用

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;
    }
}