BottomSheetDialog 使用详解，设置圆角、固定高度，移动开发工程师
android:layout_marginTop="32dp"
android:text="BottomSheet"
android:textAllCaps="false" />
...
</LinearLayout>
<LinearLayout
android:id="@+id/ll_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_peekHeight="80dp"
app:layout_behavior="@string/bottom_sheet_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_red_light"
android:gravity="center"
android:text="上拉解锁隐藏功能"
android:textColor="@color/white"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_blue_light"
android:gravity="center"
android:text="a"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_orange_dark"
android:gravity="center"
android:text="b"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_green_light"
android:gravity="center"
android:text="c"
android:textSize="20sp" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
注意，这里需要协调布局
CoordinatorLayout包裹才行app:behavior_peekHeight显示高度，不显示的话设置为 0 即可app:layout_behavior标示这是一个bottom_sheet
以上 3 个条件都是必须的。
[](
)代码
btn_bottom_sheet.setOnClickListener {
val behavior = BottomSheetBehavior.from(ll_bottom_sheet)
if (behavior.state == BottomSheetBehavior.STATE_EXPANDED) {
//如果是展开状态，则关闭，反之亦然
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
} else {
behavior.state = BottomSheetBehavior.STATE_EXPANDED
}
}
STATE_COLLAPSED： 折叠状态
STATE_EXPANDED： 展开状态
STATE_DRAGGING ： 过渡状态
STATE_SETTLING： 视图从脱离手指自由滑动到最终停下的这一小段时间
STATE_HIDDEN ： 默认无此状态（可通过 app:behavior_hideable 启用此状态），启用后用户将能通过向下滑动完全隐藏 bottom sheet
[](
)3.BottomSheetDialog
==============================================================================
可以看到弹出来之后是有一个半透明的蒙层的，这时候是影响主界面交互的，也就意味着此时BottomSheetDialog的优先级是要高于主界面的。
[](
)代码
val bottomSheetDialog = BottomSheetDialog(this)
bottomSheetDialog.setCont
entView(R.layout.dialog_bottom_sheet)
bottomSheetDialog.show()
dialog_bottom_sheet：
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="80dp"
android:paddingBottom="80dp"
android:text="BottomSheetDialog"
android:textSize="30sp"
android:textStyle="bold" />
比较简单的使用方式，直接实例化之后setContentView，然后调用show就可以了。
这里只是一个展示效果，实际上使用场景可能会复杂一些，还要做一些操作等等，所以，也可以自定义 dialog 继承自 BottomSheetDialog，然后处理自己的业务逻辑。
比如：
class MyDialog(context: Context) : BottomSheetDialog(context) {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
}
}
[](
)4.BottomSheetDialogFragment
======================================================================================
效果跟BottomSheetDialog差不多，代码跟DialogFragment差不多。
[](
)代码
class MyBottomSheetDialog : BottomSheetDialogFragment() {
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val dialog = super.onCreateDialog(savedInstanceState)
val view = LayoutInflater.from(context).inflate(R.layout.dialog_my_bottom_sheet, null)
dialog.setContentView(view)
initView(view)
return dialog
}
private fun initView(rootView: View) {
//do something
rootView.tv_cancel.setOnClickListener { dismiss() }
}
}
在创建dialog的时候引入布局，然后setContentView即可。
调用：
MyBottomSheetDialog().show(supportFragmentManager, "MyBottomSheetDialog")
FragmentManager
tag
但是在实际开发中，我们的需求可能并不能满足于此，比如上部分圆角效果、指定高度等
[](
)5.圆角效果
=================================================================
先设置原有背景透明
style.xml
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>
<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@android:color/transparent</item>
</style>
onCreate 中设置 style
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(STYLE_NORMAL, R.style.BottomSheetDialog)
}
设置我们自己的 style
在根布局的view上设置background
android:background="@drawable/shape_sheet_dialog_bg"
shape_sheet_dialog_bg
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<solid android:color="@color/white" />
</shape>
[](
)6.去掉背景阴影
===================================================================
可以看到是没有阴影蒙版的，还是 style，设置backgroundDimEnabled为false即可
<style name="BottomSheetDialogBg" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@android:color/transparent</item>
</style>
[](
)7.设置固定高度
===================================================================
可以看到这个弹窗一开始并不是完全展开的，但是可以继续拉出来。
[](
)代码
override fun onStart() {
super.onStart()
//拿到系统的 bottom_sheet
val view: FrameLayout = dialog?.findViewById(R.id.design_bottom_sheet)!!
//获取 behavior
val behavior = BottomSheetBehavior.from(view)
//设置弹出高度
behavior.peekHeight = 350
}
有一个peekHeight属性可以设置高度，但是这个 api 并没有开放给我们，不过也有解决办法
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论