Android BottomSheetDialogFragment 可随手势滑动关闭的底部弹窗
2020-07-12 16:21
2963 查看
在APP开发中,经常会有一个需求:
从底部弹出弹窗,并且可以跟随手指滑动关闭弹窗.
简介
BottomSheetDialogFragment是位于
com.google.android.material包下的一个类.
BottomSheetDialogFragment继承自
AppCompatDialogFragment
AppCompatDialogFragment继承自
DialogFragment
因为
AppCompatDialogFragment是一个特殊版本的
DialogFragment, 所以其实可以看做
BottomSheetDialogFragment是直接继承于
DialogFragment的.
关于
DialogFragment,可以看这篇文章 : Android 弹窗 DialogFragment
透过源码可以发现,
BottomSheetDialogFragment仅仅重写了
onCreateDialog这一个方法:
可以说
BottomSheetDialogFragment只是一个弹出
BottomSheetDialog的
DialogFragment而已.
当然了,不同于
DialogFragment,这次我们要把UI代码写在
onCreateDialog方法中.
使用
顾名思义,在
onCreateDialog方法中,我们要创建并返回一个
BottomSheetDialog:
使用构造方法创建,参数分别为
上下文(Context)和
资源引用(StyleRes)
我们先简单写一个看一下效果:
BtnBottomDialog
public class BtnBottomDialog extends BottomSheetDialogFragment { @NonNull @Override public Dialog onCreateDialog(Bundle savedInstanceState) { if (getActivity() == null) return super.onCreateDialog(savedInstanceState); BottomSheetDialog dialog = new BottomSheetDialog(getActivity(), R.style.Theme_MaterialComponents_BottomSheetDialog); dialog.setContentView(R.layout.dialog_fragment_layout); return dialog; } }
MainActivity:
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { new BtnBottomDialog().show(getSupportFragmentManager(), "tag"); } }); } }
dialog_fragment_layout
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:background="#fff" android:layout_height="600dp" tools:context=".MainActivity"> <TextView android:textColor="#000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="我是弹窗里的文字" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity布局过于简单,就不放代码了.
然后看一下效果:
看起来好像没什么问题,但有几个坑需要注意:
设置高度
dialog_fragment_layout的布局高度我写的600dp,如果直接写match_parent是无效的,不过可以动态设置它的高度 ,比如你想在不同的情况下让高度不同便可以这样:
BottomSheetDialog dialog = new BottomSheetDialog(getActivity(), R.style.Theme_MaterialComponents_BottomSheetDialog); View root = LayoutInflater.from(getActivity()).inflate(R.layout.dialog_fragment_layout, null); dialog.setContentView(root); //设置宽度 ViewGroup.LayoutParams params = root.getLayoutParams(); params.height = (int) (0.75 * getResources().getDisplayMetrics().heightPixels); root.setLayoutParams(params); return dialog;
依然是先创建一个
BottomSheetDialog, 但是
setContentView传入的是
view而不是资源id了 , 因为我们需要获取并改变一些view的参数.
切记要先设置布局再获取LayoutParams,否则是找不到的
从后台重新进入已弹出Dialog的页面会有闪烁
我们在弹窗出来的时候,按HOME键会回到主页,此时再打开APP弹窗会有一个再次弹出来的效果,可以通过设置dialog的动画来解决这个问题:
在
onCreateDialog中添加以下代码:
Window window = dialog.getWindow(); if (window != null) { window.setWindowAnimations(R.style.BottomSheet); }
<style name="BottomSheet" parent="Theme.AppCompat.DayNight.Dialog"> <item name="android:windowFrame">@null</item> <item name="android:windowBackground">@android:color/transparent</item> </style>
再看一下:
如果想在有的地方有弹出动画,有的地方没有怎么办呢?
可以重写
show方法:
@Override public void show(@NonNull FragmentManager manager, @Nullable String tag) { //在show之前设置弹出动画 super.show(manager, tag); //在show之后设置关闭动画 }
BtnBottomDialog的全部代码
public class BtnBottomDialog extends BottomSheetDialogFragment { @NonNull @Override public Dialog onCreateDialog(Bundle savedInstanceState) { if (getActivity() == null) return super.onCreateDialog(savedInstanceState); BottomSheetDialog dialog = new BottomSheetDialog(getActivity(), R.style.Theme_MaterialComponents_BottomSheetDialog); View root = LayoutInflater.from(getActivity()).inflate(R.layout.dialog_fragment_layout, null); dialog.setContentView(root); //设置宽度 ViewGroup.LayoutParams params = root.getLayoutParams(); params.height = (int) (0.75 * getResources().getDisplayMetrics().heightPixels); root.setLayoutParams(params); Window window = dialog.getWindow(); if (window != null) { window.setWindowAnimations(R.style.BottomSheet); } return dialog; } @Override public void show(@NonNull FragmentManager manager, @Nullable String tag) { //在show之前设置弹出动画 super.show(manager, tag); //在show之后设置关闭动画 } }
相关文章推荐
- Android使用BottomSheetBehavior 和 BottomSheetDialog实现底部弹窗
- BottomDialog 是一个通过 DialogFragment 实现的底部弹窗布局,并且支持弹出动画,支持任意布局http://shaohui.me
- 使用 DialogFragment 和 BottomSheet 实现底部弹出框
- Android 6.0新控件 BottomSheetDialog | 底部对话框 介绍及使用详情
- Android BottomSheetDialog实现底部对话框的示例
- Android使用CoordinatorLayout和BottomSheetBehavior实现滑动效果(底部抽屉)
- Android底部对话框的实现(BottomSheet,自定义Dialog)
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失的动画实现
- 关于BottomSheetDialogFragment中的EditText选中后不能顶起整个布局
- 如何使用Material Design中的BottomSheetBehavior、BottomSheetDialog和BottomSheetDialogFragment
- Android流行UI布局——底部导航(BottomNavigationView+ViewPager+Fragment)
- Android流行UI布局:底部导航(BottomNavigationView+ViewPager+Fragment)
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失,并解决activity跳转的时候出现短暂的黑屏
- BottomSheetDialog底部按钮
- Android屏幕底部弹出DialogFragment(3)
- Android BottomSheetDialog透明问题的解决办法
- android界面底部BottomBar以及fragment
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失,并解决activity跳转的时候出现短暂的黑屏
- 如何禁止使用bottomsheetdialogfragment拖动?
- Bottom Sheet的使用和BottomSheetDialogFragment的封装