Android BottomSheetDialogFragment 使用详解,设置圆角、固定高度、默认全屏等
创始人
2024-02-07 03:42:15
0

转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/127967304
本文出自【赵彦军的博客】

文章目录

  • 效果
  • BottomSheet
  • BottomSheetDialog
  • BottomSheetDialogFragment
  • 圆角效果
  • 去掉背景蒙版
  • 设置蒙版透明度
  • 点击 dialog 外部区域,dialog 不消失
  • 禁止向下拖动
  • 设置弹框固定高度
  • 内容铺满全屏
  • 监听展开收起
  • 底部常驻View

效果

在这里插入图片描述

在这里插入图片描述
MD风格的底部弹窗,比自定义dialog或popupwindow使用更简单,功能也更强大。

其实细分来说,是BottomSheet、BottomSheetDialog、BottomSheetDialogFragment

代码 https://gitee.com/zhaoyanjun/bottomSheetDialogFragmentDemo

BottomSheet

与主界面同层级关系,可以事件触发,如果有设置显示高度的话,也可以拉出来,且不会影响主界面的交互。
在这里插入图片描述
XML



注意,

  • 这里需要协调布局CoordinatorLayout包裹才行
  • app:behavior_peekHeight 显示高度,不显示的话设置为0即可
  • app:layout_behavior 标示这是一个bottom_sheet

以上3个条件都是必须的。

代码

 View bottomView = findViewById(R.id.ll_bottom_sheet);bottomView.setOnClickListener(v -> {BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomView);if (behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {//如果是展开状态,则关闭,反之亦然behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);} else {behavior.setState(BottomSheetBehavior.STATE_EXPANDED);}});
  • STATE_COLLAPSED: 折叠状态
  • STATE_EXPANDED: 展开状态
  • STATE_DRAGGING : 过渡状态
  • STATE_SETTLING: 视图从脱离手指自由滑动到最终停下的这一小段时间
  • STATE_HIDDEN : 默认无此状态(可通过app:behavior_hideable 启用此状态),启用后用户将能通过向下滑动完全隐藏 bottom sheet

BottomSheetDialog

在这里插入图片描述

可以看到弹出来之后是有一个半透明的蒙层的,这时候是影响主界面交互的,也就意味着此时BottomSheetDialog的优先级是要高于主界面的。

代码

public class MyBottomSheetDialog extends BottomSheetDialog {public MyBottomSheetDialog(@NonNull Context context) {super(context);}public MyBottomSheetDialog(@NonNull Context context, int theme) {super(context, theme);}protected MyBottomSheetDialog(@NonNull Context context, boolean cancelable, OnCancelListener cancelListener) {super(context, cancelable, cancelListener);}
}    

显示 Dialog

MyBottomSheetDialog bottomSheetDialog = new MyBottomSheetDialog(this);
bottomSheetDialog.setContentView(R.layout.bottom_dialog_layout);
bottomSheetDialog.show();

bottom_dialog_layout :



比较简单的使用方式,直接实例化之后setContentView,然后调用show就可以了。
这里只是一个展示效果,实际上使用场景可能会复杂一些,还要做一些操作等等,所以,也可以自定义dialog继承自BottomSheetDialog,然后处理自己的业务逻辑。

BottomSheetDialogFragment

在这里插入图片描述
效果跟BottomSheetDialog差不多,代码跟DialogFragment差不多。

代码

public class MyDialogFragment extends BottomSheetDialogFragment {@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.bottom_dialog_fragment_layout, container, false);return view;}
}

bottom_dialog_fragment_layout



显示

MyDialogFragment dialog = new MyDialogFragment();
Bundle bundle = new Bundle();
dialog.setArguments(bundle);
dialog.show(getSupportFragmentManager(), "dialog_fragment");

但是在实际开发中,我们的需求可能并不能满足于此,比如上部分圆角效果指定高度

圆角效果

先设置原有背景透明

style.xml

 

onCreate中设置style

public class MyDialogFragment extends BottomSheetDialogFragment {@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setStyle(STYLE_NORMAL, R.style.MyBottomSheetDialog);}@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.bottom_dialog_fragment_layout, container, false);return view;}
}

