【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件 原创 精华

发布于 2021-6-22 15:47
浏览
25收藏

【软通动力】HarmonyOS三方件开发指南自一月份上线以来,已经连续更新了十九期了。今天所发这篇文章将作为三方件开发指南第一期的收官之作。我庆幸社区有这么多志同道合的开发者们关注我的文章,关于三方件的讲解或许对你有所帮助,或许你有更好的建议或想法,都可以来告诉我们。
HarmonyOS的未来是强大的,因为我们广大开发者是强大的,是自信的,我也祝福各位开发者们立“鸿”鹄之志,逐梦未来!

 

【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区

 

Dialog组件功能介绍

功能介绍

Dialog组件是一个显示不同风格的自定义对话框组件,目前支持十一种风格的显示。

模拟器上运行效果【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区

【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区

【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区

 Dialog使用方法

新建工程,增加组件Har包依赖

在应用模块中添加HAR,只需要将dialoglibrary-debug.har复制到entry\libs目录下即可(由于build.gradle中已经依赖的libs目录下的*.har,因此不需要在做修改)。

修改配置文件

在entry下面的build.gradle添加library 的依赖

【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区

在代码中使用

show alert dialog

  configBean = StyledDialog.buildMdAlert(getContext(), "提示", "确定退出?", new MyDialogListener() {
    @Override
    public void positiveButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});
configBean.commonDialog.show();

show input dialog

