鸿蒙HarmonyOS学习笔记之基于CommonDialog实现自定义PromptDialog

效果预览

在虚拟机上运行效果,只能通过点击取消和确定按钮关闭弹窗，在不输入内容时无法使用确定按钮。

一、基本概念

CommonDialog是一种在弹出框消失之前，用户无法操作其他界面内容的对话框。通常用来展示用户当前需要的或用户必须关注的信息或操作。对话框的内容通常是不同组件进行组合布局，如：文本、列表、输入框、网格、图标或图片，常用于选择或确认信息。

二、接口说明

参考官方文档

三、实现

1.PromptDialog 类

package com.tang.draw.dialog;

import com.tang.draw.ResourceTable;
import com.tang.draw.utils.LogUtils;
import ohos.agp.components.*;
import ohos.agp.components.element.PixelMapElement;
import ohos.agp.text.RichText;
import ohos.agp.text.richstyles.ImageRichStyle;
import ohos.agp.text.richstyles.RangedRichStyle;
import ohos.agp.text.richstyles.UnderlineRichStyle;
import ohos.agp.utils.Color;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.CommonDialog;
import ohos.app.Context;
import ohos.global.resource.NotExistException;
import ohos.media.image.ImageSource;
import ohos.media.image.common.PixelFormat;
import ohos.media.image.common.Rect;
import ohos.media.image.common.Size;

import java.io.IOException;

import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT;

/********
 *文件名: PromptDialog
 *创建者: 醉意丶千层梦
 *创建时间:2022/2/9 22:36
 *描述: PromptDialog
 ********/
public class PromptDialog extends CommonDialog {
    private Context mContext;
    private Text titleText;
    private TextField input;
    private Button okBtn,cancelBtn;
    private DialogClickListener dialogClickListener;

    public PromptDialog(Context context) {
        super(context);
        this.mContext =context;

        initComponents();
        initClickedListener();
    }

    private void initClickedListener() {
        okBtn.setClickedListener(this::onClick);
        cancelBtn.setClickedListener(this::onClick);

    }
    public void onClick(Component component) {
        if (component==okBtn){
            LogUtils.info(getClass().getSimpleName()+" --- ok click");
            //关闭dialog
            hide();
            if(dialogClickListener != null){
                dialogClickListener.onOKClick(input.getText());
            }
        }
        else if(component==cancelBtn){
            LogUtils.info(getClass().getSimpleName()+" --- cancel click");
            //关闭dialog
            hide();
            if(dialogClickListener != null){
                dialogClickListener.onCancelClick();
            }
        }
    }

    private void initComponents(){
        Component component= LayoutScatter.getInstance(mContext)
                .parse(ResourceTable.Layout_dialog_prompt,null,true);
        okBtn=component.findComponentById(ResourceTable.Id_btn_ok);
        cancelBtn=component.findComponentById(ResourceTable.Id_btn_cancel);
        input=component.findComponentById(ResourceTable.Id_field_input);
        titleText=component.findComponentById(ResourceTable.Id_text_title);
        okBtn.setEnabled(false);
        input.addTextObserver(new Text.TextObserver() {
            @Override
            public void onTextUpdated(String s, int i, int i1, int i2) {
                if(s==null || s.isEmpty()){
                    okBtn.setEnabled(false);
                }
                else {
                    okBtn.setEnabled(true);
                }
            }
        });

        super.setContentCustomComponent(component);

        //居中
        setAlignment(LayoutAlignment.CENTER);

        setCornerRadius(50);

        //设置高度为自适应,宽度为屏幕的0.8
        setSize(mContext.getResourceManager().getDeviceCapability().width
                * mContext.getResourceManager().getDeviceCapability().screenDensity
                / 160*4/5, MATCH_CONTENT);
    }



    /**
     *按钮接口
     */
    public interface DialogClickListener{
        void onOKClick(String inputData);
        void onCancelClick();
    }

    public void setOnDialogClickListener(DialogClickListener clickListener){
        dialogClickListener = clickListener;
    }
}