在根布局的 view上设置 background



特别注意:根布局除了设置 android:background 属性外,还需要设置 android:padding 属性,否则圆角显示不出来。

fragment_dialog_bg



去掉背景蒙版

需要在 style 中增加 android:backgroundDimEnabled 属性

设置蒙版透明度

style 中增加 android:backgroundDimAmount 属性,属性值范围 0 - 1 .

  • 0 : 完全透明
  • 1:完全不透明
    

点击 dialog 外部区域,dialog 不消失

重写 onCreateDialog 方法,设置 setCanceledOnTouchOutside 值为 false

public class MyDialogFragment extends BottomSheetDialogFragment {@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setStyle(STYLE_NORMAL, R.style.MyBottomSheetDialog);}@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog =  super.onCreateDialog(savedInstanceState);dialog.setCanceledOnTouchOutside(false);return dialog;}@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.bottom_dialog_fragment_layout, container, false);return view;}
}

禁止向下拖动

bottomSheetBehavior.setHideable(false);

具体使用方法:

   @Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog = super.onCreateDialog(savedInstanceState);if (dialog instanceof BottomSheetDialog) {BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;bottomSheetDialog.setOnShowListener(dialogInterface -> {FrameLayout bottomSheet = bottomSheetDialog.findViewById(android.support.design.R.id.design_bottom_sheet);BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);bottomSheetBehavior.setHideable(false);});}return dialog;}

设置弹框固定高度

bottomSheetBehavior.setPeekHeight(1200);

使用:

@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog = super.onCreateDialog(savedInstanceState);if (dialog instanceof BottomSheetDialog) {BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;bottomSheetDialog.setOnShowListener(dialogInterface -> {FrameLayout bottomSheet = bottomSheetDialog.findViewById(android.support.design.R.id.design_bottom_sheet);BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);bottomSheetBehavior.setPeekHeight(1200);});}return dialog;}@Nullab

内容铺满全屏

当内容特别多,比如有 recyclerView 时,我们希望 dialog 展开的高度是全屏的。

//默认展开
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

使用

 @Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog = super.onCreateDialog(savedInstanceState);if (dialog instanceof BottomSheetDialog) {BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;bottomSheetDialog.setOnShowListener(dialogInterface -> {FrameLayout bottomSheet = bottomSheetDialog.findViewById(android.support.design.R.id.design_bottom_sheet);BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);//默认展开bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);});}return dialog;}

监听展开收起

bottomSheetBehavior.setBottomSheetCallback()

使用

public class MyDialogFragment extends BottomSheetDialogFragment {@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setStyle(STYLE_NORMAL, R.style.MyBottomSheetDialog);}@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog = super.onCreateDialog(savedInstanceState);if (dialog instanceof BottomSheetDialog) {BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;bottomSheetDialog.setOnShowListener(dialogInterface -> {FrameLayout bottomSheet = bottomSheetDialog.findViewById(android.support.design.R.id.design_bottom_sheet);BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);//默认展开bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {@Overridepublic void onStateChanged(@NonNull View view, int newState) {switch (newState) {case BottomSheetBehavior.STATE_EXPANDED:break;case BottomSheetBehavior.STATE_COLLAPSED:break;case BottomSheetBehavior.STATE_DRAGGING:break;case BottomSheetBehavior.STATE_SETTLING:break;case BottomSheetBehavior.STATE_HIDDEN:break;}}@Overridepublic void onSlide(@NonNull View view, float v) {}});});}return dialog;}@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.bottom_dialog_fragment_layout, container, false);return view;}
}

底部常驻View

在 BottomSheetDialogFragment 实现底部常驻布局是比较难的,好在有些人通过巧妙的方式实现了。

https://github.com/dorianpavetic/StickyBottomSheet

Android: Sticky view at the bottom of bottom sheet dialog fragment

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...