HarmonyOS三方件开发指南(20)-Dialog组件

Mike

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

　　Dialog组件功能介绍
　　功能介绍
　　Dialog组件是一个显示不同风格的自定义对话框组件，目前支持十一种风格的显示。
　　模拟器上运行效果

　　Dialog使用方法
　　新建工程，增加组件Har包依赖
　　在应用模块中添加HAR，只需要将dialoglibrary-debug.har复制到entry\libs目录下即可（由于build.gradle中已经依赖的libs目录下的*.har，因此不需要在做修改）。
　　修改配置文件
　　在entry下面的build.gradle添加library 的依赖
　　
　　在代码中使用
　　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，如图

　　实现类
　　新建一个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学院https://harmonyos.51cto.com/column/30

　　

[HarmonyOS] HarmonyOS三方件开发指南(20)-Dialog组件

相关帖子

HarmonyOS应用开发：鸿蒙自定义组件slot插槽，体现的更强大！

MySQL让人又爱又恨的多表查询

HarmonyOS应用开发：鸿蒙Js实战，计算器功能开发！

龙蜥开发者说：我眼里的龙蜥社区：一个包容的大家庭 | 第 10 期

腾讯视频扫码在哪里找到

电脑关不了机按哪个键可以关机?

电脑竖屏了变回来如何操作

迅雷影音关闭弹幕步骤

ModelBox开发体验：使用YOLOv3做口罩检测

HarmonyOS 3发布，华为帐号为用户带来协同一致的多设备智慧体验

Mike LV4