configBean = StyledDialog.buildNormalInput(getContext(), "请输入您的昵称", "长度0-20", new MyDialogListener() {

    @Override
    public void positiveButton() {
        //可对输入内容进行校验
        configBean.getInputText1();
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});
configBean.commonDialog.show();

show single choose dialog

CharSequence[] words = {"身份证", "手机", "钥匙", "钱包"};
boolean[] selectItems = {true, false, false, false};

ArrayList<ChooseBean> list = new ArrayList<>();
for (int i = 0; i < words.length; i++) {
    ChooseBean chooseBean = new ChooseBean();
    chooseBean.setTxt(words[i]);
    chooseBean.setChoosen(selectItems[i]);
    list.add(chooseBean);
}
configBean = StyledDialog.buildMdSingleChoose(getContext(), "单选", list, new MyItemDialogListener() {
    @Override
    public void onItemClick(CharSequence text, int position) {
        new ToastDialog(getContext()).setText(text.toString()).show();

    }

    @Override
    public void positiveButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;

    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});
configBean.commonDialog.show();

show multi choose dialog

CharSequence[] words = {"A.apple", "B.bananer", "C.pear", "D.milk"};
boolean[] checkedItems = {false, false, false, false};

ArrayList<ChooseBean> list = new ArrayList<>();
for (int i = 0; i < words.length; i++) {
    ChooseBean chooseBean = new ChooseBean();
    chooseBean.setTxt(words[i]);
    chooseBean.setChoosen(checkedItems[i]);
    list.add(chooseBean);
}
configBean = StyledDialog.buildMdMultiChoose(getContext(), "多选", list,
        new MyCheckBoxItemDialogListener() {
    @Override
    public void onItemClick(Checkbox checkbox, int position) {
        checkedItems[position] = checkbox.isChecked();
    }

    @Override
    public void positiveButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;

    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});
configBean.commonDialog.show();

show ios alert dialog

configBean = StyledDialog.buildMdIOSAlert(getContext(), "提示", "确定退出?", new MyDialogListener() {
    @Override
    public void positiveButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;

    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});


configBean.commonDialog.show();

show ios vertical alert dialog

configBean = StyledDialog.buildMdIOSAlertVertical(getContext(), "提示", "确定退出?", new MyDialogListener() {
    @Override
    public void positiveButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;

    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});


configBean.commonDialog.show();

show two input dialog

configBean = StyledDialog.buildTwoInput(getContext(), "登录", "请输入用户名","请输入密码", new MyDialogListener() {

    @Override
    public void positiveButton() {
        //可对输入内容进行校验
        configBean.getInputText1();
        configBean.getInputText2();
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});
configBean.commonDialog.show();

show list dialog

CharSequence[] words = {"身份证", "手机", "钥匙", "钱包"};
boolean[] selectItems = {true, false, false, false};

ArrayList<ChooseBean> list = new ArrayList<>();
for (int i = 0; i < words.length; i++) {
    ChooseBean chooseBean = new ChooseBean();
    chooseBean.setTxt(words[i]);
    chooseBean.setChoosen(selectItems[i]);
    list.add(chooseBean);
}
configBean = StyledDialog.buildMdIOSSingleChoose(getContext(), list, new MyItemDialogListener() {
    @Override
    public void onItemClick(CharSequence text, int position) {
        new ToastDialog(getContext()).setText(text.toString()).show();

    }

    @Override
    public void positiveButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;

    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});
configBean.commonDialog.show();

show bottom button list dialog

CharSequence[] words = {"身份证", "手机", "钥匙", "钱包"};
boolean[] selectItems = {true, false, false, false};

ArrayList<ChooseBean> list = new ArrayList<>();
for (int i = 0; i < words.length; i++) {
    ChooseBean chooseBean = new ChooseBean();
    chooseBean.setTxt(words[i]);
    chooseBean.setChoosen(selectItems[i]);
    list.add(chooseBean);
}
configBean = StyledDialog.buildMdIOSBottomSingleChoose(getContext(), list, new MyItemDialogListener() {
    @Override
    public void onItemClick(CharSequence text, int position) {
        new ToastDialog(getContext()).setText(text.toString()).show();

    }

    @Override
    public void positiveButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;

    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});
configBean.commonDialog.show();

show bottom list dialog

CharSequence[] words = {"身份证", "手机", "钥匙", "钱包"};
boolean[] selectItems = {true, false, false, false};

ArrayList<ChooseBean> list = new ArrayList<>();
for (int i = 0; i < words.length; i++) {
    ChooseBean chooseBean = new ChooseBean();
    chooseBean.setTxt(words[i]);
    chooseBean.setChoosen(selectItems[i]);
    list.add(chooseBean);
}
configBean = StyledDialog.buildMdIOSList(getContext(), list, new MyItemDialogListener() {
    @Override
    public void onItemClick(CharSequence text, int position) {
        new ToastDialog(getContext()).setText(text.toString()).show();

    }

    @Override
    public void positiveButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;

    }

    @Override
    public void negativeButton() {
        configBean.commonDialog.hide();
        configBean.commonDialog = null;
    }
});
configBean.commonDialog.show();

Menudialog

configBean = StyledDialog.buildMdSingleMenuChoose(getContext(), list, 100, 100, 400,650,new MyItemDialogListener() {
                @Override
                public void onItemClick(CharSequence text, int position) {
//                    new ToastDialog(getContext()).setText(text.toString()).show();

                }

                @Override
                public void positiveButton() {
                    configBean.commonDialog.hide();
                    configBean.commonDialog = null;

                }

                @Override
                public void negativeButton() {
                    configBean.commonDialog.hide();
                    configBean.commonDialog = null;
                }
            });
            configBean.commonDialog.show();

Dialog开发实现

新建一个Module

新建一个Module,类型选择HarmonyOS Library,模块名为dialoglibrary,如图

【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区

实现类

新建一个StyleDialog类,添加静态方法,代码如下:

/**
 * @param context  context
 * @param title    对话框的title
 * @param msg      对话框的提示信息
 * @param listener 对话框 ok 和 cancle 的点击监听事件
 * @return configbean
 */
public static ConfigBean buildMdAlert(Context context, CharSequence title, CharSequence msg,
                                      MyDialogListener listener) {
    return DialogAssigner.getInstance().assignMdAlert(context, title, msg, listener);
}

/**
 * @param context  context
 * @param title    对话框的title
 * @param list     list
 * @param listener 单项的item 和ok cancle 的点击事件的监听
 * @return configbean
 */
public static ConfigBean buildMdSingleChoose(Context context, CharSequence title, ArrayList<ChooseBean> list,
                                             MyItemDialogListener listener) {
    return DialogAssigner.getInstance().assignMdSingleChoose(context, title, list, listener);
}

/**
 * @param context     context
 * @param title       对话框的title
 * @param list        list
 * @param btnListener ok cancle 的点击监听事件
 * @return configbean
 */
public static ConfigBean buildMdMultiChoose(Context context, CharSequence title, ArrayList<ChooseBean> list,
                                            MyCheckBoxItemDialogListener btnListener) {
    return DialogAssigner.getInstance().assignMdMultiChoose(context, title, list, btnListener);
}

/**
 * @param context  context
 * @param title    对话框的title
 * @param hint1    输入框的hint 文字提示信息
 * @param listener ok cancle 的点击监听事件
 * @return configbean
 */
public static ConfigBean buildNormalInput(Context context, CharSequence title, CharSequence hint1,
                                          MyDialogListener listener) {
    return DialogAssigner.getInstance().assignNormalInput(context, title, hint1, listener);
}

新建DialogAssigner implements Assignable,代码如下:

/**
 *
 */
private static DialogAssigner instance;

/**
 *
 */
private DialogAssigner() {

}

/**
 *
 */
public static DialogAssigner getInstance() {
    if (instance == null) {
        instance = new DialogAssigner();
    }
    return instance;
}


@Override
public ConfigBean assignMdAlert(Context context, CharSequence title, CharSequence msg, MyDialogListener listener) {

    ConfigBean bean = new ConfigBean();
    bean.context = context;

    bean.msg = msg;
    bean.title = title;
    bean.listener = listener;
    bean.type = DefaultConfig.ALERT_DIALOG;
    bean.buildByType(bean);
    return bean;
}

@Override
public ConfigBean assignNormalInput(Context context, CharSequence title, CharSequence hint1,
                                    MyDialogListener listener) {
    ConfigBean bean = new ConfigBean();
    bean.context = context;
    bean.listener = listener;
    bean.title = title;
    bean.hint1 = hint1;
    bean.type = DefaultConfig.INPUT_DIALOG;
    bean.buildByType(bean);
    return bean;
}

@Override
public ConfigBean assignMdSingleChoose(Context context, CharSequence title, ArrayList<ChooseBean> list,
                                       MyItemDialogListener listener) {
    ConfigBean bean = new ConfigBean();
    bean.context = context;
    bean.title = title;
    bean.itemListener = listener;
    bean.type = DefaultConfig.SINGLE_DIALOG;
    bean.chooseBeans.addAll(list);
    bean.buildByType(bean);
    return bean;
}

@Override
public ConfigBean assignMdMultiChoose(Context context, CharSequence title, ArrayList<ChooseBean> list,
                                      MyCheckBoxItemDialogListener checkboxListener) {
    ConfigBean bean = new ConfigBean();
    bean.context = context;
    bean.msg = title;
    bean.title = title;
    bean.checkBoxItemDialogListener = checkboxListener;
    bean.type = DefaultConfig.MULTI_DIALOG;
    bean.chooseBeans.addAll(list);
    bean.buildByType(bean);

    return bean;
}

新建MyDialogBuilder,实现不同dialog的生成

/**
 * 根据dialog类型,生成不同类型的dialog
 *
 * @param bean bean
 * @return configbean
 */
public ConfigBean buildByType(ConfigBean bean) {

    switch (bean.type) {
        case DefaultConfig.ALERT_DIALOG:
            buildMdAlert(bean);

            break;
        case DefaultConfig.INPUT_DIALOG:
            buildMdInput(bean);

            break;
        case DefaultConfig.SINGLE_DIALOG:
            buildMdSingleChoose(bean);

            break;
        case DefaultConfig.MULTI_DIALOG:
            buildMdMultiChoose(bean);
            break;
        default:
            break;
    }
    return bean;
}

/**
 * 生成alert dialog
 *
 * @param bean bean
 * @return ConfigBean
 */
protected ConfigBean buildMdAlert(final ConfigBean bean) {
    CommonDialog commonDialog = new CommonDialog(bean.context);
    Component component = LayoutScatter.getInstance(bean.context).parse(ResourceTable.Layout_alert_dialog_layout,
            null, false);
    commonDialog.setContentCustomComponent(component);
    commonDialog.setTransparent(true);
    Text titleTV = (Text) component.findComponentById(ResourceTable.Id_alert_dialog_title);
    titleTV.setText(bean.title.toString());
    Text messageTV = (Text) component.findComponentById(ResourceTable.Id_alert_dialog_message);
    messageTV.setText(bean.msg.toString());
    Button ok = (Button) component.findComponentById(ResourceTable.Id_alert_dialog_ok);
    ok.setClickedListener(component1 -> {
        bean.listener.positiveButton();
    });
    Button cancle = (Button) component.findComponentById(ResourceTable.Id_alert_dialog_cancle);
    cancle.setClickedListener(component1 -> {
        bean.listener.negativeButton();
    });
    bean.commonDialog = commonDialog;
    return bean;
}

/**
 * 生成input dialog
 *
 * @param bean bean
 * @return ConfigBean
 */
protected ConfigBean buildMdInput(final ConfigBean bean) {

    CommonDialog commonDialog = new CommonDialog(bean.context);
    Component component =
            LayoutScatter.getInstance(bean.context).parse(ResourceTable.Layout_input_dialog_layout, null,
                    false);
    commonDialog.setContentCustomComponent(component);
    commonDialog.setTransparent(true);
    Text titleTV = (Text) component.findComponentById(ResourceTable.Id_input_dialog_title);
    titleTV.setText(bean.title.toString());
    TextField messageTV = (TextField) component.findComponentById(ResourceTable.Id_input_dialog_text_field);
    messageTV.setHint(bean.hint1.toString());
    Button ok = (Button) component.findComponentById(ResourceTable.Id_input_dialog_ok2);
    ok.setClickedListener(component1 -> {
        bean.listener.positiveButton();
    });
    Button cancle = (Button) component.findComponentById(ResourceTable.Id_input_dialog_cancle);
    cancle.setClickedListener(component1 -> {
        bean.listener.negativeButton();
    });
    bean.commonDialog = commonDialog;
    return bean;
}

/**
 * 生成单选dialog
 *
 * @param bean bean
 * @return ConfigBean
 */
protected ConfigBean buildMdSingleChoose(final ConfigBean bean) {
    CommonDialog commonDialog = new CommonDialog(bean.context);
    Component component =
            LayoutScatter.getInstance(bean.context).parse(ResourceTable.Layout_single_choose_dialog_layout, null,
                    false);
    commonDialog.setTransparent(true);
    Text titleTv = (Text) component.findComponentById(ResourceTable.Id_single_dialog_title);
    titleTv.setText(bean.title.toString());
    RadioContainer radioContainer = (RadioContainer) component.findComponentById(ResourceTable.Id_radio_container);
    Resource selectResource = null;
    Resource emptyResource = null;
    try {
        selectResource = bean.context.getResourceManager().getResource(ResourceTable.Media_select);
        emptyResource = bean.context.getResourceManager().getResource(ResourceTable.Media_unselect);
    } catch (IOException e) {
        e.printStackTrace();
    } catch (NotExistException e) {
        e.printStackTrace();
    }

    PixelMapElement selectElement = new PixelMapElement(selectResource);
    PixelMapElement emptyElement = new PixelMapElement(emptyResource);

    for (int i = 0; i < bean.chooseBeans.size(); i++) {
        ChooseBean chooseBean = bean.chooseBeans.get(i);
        RadioButton radioButton = new RadioButton(bean.context);
        radioButton.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT);
        radioButton.setHeight(150);
        radioButton.setTextSize(50);
        radioButton.setText(chooseBean.getTxt().toString());
        radioButton.setButtonElement(null);
        if (chooseBean.isChoosen()) {
            radioButton.setSelected(true);
        } else {
            radioButton.setSelected(false);
        }
        StateElement checkElement = new StateElement();
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_SELECTED}, selectElement);
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, emptyElement);
        radioButton.setAroundElements(checkElement, null, null, null);
        radioContainer.addComponent(radioButton);
    }
    radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
        @Override
        public void onCheckedChanged(RadioContainer r, int i) {
            for (int j = 0; j < bean.chooseBeans.size(); j++) {
                RadioButton radioButton1 = (RadioButton) r.getComponentAt(j);
                if (j == i) {
                    radioButton1.setSelected(true);
                    bean.itemListener.onItemClick(bean.chooseBeans.get(i).getTxt(), i);
                } else {
                    radioButton1.setSelected(false);
                }
            }
        }
    });

    Button ok = (Button) component.findComponentById(ResourceTable.Id_single_dialog_ok);
    ok.setClickedListener(component1 -> {
        bean.itemListener.positiveButton();
    });
    Button cancle = (Button) component.findComponentById(ResourceTable.Id_single_dialog_cancle);
    cancle.setClickedListener(component1 -> {
        bean.itemListener.negativeButton();
    });

    component.invalidate();
    commonDialog.setContentCustomComponent(component);
    bean.commonDialog = commonDialog;


    return bean;
}

