Android BottomSheets的使用

1.布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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">
    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#EFEFEF"
        android:orientation="vertical"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:behavior_peekHeight="5dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:minHeight="30dp"
            android:text="选取方式"
            android:textColor="?attr/colorAccent" />

        <Button
            android:id="@+id/photo"
            style="@style/Widget.AppCompat.Button.Borderless.Colored"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:minHeight="48dp"
            android:text="照片"
            android:textColor="@android:color/darker_gray" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/darker_gray" />

        <Button
            android:id="@+id/camera"
            style="@style/Widget.AppCompat.Button.Borderless.Colored"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:minHeight="48dp"
            android:text="相机"
            android:textColor="@android:color/darker_gray" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/darker_gray" />

        <Button
            android:id="@+id/tv_dialog_cancel"
            style="@style/Widget.AppCompat.Button.Borderless.Colored"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="取消"
            android:textColor="?attr/colorAccent" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:onClick="fab"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/layout"
        app:layout_anchorGravity="right|top"
        app:pressedTranslationZ="10dp" />
</android.support.design.widget.CoordinatorLayout>

2.代码

public class MainActivity extends AppCompatActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
	public void fab(View view) {
		BottomSheetBehavior behavior = BottomSheetBehavior.from(findViewById(R.id.layout));
		if (behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
			behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
		} else {
			behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
		}
	}
}

3.解释

根布局必须是CoordinatorLayout协调布局,给要在底部显示的布局的根布局加上behavior

<span style="color:#ff6666;">app:layout_behavior="@string/bottom_sheet_behavior"</span>

同时加上

app:behavior_peekHeight="5dp"这个<span style="color: rgb(51, 51, 51); font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; line-height: 21.76px;">peekHeight是当Bottom Sheets关闭的时候，底部下表我们能看到的高度</span><pre name="code" class="html"><p style="box-sizing: border-box; border: 0px; margin-top: 0px; margin-bottom: 15px; padding-top: 0px; padding-bottom: 0px; line-height: 1.7; color: rgb(51, 51, 51); font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px;">hideable 是当我们拖拽下拉的时候，bottom sheet是否能全部隐藏。 如果你需要监听Bottom Sheets回调的状态，可以通过setBottomSheetCallback来实现，onSlide方法是拖拽中的回调，根据slideOffset可以做一些动画 onStateChanged方法可以监听到状态的改变,总共有5种</p><ul class=" list-paddingleft-2" style="box-sizing: border-box; border: 0px; margin: 0px 0px 16px 25px; padding: 0px 0px 0px 2em; list-style: none; color: rgb(51, 51, 51); font-size: 16px; line-height: 25.6px; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><li style="box-sizing: border-box; border: 0px; margin: 0px; padding: 0px; list-style: disc;"><p style="box-sizing: border-box; border: 0px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 1.7;">STATE_COLLAPSED: 关闭Bottom Sheets,显示peekHeight的高度，默认是0</p></li><li style="box-sizing: border-box; border: 0px; margin: 0px; padding: 0px; list-style: disc;"><p style="box-sizing: border-box; border: 0px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 1.7;">STATE_DRAGGING: 用户拖拽Bottom Sheets时的状态</p></li><li style="box-sizing: border-box; border: 0px; margin: 0px; padding: 0px; list-style: disc;"><p style="box-sizing: border-box; border: 0px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 1.7;">STATE_SETTLING: 当Bottom Sheets view释放时记录的状态。</p></li><li style="box-sizing: border-box; border: 0px; margin: 0px; padding: 0px; list-style: disc;"><p style="box-sizing: border-box; border: 0px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 1.7;">STATE_EXPANDED: 当Bottom Sheets 展开的状态</p></li><li style="box-sizing: border-box; border: 0px; margin: 0px; padding: 0px; list-style: disc;"><p style="box-sizing: border-box; border: 0px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 1.7;">STATE_HIDDEN: 当Bottom Sheets 隐藏的状态</p></li></ul>

com.android.support:design:24.2.1,导入包的版本不同,结果不同,24.2.1以前默认bottom sheet的peekHeight是0,所以默认情况下是隐藏状态,而24.2.1版本是默认不是0dp,所以要想刚开始就是隐藏状态就得加app:behavior_peekHeight="0dp",否则点击floatingActinButton 按钮不起作用

 还可以给bottom sheet加上回调

 behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Overridepublic void onStateChanged(@NonNull View bottomSheet, int newState) {
                if (newState == BottomSheetBehavior.STATE_COLLAPSED || newState == BottomSheetBehavior.STATE_HIDDEN) {
                    recyclerView.setVisibility(View.GONE);
                }
            }

            @Overridepublic void onSlide(@NonNull View bottomSheet, float slideOffset) {
                recyclerView.setVisibility(View.VISIBLE);
                ViewCompat.setAlpha(recyclerView, slideOffset);
            }
        });

第一个方法在bottom sheet状态改变时调用,第二个在滑动过程中调用