Skip to content

底部对话框 BottomDialog 和底部菜单 BottomMenu

Kongzue edited this page May 17, 2024 · 29 revisions

🌐 View English Document | 繁體中文文檔

🧾底部对话框 BottomDialog 和底部菜单 BottomMenu

底部对话框 BottomDialog 和底部菜单 BottomMenu

底部对话框 BottomDialog 提供从底部弹出显示的对话框样式,可设置标题、提示文本和自定义布局,使用 Material 主题时还会提供向下滑动关闭和向上滑动展开的功能。

底部菜单 BottomMenu 则是底部对话框 BottomDialog 的扩展组件,在底部对话框的基础上额外提供了菜单功能,菜单可设置菜单内容/菜单图标/单选功能,在不同的主题下还可以提供“取消”关闭按钮(注:因 Material 直接可以下滑关闭因此 Material 主题不提供额外的“取消”关闭按钮)

显示一个简单底部对话框

使用以下代码显示一个对话框:

BottomDialog.show("标题", "这里是对话框内容。");

请注意,Material 主题的底部对话框默认是通过下滑操作来进行关闭的,不同主题处理逻辑可能不同,例如在iOS主题中,则是提供“取消”按钮来进行关闭。

在其他主题中你可以通过.setCancelButton(...)方法来设置取消按钮的文字和事件

BottomDialog.show("标题", "这里是对话框内容。")
    .setCancelButton("取消", new OnDialogButtonClickListener<BottomDialog>() {
        @Override
        public boolean onClick(BottomDialog baseDialog, View v) {
            //...
            return false;
        }
    });

显示一个底部菜单

底部菜单是基于底部对话框扩展实现的一个快速选择菜单对话框,你可以通过传入List<String>String[] menuListList<CharSequence> menuList或者CharSequence[] menuList来快速显示一个菜单:

BottomMenu.show("新标签页中打开", "稍后阅读", "复制链接网址")
        .setMessage("这里是标题")
        .setOnMenuItemClickListener(new OnMenuItemClickListener<BottomMenu>() {
            @Override
            public boolean onClick(BottomMenu dialog, CharSequence text, int index) {
                toast(text);
                return false;
            }
        });

上述代码中,OnMenuItemClickListener回调是菜单的点击事件回调,其中 text 为菜单文本,index 为菜单的索引。

单选菜单也可以轻松设置菜单图标,我们尽可能的省去编写 Adapter 适配器的麻烦,要设置菜单图标可以直接指定,对于某一项菜单不需要图标的可以直接传入 0:

.setIconResIds(R.mipmap.img_dialogx_demo_add, R.mipmap.img_dialogx_demo_edit...)

图标是否根据亮暗色主题进行染色处理可通过以下方法调整:

.setAutoTintIconInLightOrDarkMode(boolean)

(可选)使用回调方式设置图标:

或者使用实现一个回调setOnIconChangeCallBack(...)的方式:

BottomMenu.show("添加", "查看", "编辑", "删除")
        .setOnIconChangeCallBack(new OnIconChangeCallBack(true) {
            @Override
            public int getIcon(BottomMenu bottomMenu, int index, String menuText) {
                switch (menuText) {
                    case "添加":
                        return R.mipmap.img_dialogx_demo_add;
                    case "查看":
                        return R.mipmap.img_dialogx_demo_view;
                    case "编辑":
                        return R.mipmap.img_dialogx_demo_edit;
                    case "删除":
                        return R.mipmap.img_dialogx_demo_delete;
                }
                return 0;
            }
        })
        .setOnMenuItemClickListener(new OnMenuItemClickListener<BottomMenu>() {
            @Override
            public boolean onClick(BottomMenu dialog, CharSequence text, int index) {
                toast(text);
                return false;
            }
        });

上述代码中,OnIconChangeCallBack 存在一个参数(boolean)autoTintIconInLightOrDarkMode 用于识别是否需要将图标进行相应的染色,以适应亮色和暗色模式的变化,设置为 true 时代表,处于亮暗色模式下,菜单图标会自动根据文字颜色进行染色,当使用非多彩图标的线性/面性图标时,建议开启此功能。

另外,底部菜单也提供单选功能,你可以设置一个已选择的 index 索引,那么在 BottomMenu 显示时,相应位置的菜单会被选中,不同主题的选择效果略有不同。

private int selectMenuIndex;

BottomMenu.show("拒绝", "询问", "始终允许", "仅在使用中允许")
        .setMessage("这里是权限确认的文本说明,这是一个单选的演示菜单")
        .setTitle("获得权限标题")
        .setOnMenuItemClickListener(new OnMenuItemClickListener<BottomMenu>() {
            @Override
            public boolean onClick(BottomMenu dialog, CharSequence text, int index) {
            	//记录已选择值
                selectMenuIndex = index;
                toast(text);
                return false;
            }
        })
        .setSelection(selectMenuIndex);		//指定已选择的位置

