Android BottomSheet总结

Android BottomSheet总结

BottomSheet

XML布局：

    

        

        

    

    

        

        

        

        
    

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

• 必须是CoordinatorLayout布局
• behavior_peekHeight属性表示默认显示高度，设置为0则不显示
• 需要设置layout_behavior属性

代码：

val behavior = BottomSheetBehavior.from(llBottom)
btnBottomSheet.setOnClickListener {
    if (behavior.state == BottomSheetBehavior.STATE_EXPANDED) {
        behavior.state = BottomSheetBehavior.STATE_COLLAPSED
    } else if (behavior.state == BottomSheetBehavior.STATE_COLLAPSED) {
        behavior.state = BottomSheetBehavior.STATE_EXPANDED
    }
}
behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
    override fun onStateChanged(bottomSheet: View, newState: Int) {
        if (newState == BottomSheetBehavior.STATE_EXPANDED) {
            tvTitle.text = "下滑收起"
        } else if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
            tvTitle.text = "上拉展开"
        }
    }

    override fun onSlide(bottomSheet: View, slideOffset: Float) {
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

BottomSheetDialog

MyBottomSheetDialogStyle样式：

<style name="MyBottomSheetDialogStyle" parent="Theme.Design.Light.BottomSheetDialog">
    "bottomSheetStyle">@style/bottomSheetStyleWrapper
style>

<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
    "android:background">@android:color/transparent
style>
1
2
3
4
5
6
7
8

dialog_bottom_sheet布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bottom_sheet_shape"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="拍照" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="相册" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#f5f5f5" />

    <TextView
        android:id="@+id/cancel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="取消"
        android:textColor="@color/red" />

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

代码：

val bottomSheetDialog = BottomSheetDialog(mContext, R.style.MyBottomSheetDialogStyle)
bottomSheetDialog.dismissWithAnimation
bottomSheetDialog.setContentView(R.layout.dialog_bottom_sheet)
val cancel: TextView = bottomSheetDialog.findViewById<TextView>(R.id.cancel)!!
cancel.setOnClickListener {
    bottomSheetDialog.dismiss()
}
bottomSheetDialog.show()
1
2
3
4
5
6
7
8

BottomSheetDialogFragment

MyBottomSheetDialog代码：

class MyBottomSheetDialog : BottomSheetDialogFragment() {
    private lateinit var cancel: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setStyle(STYLE_NORMAL, R.style.MyBottomSheetDialogStyle)
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return inflater.inflate(R.layout.dialog_bottom_sheet, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        cancel = view.findViewById(R.id.cancel)
        cancel.setOnClickListener {
            dismiss()
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用：

btnBottomSheetDialogFragment.setOnClickListener {
    MyBottomSheetDialog().show(supportFragmentManager, "MyBottomSheetDialog")
}
1
2
3

全屏无阴影BottomSheetDialogFragment

MyBottomSheetDialogBgStyle样式：

<style name="MyBottomSheetDialogBgStyle" parent="Theme.Design.Light.BottomSheetDialog">
    "bottomSheetStyle">@style/bottomSheetStyleWrapper
    "android:backgroundDimEnabled">false
style>

<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
    "android:background">@android:color/transparent
style>
1
2
3
4
5
6
7
8
9

dialog_full布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bottom_sheet_shape"
    android:orientation="vertical"
    android:padding="10dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="标题"
            android:textSize="20sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/iv_close"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_close" />
    RelativeLayout>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入"
        android:inputType="text"
        android:padding="10dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/desc" />
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

MyFullDialog代码：

class MyFullDialog : BottomSheetDialogFragment() {
    private lateinit var close: ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setStyle(STYLE_NORMAL, R.style.MyBottomSheetDialogBgStyle)
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.dialog_full, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        close = view.findViewById(R.id.iv_close)
        close.setOnClickListener {
            dismiss()
        }
    }

    override fun onStart() {
        super.onStart()
        val view: FrameLayout = dialog?.findViewById(R.id.design_bottom_sheet)!!
        //设置BottomSheetDialogFragment高度
        view.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT
        //设置弹出高度
        val behavior = BottomSheetBehavior.from(view)
        behavior.peekHeight = 3000
        //展开
        behavior.state = BottomSheetBehavior.STATE_EXPANDED
    }

    override fun dismiss() {
        KeyboardUtils.hideKeyboard(dialog?.currentFocus)
        super.dismiss()
    }
}
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

使用：

btnFullDialog.setOnClickListener {
    MyFullDialog().show(supportFragmentManager, "MyFullDialog")
}
1
2
3

代码下载