2.Dialog整体布局dialog_prompt.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:left_margin="5vp"
    ohos:orientation="vertical"
    ohos:right_margin="5vp">


    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="#fffffff"
        ohos:orientation="vertical"

        >

        <Text
            ohos:id="$+id:text_title"
            ohos:height="50vp"
            ohos:width="match_parent"
            ohos:text="提示"
            ohos:text_size="20fp"
            ohos:text_alignment="center"
            ohos:bottom_margin="2vp"
            ></Text>

        <TextField
            ohos:id="$+id:field_input"
            ohos:height="50vp"
            ohos:width="match_parent"
            ohos:top_margin="20vp"
            ohos:bottom_margin="10vp"
            ohos:left_margin="20vp"
            ohos:right_margin="20vp"
            ohos:left_padding="10vp"
            ohos:hint="请输入"
            ohos:text_color="#000000"
            ohos:text_size="20fp"
            ohos:text_alignment="vertical_center"
            ohos:background_element="$graphic:background_field_input"
            >
        </TextField>

        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:background_element="#ffffff"
            ohos:top_padding="5vp"
            ohos:bottom_padding="5vp"
            ohos:bottom_margin="20vp"
            ohos:orientation="horizontal"
            ohos:top_margin="20vp"
            ohos:layout_alignment="center"
            >

            <Button
                ohos:id="$+id:btn_cancel"
                ohos:height="45vp"
                ohos:width="0vp"
                ohos:weight="1"
                ohos:left_margin="20vp"
                ohos:right_margin="10vp"
                ohos:text="取消"
                ohos:text_color="#D0BE76"
                ohos:text_size="15fp"

                ohos:background_element="$graphic:button_confirm_dialog_cancel"
                >

            </Button>

            <Button
                ohos:id="$+id:btn_ok"
                ohos:height="45vp"
                ohos:width="0vp"
                ohos:weight="1"
                ohos:left_margin="10vp"
                ohos:right_margin="20vp"
                ohos:background_element="$graphic:button_confirm_dialog_ok"
                ohos:text="确定"
                ohos:text_color="#DCC8A1"
                ohos:text_size="15fp"
                >

            </Button>
        </DirectionalLayout>
    </DirectionalLayout>

</DirectionalLayout>

3.按钮点击效果

component_state_empty要在最后一个,不然会没效果

button_confirm_dialog_ok.xml

<?xml version="1.0" encoding="utf-8"?>
<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <item ohos:state="component_state_pressed"
          ohos:element="$graphic:button_state_pressed_confirm_dialog_ok">

    </item>
    <item ohos:state="component_state_empty"
          ohos:element="$graphic:button_state_natural_confirm_dialog_ok">

    </item>
</state-container>

button_state_natural_confirm_dialog_ok.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">

    <corners ohos:radius="2vp">

    </corners>

    <solid ohos:color="$color:gray_515151">

    </solid>

    <stroke
        ohos:width="1vp"
        ohos:color="$color:gray_515151"/>

    <bounds ohos:top="1vp"></bounds>
</shape>

button_state_pressed_confirm_dialog_ok.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">

    <corners ohos:radius="2vp">

    </corners>

    <solid ohos:color="$color:gray_2C2C2C">

    </solid>

    <stroke
        ohos:width="1vp"
        ohos:color="$color:gray_2C2C2C"/>

    <bounds ohos:top="1vp"></bounds>
</shape>

button_confirm_dialog_cancel.xml

<?xml version="1.0" encoding="utf-8"?>
<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <item ohos:state="component_state_pressed"
          ohos:element="$graphic:button_state_pressed_confirm_dialog_cancel">

    </item>
    <item ohos:state="component_state_empty"
          ohos:element="$graphic:button_state_natural_confirm_dialog_cancel">

    </item>
</state-container>

button_state_natural_confirm_dialog_cancel.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">

    <corners ohos:radius="2vp">

    </corners>

    <solid ohos:color="$color:white_FFFFFF">

    </solid>

    <stroke
        ohos:width="1vp"
        ohos:color="$color:gray_CDCDCD"/>

    <bounds ohos:top="1vp"></bounds>
</shape>

button_state_pressed_confirm_dialog_cancel.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">

    <corners ohos:radius="2vp">

    </corners>

    <solid ohos:color="$color:white_DFDFDF">

    </solid>

    <stroke
        ohos:width="1vp"
        ohos:color="$color:white_DFDFDF"/>

    <bounds ohos:top="1vp"></bounds>
</shape>

4.预览

四、使用

 PromptDialog promptDialog=new PromptDialog(this);
 promptDialog.setOnDialogClickListener(new PromptDialog.DialogClickListener() {
	    @Override
	    public void onOKClick(String inputData) {
	        addBtn.setText(inputData);
	    }
	
	    @Override
	    public void onCancelClick() {
	
	    }
	});
promptDialog.show();