同样的,当您在OnMenuItemClickListener中返回值设置return true时,点击菜单后不会自动关闭。

单选菜单

如果你需要选中菜单但不立即关闭对话框,而是保持选中状态,等待用户确认或取消操作再进行处理,那么此时可以通过单选状态回调 OnMenuItemSelectListener#onOneItemSelect 来实现对菜单实时选中状态的监听:

.setOnMenuItemClickListener(new OnMenuItemSelectListener<BottomMenu>() {
    @Override
    public void onOneItemSelect(BottomMenu dialog, CharSequence text, int index, boolean select) {
        //index 即用户点击的菜单项索引
    }
})
//开启单选模式,以下方式二选一:
.setSelection(selectMenuIndex)	//开启单选模式,并指定一个已选项
.setSingleSelection()		//开启单选模式,但不指定已选项

此时,用户点击菜单后对话框不会立即消失,而是等待用户可能再次修改选择。

要在对话框关闭时,或之后再获取用户已选择的菜单项,可以通过 .getSelectionIndex() 方法获取用户当前选中的菜单索引,另可通过 .getMenuList() 获取所有的菜单文本。

多选菜单

要开启多选菜单,你可以通过以下代码实现,使用多选菜单状态回调实时获取选中项:

.setOnMenuItemClickListener(new OnMenuItemSelectListener<BottomMenu>() {
    @Override
    public void onMultiItemSelect(BottomMenu dialog, CharSequence[] text, int[] index) {
        //index[] 数组是所有已选中菜单项的索引集合,text[] 是所有已选中菜单项文本的集合
    }
})
//开启多选模式,以下方式二选一:
.setSelection(selectMenuIndexArray);	//开启多选模式,并指定一个已选中的索引数组
.setMultiSelection()	//开启多选模式,但不指定已选项

此时,用户点击菜单后对话框不会立即消失,而是等待用户可能再次修改或继续其他选择。

要在对话框关闭时,或之后再获取用户已选择的菜单项,可以通过 .getSelectionIndexArray() 方法获取用户当前选中的菜单索引集合,通过 .getSelectTextArray() 获取已选中的菜单文本集合,另可通过 .getMenuList() 获取所有的菜单文本。

按钮点击回调

BottomDialog 和 BottomMenu 和 MessageDialog 一样,也支持设置 OK、Cancel、Other 按钮的显示,但请注意,部分主题可能不支持额外的 Cancel 和 Other 两个按钮。

要设置按钮和回调,与 MessageDialog 类似,使用以下代码进行设置:

.setOkButton("OK", new OnDialogButtonClickListener<BottomDialog>() {
    @Override
    public boolean onClick(BottomDialog dialog, View v) {
        //...
        return false;
    }
})
.setCancelButton("Cancel", new OnDialogButtonClickListener<BottomDialog>() {
    @Override
    public boolean onClick(BottomDialog dialog, View v) {
        //...
        return false;
    }
})
.setOtherButton("Other", new OnDialogButtonClickListener<BottomDialog>() {
    @Override
    public boolean onClick(BottomDialog dialog, View v) {
        //...
        return false;
    }
})

回调中有一个返回值,若return true 则可以点击后不自动关闭对话框。

另外,DialogX 还提供了多种设置回调和按钮文本的方法:

//只设置按钮文本
.setOkButton("确定")

//只设置按钮点击回调
.setOkButton(new OnDialogButtonClickListener<BottomDialog>() {
    @Override
    public boolean onClick(BottomDialog dialog, View v) {
        toast("点击确定按钮");
        return false;
    }
});

//设置按钮文本并设置回调
.setOkButton("确定", new OnDialogButtonClickListener<BottomDialog>() {
    @Override
    public boolean onClick(BottomDialog dialog, View v) {
        toast("点击确定按钮");
        return false;
    }
});

//隐藏按钮
.setOkButton(null)

请依据个人喜好随意使用。

获取用户选择状态

如果你的业务流程中,并不需要对用户操作立即进行处理,但需要知道用户选择了哪个按钮,你也可以通过持有对话框句柄,在后续获取选择的状态,例如:

private BottomDialog dialog;

//业务流程模拟,创建并显示了一个对话框,但不立即处理点击事务
dialog = BottomDialog.show(...);

//需要时可根据 getButtonSelectResult() 方法获取用户点击了哪个按钮选项
BUTTON_SELECT_RESULT result = dialog.getButtonSelectResult();

