底部弹窗:BottomSheetBehavior使用

最新推荐文章于 2024-06-16 10:22:07 发布

xiaoshitou_2015

最新推荐文章于 2024-06-16 10:22:07 发布

阅读量1.4k

点赞数 1

分类专栏： Android学习文章标签：底部弹窗

Android学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

原创:http://blog.csdn.net/qjay_dev/article/details/51289267

本文使用的 com.Android.support:design 版本为 23.3.0

效果图:

BottomSheetBehavior

此类类似一个工具类，并不能在布局中使用，下面我们看看怎么实现我们效果图中的功能

layout

<FrameLayout
    android:id="@+id/bottom_sheet"
    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/include_bottom_sheet_layout" />

</FrameLayout>
 
 1
2
3
4
5
6
7
8
9
10
11
12
 
 
  
  
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12

我们可以看到id = bottom_sheet 的FrameLayout设置了一些app命名空间的属性，其中app:layout_behavior="@string/bottom_sheet_behavior"才是重点，设置这个才能与今天所讲的类联系在一起，所以此View的parent view 必须是android.support.design.widget.CoordinatorLayout

include：include_bottom_sheet_layout

<?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="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="android.support.design-23.3.0"
        android:textSize="20sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="AppBarLayout"
        android:textSize="20sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BottomSheetBehavior"
        android:textSize="20sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BottomSheetDialog"
        android:textSize="20sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BottomSheetDialogFragment"
        android:textSize="20sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CircularBorderDrawable"
        android:textSize="20sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CircularBorderDrawableLollipop"
        android:textSize="20sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CollapsingTextHelper"
        android:textSize="20sp" />
</LinearLayout>
 
 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
  
  
 
 
 
 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

完整布局

<?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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btnBehavior"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="BottomSheetBehavior"
            android:textAllCaps="false" />

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


    <FrameLayout
        android:id="@+id/bottom_sheet"
        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/include_bottom_sheet_layout" />

    </FrameLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:borderWidth="0dp"
        app:elevation="5dp"
        app:layout_anchor="@id/bottom_sheet"
        app:layout_anchorGravity="right|top"
        app:pressedTranslationZ="10dp" />
</android.support.design.widget.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
  
  
   
   
  
  
  
  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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

Java Code

View bottomSheet =  findViewById(R.id.bottom_sheet);
BottomSheetBehavior<View> behavior = BottomSheetBehavior.from(bottomSheet);
  
  1
2
  
  
   
   
  
  
  
  1
2

R.id.bottom_sheet是我们想要展示的View，这个时候BottomSheetBehavior就派上用场了，使用简单，直接调用一个静态方法 from() 方法搞定.

int state = behavior.getState();
if (state == BottomSheetBehavior.STATE_EXPANDED) {
    behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}else{
    behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
 
 1
2
3
4
5
6
 
 
  
  
 
 
 
 1
2
3
4
5
6

当用户触发某一动作事件后，可采用这部分代码对View的显示与隐藏。

好了，基本用法就这么简单，下面我们来看看BottomSheetBehavior类中有一些什么方法值得我们关注

BottomSheetBehavior

选中部分就是我们要了解学习的类与方法

BottomSheetCallback

/**
 * bottom sheets监控事件的回调
 */
public abstract static class BottomSheetCallback {
    /**
     * 当bottom sheets状态被改变回调
     * @param bottomSheet The bottom sheet view.
     * @param newState    改变后新的状态
     */
    public abstract void onStateChanged(@NonNull View bottomSheet, @State int newState);
    /**
     * 当bottom sheets拖拽时回调
     * @param bottomSheet The bottom sheet view.
     * @param slideOffset 滑动量;从0到1时向上移动
     */
    public abstract void onSlide(@NonNull View bottomSheet, float slideOffset);
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
  
  
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Public Methods

方法	用途
setPeekHeight	显示的高度；哈，这么理解，就是默认显示后View露头的高度
getPeekHeight	@see setPeekHeight()
setHideable	设置是否可以隐藏，如果为true,表示状态可以为STATE_HIDDEN
isHideable	@see setHideable()
setState	设置状态;设置不同的状态会影响BottomSheetView的显示效果
getState	获取状态
setBottomSheetCallback	设置状态改变回调

BottomSheetDialog

此类其实就是对`BottomSheetBehavior`的封装，将我们的`BottomSheetView`改装成一个`Dialog`显示形式

用法:

BottomSheetDialog bsDialog = new BottomSheetDialog(this);
bsDialog.setContentView(R.layout.include_bottom_sheet_layout);
bsDialog.show();
  
  1
2
3
  
  
   
   
  
  
  
  1
2
3

解析:

private View wrapInBottomSheet(int layoutResId, View view, ViewGroup.LayoutParams params) {
    final CoordinatorLayout coordinator = (CoordinatorLayout) View.inflate(getContext(),
            R.layout.design_bottom_sheet_dialog, null);
    if (layoutResId != 0 && view == null) {
        view = getLayoutInflater().inflate(layoutResId, coordinator, false);
    }
    FrameLayout bottomSheet = (FrameLayout) coordinator.findViewById(R.id.design_bottom_sheet);
    BottomSheetBehavior.from(bottomSheet).setBottomSheetCallback(mBottomSheetCallback);
    if (params == null) {
        bottomSheet.addView(view);
    } else {
        bottomSheet.addView(view, params);
    }
    // We treat the CoordinatorLayout as outside the dialog though it is technically inside
    if (shouldWindowCloseOnTouchOutside()) {
        coordinator.findViewById(R.id.touch_outside).setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        if (isShowing()) {
                            cancel();
                        }
                    }
                });
    }
    return coordinator;
}
  
  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
  
  
   
   
  
  
  
  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

此方法就是核心代码，主要作用就是将我们通过BottomSheetDialog.setContentView()方法设置的View通过BottomSheetBehavior.from(View)方法初始化一个BottomSheetBehavior对象

BottomSheetDialogFragment

此类其实就是对BottomSheetDialog的封装，内部实现很简单，我们看下实现代码：

public class BottomSheetDialogFragment extends AppCompatDialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        return new BottomSheetDialog(getActivity(), getTheme());
    }

}
   
   1
2
3
4
5
6
7
8
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8