鴻蒙HarmonyOS三方件開發(fā)指南(20)-Dialog組件

作者：軟通田可輝 2021-06-28 14:48:03

Dialog組件是一個顯示不同風格的自定義對話框組件，目前支持十一種風格的顯示。

https://harmonyos.51cto.com

HarmonyOS三方件開發(fā)指南自一月份上線以來，已經連續(xù)更新了十九期了。今天所發(fā)這篇文章將作為三方件開發(fā)指南第一期的收官之作。我慶幸社區(qū)有這么多志同道合的開發(fā)者們關注我的文章，關于三方件的講解或許對你有所幫助，或許你有更好的建議或想法，都可以來告訴我們。

HarmonyOS的未來是強大的，因為我們廣大開發(fā)者是強大的，是自信的，我也祝福各位開發(fā)者們立“鴻”鵠之志，逐夢未來!

Dialog組件功能介紹

功能介紹

Dialog組件是一個顯示不同風格的自定義對話框組件，目前支持十一種風格的顯示。

模擬器上運行效果

【軟通動力】HarmonyOS三方件開發(fā)指南(20)-Dialog組件-鴻蒙HarmonyOS技術社區(qū)

Dialog使用方法

新建工程，增加組件Har包依賴

在應用模塊中添加HAR，只需要將dialoglibrary-debug.har復制到entry\libs目錄下即可(由于build.gradle中已經依賴的libs目錄下的*.har，因此不需要在做修改)。

修改配置文件

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

在代碼中使用

  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開發(fā)實現

新建一個Module

新建一個Module，類型選擇HarmonyOS Library，模塊名為dialoglibrary，如圖

實現類

新建一個StyleDialog類，添加靜態(tài)方法，代碼如下：

/** 
 * @param context  context 
 * @param title    對話框的title 
 * @param msg      對話框的提示信息 
 * @param listener 對話框 ok 和 cancle 的點擊監(jiān)聽事件 
 * @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 的點擊事件的監(jiān)聽 
 * @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 的點擊監(jiān)聽事件 
 * @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 的點擊監(jiān)聽事件 
 * @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; 
}