Zhang Qin's blog

Hello Everyone

0%

BottomSheet底部弹窗

发表于 更新于 分类于
本文字数： 2.7k 阅读时长 ≈ 2 分钟

一、简述

  • 可以拖动的底部弹窗

二、xml代码

BottomSheets需要配合CoordinatorLayout控件

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
<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">

    	... ...

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nsv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000"
        app:behavior_hideable="true"
		app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center"
            android:orientation="vertical">
           
			... ...

    </android.support.v4.widget.NestedScrollView>

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

包含的app属性

1
2
3
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="@string/bottom_sheet_behavior"


1. `app:behavior_peekHeight="50dp"` `peekHeight`是当`BottomSheets`关闭的时候，底部我们能看到的高度,默认是0不可见。
2. `app:behavior_hideable="true"` `hideable`是当我们拖拽下拉的时候，`bottomsheet`是否能全部隐藏。
3. `layout_behavior`指向`bottom_sheet_behavio`r,代表这是一个`bottomSheets`

三、Java代码及常用API介绍

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
NestedScrollView scrollingView = (NestedScrollView) findViewById(R.id.nsv);
mBottomSheetBehavior = BottomSheetBehavior.from(scrollingView);

Button button = (Button) findViewById(R.id.btn);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
		// 通过点击按钮设置开启或关闭
        if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
            mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        } else {
            mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }
    }
});
//回掉监听
mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        Log.e(TAG, "onStateChanged: " + "状态改变" + newState);
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        Log.e(TAG, "onSlide: " + slideOffset);
    }
});

  1. 弹窗状态

    1
    2
    3
    4
    5
    //public static final int STATE_DRAGGING = 1;//拖动
    //public static final int STATE_SETTLING = 2;//沉降中
    //public static final int STATE_EXPANDED = 3;//打开了
    //public static final int STATE_COLLAPSED = 4;//关闭
    //public static final int STATE_HIDDEN = 5;//隐藏

  2. 设置当前状态

    1
    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

四、项目地址

https://github.com/sdwfqin/AndroidSamples