BottomSheetDialog 使用详解,设置圆角、固定高度、默认全屏等 |
您所在的位置:网站首页 › dialog底部弹出 › BottomSheetDialog 使用详解,设置圆角、固定高度、默认全屏等 |
1.效果
MD风格的底部弹窗,比自定义dialog或popupwindow使用更简单,功能也更强大。 其实细分来说,是BottomSheet、BottomSheetDialog、BottomSheetDialogFragment 2.BottomSheet与主界面同层级关系,可以事件触发,如果有设置显示高度的话,也可以拉出来,且不会影响主界面的交互。 XML ... 注意,这里需要协调布局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
dialog_bottom_sheet: 比较简单的使用方式,直接实例化之后setContentView,然后调用show就可以了。 这里只是一个展示效果,实际上使用场景可能会复杂一些,还要做一些操作等等,所以,也可以自定义dialog继承自BottomSheetDialog,然后处理自己的业务逻辑。 比如: class MyDialog(context: Context) : BottomSheetDialog(context) { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) } } 4.BottomSheetDialogFragment
在创建dialog的时候引入布局,然后setContentView即可。 调用: MyBottomSheetDialog().show(supportFragmentManager, "MyBottomSheetDialog") FragmentManagertag但是在实际开发中,我们的需求可能并不能满足于此,比如上部分圆角效果、指定高度等 5.圆角效果 先设置原有背景透明style.xml @style/bottomSheetStyleWrapper @android:color/transparent 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 6.去掉背景阴影
有一个peekHeight属性可以设置高度,但是这个api并没有开放给我们,不过也有解决办法 我们可以查看bottomSheetDialog.setContentView的源码 @Override public void setContentView(@LayoutRes int layoutResId) { super.setContentView(wrapInBottomSheet(layoutResId, null, null)); }这里调用了wrapInBottomSheet,继续探索 private View wrapInBottomSheet(int layoutResId, @Nullable View view, @Nullable ViewGroup.LayoutParams params) { ensureContainerAndBehavior(); ... return container; }多余的可以不用看,直接探索ensureContainerAndBehavior();方法 /** Creates the container layout which must exist to find the behavior */ private FrameLayout ensureContainerAndBehavior() { if (container == null) { container = (FrameLayout) View.inflate(getContext(), R.layout.design_bottom_sheet_dialog, null); FrameLayout bottomSheet = (FrameLayout) container.findViewById(R.id.design_bottom_sheet); behavior = BottomSheetBehavior.from(bottomSheet); behavior.addBottomSheetCallback(bottomSheetCallback); behavior.setHideable(cancelable); } return container; }到这里,我们就可以看到源码是怎么获取behavior的了,获取到behavior之后就可以调用peekHeight设置高度了。 8.设置默认全屏显示既然有了上面的方法,是不是有思路了,那有人说了,我把高度设置全屏不就完事了吗 事实上还真不行,BottomSheetDialogFragment只会显示实际高度,即布局有效高度,即使根布局高度match_parent也不行。 既然我们自己的view不行,那就从BottomSheetDialogFragment本身下手,还记得上面我们通过dialog?.findViewById(R.id.design_bottom_sheet)!!拿到的view吗,我们试一下设置这个view的高度行不行 view.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT看看效果 虽然不是预想的效果,但是既然还可以向上滑动至全屏,说明我们设置的高度是有效的,只是没有一次性展开而已,还记得前面提到的状态state吗,设置一下试试 behavior.state = BottomSheetBehavior.STATE_EXPANDED看看效果 实际高度可以自己计算 最终代码 override fun onStart() { super.onStart() //拿到系统的 bottom_sheet val view: FrameLayout = dialog?.findViewById(R.id.design_bottom_sheet)!! //设置view高度 view.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT //获取behavior val behavior = BottomSheetBehavior.from(view) //设置弹出高度 behavior.peekHeight = 3000 //设置展开状态 behavior.state = BottomSheetBehavior.STATE_EXPANDED }看看最终效果 效果是ok的,但是也有一点点不足,我们下拉的距离快到底部的时候才能关闭,所以建议在弹窗中也加上关闭的操作。 9.监听展开收起 behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() { override fun onStateChanged(bottomSheet: View, newState: Int) { when(newState){ BottomSheetBehavior.STATE_EXPANDED->{} BottomSheetBehavior.STATE_COLLAPSED->{} BottomSheetBehavior.STATE_DRAGGING->{} BottomSheetBehavior.STATE_SETTLING->{} BottomSheetBehavior.STATE_HIDDEN->{} } } override fun onSlide(bottomSheet: View, slideOffset: Float) { } })可以写在dialog里,也可以接口抛出去。 10.Githubhttps://github.com/yechaoa/MaterialDesign ok,至此BottomSheetDialog相关的功能完全演示完了。 如果对你有用,点个赞呗 ^ _ ^ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |