Android Design - 使用 BottomSheet

Flutter 下使用 BottomSheetBehavior ↗️传送门

效果图

使用

1. 引入依赖：

compile 'com.android.support:design:24.2.0'

2. 编写底部弹出菜单的显示内容，文件名item_bottom_sheet_behavior：

<?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:background="#f0f0f0"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical">

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_behavior"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="显示/隐藏 BottomSheetBehavior"
            android:textAllCaps="false" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_dialog"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="显示 BottomSheetDialog"
            android:textAllCaps="false" />
    </LinearLayout>

    <FrameLayout
        android:id="@+id/fl_bottomSheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <include layout="@layout/item_bottom_sheet_behavior" />
    </FrameLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@android:drawable/ic_dialog_email"
        app:borderWidth="0dp"
        app:elevation="5dp"
        app:layout_anchor="@id/fl_bottomSheet"
        app:layout_anchorGravity="right|top"
        app:pressedTranslationZ="10dp" />
</android.support.design.widget.CoordinatorLayout>

3. 布局页面UI，文件名test_activity：

<?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:background="#f0f0f0"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical">

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_behavior"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="显示/隐藏 BottomSheetBehavior"
            android:textAllCaps="false" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_dialog"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="显示 BottomSheetDialog"
            android:textAllCaps="false" />
    </LinearLayout>

    <FrameLayout
        android:id="@+id/fl_bottomSheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <include layout="@layout/item_bottom_sheet_behavior" />
    </FrameLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@android:drawable/ic_dialog_email"
        app:borderWidth="0dp"
        app:elevation="5dp"
        app:layout_anchor="@id/fl_bottomSheet"
        app:layout_anchorGravity="right|top"
        app:pressedTranslationZ="10dp" />
</android.support.design.widget.CoordinatorLayout>

4. 测试页面：

import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.BottomSheetDialog;
import android.view.View;

import org.androidannotations.annotations.AfterViews;
import org.androidannotations.annotations.Click;
import org.androidannotations.annotations.EActivity;
import org.androidannotations.annotations.ViewById;

@EActivity(R.layout.test_activity)
public class TestActivity extends AppBaseActivity {

    @ViewById(R.id.fl_bottomSheet)
    View fl_bottomSheet;

    private BottomSheetBehavior<View> mBottomSheetBehavior;

    @AfterViews
    void onPageStart() {
        initBottomSheetBehavior();
    }

    /**
     * 初始化 BottomSheetBehavior
     */
    private void initBottomSheetBehavior() {

        mBottomSheetBehavior = BottomSheetBehavior.from(fl_bottomSheet);

        // 如果开始就显示一部分内容，可以添加一下两行代码
        mBottomSheetBehavior.setPeekHeight(120); //  app:behavior_peekHeight="60dp"
        mBottomSheetBehavior.setHideable(false); // app:behavior_hideable="false"

        mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                //newState 有5个状态 ：
                //拖动 BottomSheetBehavior.STATE_DRAGGING 1
                //下滑 BottomSheetBehavior.STATE_SETTLING 2
                //展开 BottomSheetBehavior.STATE_EXPANDED 3
                //收起 BottomSheetBehavior.STATE_COLLAPSED 4
                // BottomSheetBehavior.STATE_HIDDEN 5
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                //这里是拖拽中的回调，slideOffset为0-1 完全收起为0 完全展开为1
            }
        });
    }

    /**
     * 点击弹出 BottomSheetBehavior
     */
    @Click(R.id.btn_behavior)
    void btnClick() {
        if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
            mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        } else {
            mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }
    }

    /**
     * 点击弹出 BottomSheetDialog
     */
    @Click(R.id.btn_dialog)
    void btnDialogClick() {
        BottomSheetDialog bsDialog = new BottomSheetDialog(this);
        bsDialog.setContentView(R.layout.item_bottom_sheet_behavior);
        bsDialog.show();
    }
}