BUTTON_SELECT_RESULT 是一个枚举,它包含以下类型:

NONE,           //未做出选择
BUTTON_OK,      //选择了确定按钮
BUTTON_CANCEL,  //选择了取消按钮
BUTTON_OTHER    //选择了其他按钮

你可以根据它的状态判断用户点击了哪个按钮。

基于这个特性,如果业务流程中针对用户的选择,无论选择哪个选项都有相同部分的代码需要执行,那么开发者也可以在用户选择后,例如在 DialogLifecycle#onDismiss 对话框的关闭事件中对用户的选择进行统一处理,减少重复代码量;

生命周期回调

想要监控对话框的生命周期,可以实现其 .setDialogLifecycleCallback(...) 接口,建议使用build()方法构建对话框:

BottomMenu.build()
        .setDialogLifecycleCallback(new DialogLifecycleCallback<BottomMenu>() {
            @Override
            public void onShow(BottomMenu dialog) {
                //对话框启动时回调
            }
            @Override
            public void onDismiss(BottomMenu dialog) {
                //对话框关闭时回调
            }
        })
        .show();

BottomDialog/BottomMenu 也支持 Lifecycle,你可以使用 .getLifecycle() 获取 Lifecycle 对象。

对于可滑动的 BottomDialog/BottomMenu(受限于主题),可以使用增强型的 DialogLifecycleCallback 实现 BottomDialogSlideEventLifecycleCallback,它可以提供关于滑动过程以及滑动关闭的扩展事件处理和回调:

.setDialogLifecycleCallback(new BottomDialogSlideEventLifecycleCallback<BottomDialog>() {
    @Override
    public boolean onSlideClose(BottomDialog dialog) {
        log("滑动关闭对话框触发");
        return false;	//默认返回 false,当返回 true 时表示拦截操作,对话框不会继续关闭;
    }
    @Override
    public boolean onSlideTouchEvent(BottomDialog dialog, View v, MotionEvent event) {
        log("#滑动过程触发: action="+ event.getAction() + " y="+event.getY());
        return false;	//默认返回 false,当返回 true 时表示拦截操作,对话框不会处理滑动流程,可实现触摸事件接管;
    }
})

你也可以通过使用 new 构建实例时,override 的生命周期事件的方式来处理生命周期事务,例如:

//复写事件演示
new BottomDialog() {
    @Override
    public void onShow(BottomDialog dialog) {
        //...
        tip("onShow");
    }
    @Override
    public void onDismiss(BottomDialog dialog) {
        //...
        tip("onDismiss");
    }
}

你也可以使用方法 .onShow(DialogXRunnable).onDismiss(DialogXRunnable),来处理生命周期事务,例如:

BottomDialog.show(...) 
        .onShow(new DialogXRunnable<BottomDialog>() {
            @Override
            public void run(BottomDialog dialog) {
                //BottomDialog show!
            }
        })
        .onDismiss(new DialogXRunnable<BottomDialog>() {
            @Override
            public void run(BottomDialog dialog) {
                //BottomDialog dismiss!
            }
        });

自定义布局

BottomDialog 原生参数支持自定义布局,你可以通过如下代码自定义底部对话框布局:

BottomDialog.show("标题", "这里是对话框内容。\n底部对话框也支持自定义布局扩展使用方式。",
        new OnBindView<BottomDialog>(R.layout.layout_custom_view) {
            @Override
            public void onBind(BottomDialog dialog, View v) {
                //v.findViewById...
            }
        });

BottomMenu 菜单需要使用如下代码加入自定义布局:

BottomMenu.show("新标签页中打开", "稍后阅读", "复制链接网址")
        .setMessage("菜单标题")
        .setOnMenuItemClickListener(new OnMenuItemClickListener<BottomMenu>() {
            @Override
            public boolean onClick(BottomMenu dialog, CharSequence text, int index) {
                toast(text);
                return true;
            }
        })
        .setCustomView(new OnBindView<BottomDialog>(R.layout.layout_custom_view) {
            @Override
            public void onBind(BottomDialog dialog, View v) {
                //v.findViewById...
            }
        });

回调参数中,v 为您给定的布局文件的实例化组件,您可以通过 v.findViewById(resId)来实例化其他子布局组件,并在 onBind 方法中设置其功能和事件回调。

其他额外方法

//设置菜单项目(无级)
.setMenus("添加", "编辑", "删除", "分享"...);

//设置图标(无级)
.setIconResIds(R.mipmap.img_dialogx_demo_add, R.mipmap.img_dialogx_demo_edit...)
  
//设置菜单项目(列表或集合)
.setMenuList(list);

//强制重新刷新界面
.refreshUI();

//关闭对话框
.dismiss();