/**
 * 生成多选dialog
 *
 * @param bean bean
 * @return ConfigBean
 */
protected ConfigBean buildMdMultiChoose(final ConfigBean bean) {
    CommonDialog commonDialog = new CommonDialog(bean.context);
    Component component =
            LayoutScatter.getInstance(bean.context).parse(ResourceTable.Layout_multi_choose_dialog_layout, null,
                    false);

    commonDialog.setTransparent(true);
    DirectionalLayout layout = (DirectionalLayout) component.findComponentById(ResourceTable.Id_checkbox_layout);
    Resource selectResource = null;
    Resource emptyResource = null;
    try {
        selectResource = bean.context.getResourceManager().getResource(ResourceTable.Media_checkbox_select);
        emptyResource = bean.context.getResourceManager().getResource(ResourceTable.Media_checkbox_unselect);
    } catch (IOException e) {
        e.printStackTrace();
    } catch (NotExistException e) {
        e.printStackTrace();
    }

    PixelMapElement selectElement = new PixelMapElement(selectResource);
    PixelMapElement emptyElement = new PixelMapElement(emptyResource);

    for (int i = 0; i < bean.chooseBeans.size(); i++) {
        ChooseBean chooseBean = bean.chooseBeans.get(i);
        Checkbox checkbox = new Checkbox(bean.context);
        checkbox.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT);
        checkbox.setHeight(150);
        checkbox.setTextSize(50);
        checkbox.setText(chooseBean.getTxt().toString());

        if (chooseBean.isChoosen()) {
            checkbox.setChecked(true);

        } else {
            checkbox.setChecked(false);
        }

        checkbox.setButtonElement(null);
        checkbox.setTag(i);

        StateElement checkElement = new StateElement();
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, selectElement);
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, emptyElement);
        checkbox.setAroundElements(checkElement, null, null, null);
        checkbox.setCheckedStateChangedListener((absButton, state) -> {
            absButton.setChecked(state);

            absButton.setAroundElements(checkElement, null, null, null);
            bean.checkBoxItemDialogListener.onItemClick((Checkbox) absButton, (int) absButton.getTag());
        });

        layout.addComponent(checkbox);
    }

    Button ok = (Button) component.findComponentById(ResourceTable.Id_multi_dialog_ok);
    ok.setClickedListener(component1 -> {
        bean.checkBoxItemDialogListener.positiveButton();
    });
    Button cancle = (Button) component.findComponentById(ResourceTable.Id_multi_dialog_cancle);
    cancle.setClickedListener(component1 -> {
        bean.checkBoxItemDialogListener.negativeButton();
    });
    component.invalidate();
    commonDialog.setContentCustomComponent(component);
    bean.commonDialog = commonDialog;
    return bean;
}

新建监听接口MyDialogListener、MyItemDialogListener、MyCheckBoxItemDialogListener

编译HAR包

利用Gradle可以将HarmonyOS Library库模块构建为HAR包,构建HAR包的方法如下:

在Gradle构建任务中,双击PackageDebugHar或PackageReleaseHar任务,构建Debug类型或Release类型的HAR。

待构建任务完成后,可以在工程目录中的styledialog> bulid > outputs > har目录中,获取生成的HAR包。

【软通动力】HarmonyOS三方件开发指南(20)-Dialog组件-开源基础软件社区

更多原创,请关注:软通动力HarmonyOS学院https://harmonyos.51cto.com/column/30

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-6-22 15:47:21修改
25
收藏 25
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