//是否允许点击外部区域或返回键关闭
.setCancelable(boolean);

//设置标题文字样式
.setTitleTextInfo(TextInfo);

//设置消息文字样式
.setMessageTextInfo(TextInfo);

//设置按钮文字样式
.setCancelTextInfo(TextInfo);
    
//设置返回按键回调
.setOnBackPressedListener(OnBackPressedListener);

//获取对话框实例化对象,您可以通过此方法更深度的定制Dialog的功能
.getDialogImpl()

//获取自定义布局实例
.getCustomView()
    
//设置背景颜色,强行对对话框背景进行染色,请注意参数为int类型的颜色值而非R.color的索引
.setBackgroundColor(ColorInt);

//设置菜单文本样式
.setMenuTextInfo(TextInfo)

//设置对话框圆角(会裁切内容显示,此设置在 BottomDialog 和 BottomMenu 中只影响左上、右上两个角的圆角)
.setRadius(float px)

//隐藏对话框(无动画),恢复显示请执行非静态方法的 .show()
.hide();

//隐藏对话框(模拟关闭对话框的动画),恢复显示请执行非静态方法的 .show()
.hideWithExitAnim();

//是否允许滑动关闭(仅对 Material 主题有效)
.setAllowInterceptTouch(boolean)

//是否处于显示状态
.isShow()

//置顶对话框
.bringToFront()

//指定对话框显示层级
.setThisOrderIndex(int)

背景遮罩

BottomDialog 支持修改背景遮罩,这是为了丰富扩展性。如果需要背景遮罩,您可以自行使用如下代码设置:

bottomDialog.setMaskColor(colorInt);

请注意,传入参数为 ColorInt 值,您可以使用 Color.parseColor("#4D000000") 设置一个 HEX 色值,或使用 getResources().getColor(R.color.black30) 设置一个颜色的资源值。

额外组件

TextInfo

TextInfo 用于存储基础文本样式设置,其包含一系列属性和响应的 get/set 方法,例如方法解释如下:

属性 解释 默认值
fontSize 字号大小,值为-1时使用默认样式,单位:dp -1
gravity 对齐方式,值为-1时使用默认样式,取值可使用Gravity.CENTER等对齐方式 -1
fontColor 文字颜色,值为1时使用默认样式,取值可以用Color.rgb(r,g,b)等方式获取 1
bold 是否粗体 false

请注意,fontColor 为 ColorInt 值,您可以使用 Color.parseColor("#4D000000") 设置一个 HEX 色值,或使用资源 getResources().getColor(R.color.black30) 设置一个颜色的资源值,请勿直接传入资源 ID,它可能会无效。

关于“滑动提示条”

在使用 Material 主题风格且底部对话框,默认是可滑动关闭的,且当 cancelable 值为 true 时,会在对话框顶部显示一个 “滑动提示条”,若依据您的需求需要隐藏其显示,可通过以下方式关闭:

方式一,针对单次有效的方案

借助 DialogX 暴露内部元素的特性,删除 tab 布局。

BottomDialog.show("标题", "这里是对话框内容。\n底部对话框也支持自定义布局扩展使用方式。",
        new OnBindView<BottomDialog>(R.layout.layout_custom_view) {
            @Override
            public void onBind(BottomDialog dialog, View v) {
                if (dialog.getDialogImpl().imgTab != null) {
                    ((ViewGroup) dialog.getDialogImpl().imgTab.getParent()).removeView(dialog.getDialogImpl().imgTab);
                }
                //...
            }
        });

方式二,重写布局

手动创建一个 layout_dialogx_bottom_material 的布局(暗色对应 layout_dialogx_bottom_material_dark),内容请参考 layout_dialogx_bottom_material.xml(暗色对应 layout_dialogx_bottom_material_dark.xml

修改删除其中 <ImageView id="@+id/img_tab"> 的布局:

<ImageView
    android:id="@+id/img_tab"
    android:layout_width="30dp"
    android:layout_height="4dp"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="10dp"
    android:src="@drawable/rect_dialogx_material_dialogtap" />

此方案利用的是对资源的重写方式完成修改,请无需担心空指针,DialogX 内部有做对应处理。

单独指定样式

若你的 App 引入了多种主题,在特定场景下需要使对话框显示为某种非全局的主体样式,可使用 .build() 构建对话框,然后使用 .setStyle(style) 来指定主题样式,在最后执行 .show() 命令显示对话框,例如:

BottomDialog.build()
        //或直接使用 .build(IOSStyle.style())
        .setStyle(IOSStyle.style())
        .setTitle("Title")
        .setMessage("Message content.")
        .setOkButton("OK")
        .show();
Clone this wiki locally