Skip to content

MessageDialog&InputDialog_en

Kongzue edited this page Sep 14, 2024 · 5 revisions

🌐 View 简体中文文档 | 繁體中文文檔

💬 Basic Dialogs: MessageDialog and InputDialog

Basic Dialogs: MessageDialog and InputDialog

The basic dialog component can implement basic dialog business logic, including a title, message text, and single/double/triple button reminder functions. The three buttons can be displayed vertically or horizontally to meet most daily interruptive reminder needs.

InputDialog is an extension component of the basic dialog, which, in addition to the basic functions, also provides an input box. It allows customization of input prompt text, input text style, and callback for content entered upon button click.

Displaying a Simple Message Dialog

Use the following code to display a dialog:

MessageDialog.show("Title", "Body Content", "Confirm");

Please note, both title and body content can be passed as null, in which case the corresponding text layout will not be displayed.

To display a dialog with multiple buttons:

MessageDialog.show("Title", "Body Content", "Confirm", "Cancel", "Other");

If you need to display the buttons vertically, you can set it with the following code:

MessageDialog messageDialog = new MessageDialog("Title", "Body Content", "Confirm", "Cancel", "Other")
        .setButtonOrientation(LinearLayout.VERTICAL);
messageDialog.show();

Constructing a Dialog

As you can see from the code above, dialog components can be directly created and displayed using the .show(...) static method, or by using new. Additionally, to create an empty dialog, you can instantiate a dialog object using MessageDialog.build().

If your project includes multiple themes and you need to temporarily change the theme of a particular dialog, or temporarily change the light and dark mode of the dialog, then you must create it using a non-"show" method, modify the theme or color, and then display it, as follows:

MessageDialog.build()
        .setStyle(IOSStyle.style())
        .setTheme(DialogX.THEME.DARK)
        .setTitle("Title")
        .setMessage("Content")
        .setOkButton("Confirm")
        .show();

In addition, you can also use the new command to build MessageDialog and InputDialog. DialogX dialogs support multiple construction methods, giving you freedom and flexibility.

new MessageDialog()
        .setTitle("Title")
        .setMessage("Content")
        .setOkButton("Confirm")
        .show();

Button Click Callbacks

Button callbacks can be set through methods:

MessageDialog.show("Title", "Body Content", "Confirm").setOkButton(new OnDialogButtonClickListener<MessageDialog>() {
    @Override
    public boolean onClick(MessageDialog baseDialog, View v) {
        toast("Clicked Confirm button");
        return false;
    }
});

The callback has a return value. If return true, the dialog will not close automatically after the button is clicked.

Moreover, DialogX provides various methods for setting callbacks and button text:

// Set button text only
.setOkButton("Confirm")

// Set button click callback only
.setOkButton(new OnDialogButtonClickListener<MessageDialog>() {
    @Override
    public boolean onClick(MessageDialog baseDialog, View v) {
        toast("Clicked Confirm button");
        return false;
    }
});

// Set button text and callback
.setOkButton("Confirm", new OnDialogButtonClickListener<MessageDialog>() {
    @Override
    public boolean onClick(MessageDialog baseDialog, View v) {
        toast("Clicked Confirm button");
        return false;
    }
});

// Hide the button
.setOkButton(null)

Feel free to use according to personal preference.

Getting User Selection Status

If your business process does not need to immediately process the user's operation, but needs to know which button the user chose, you can also hold the dialog handle and later get the selection status, for example:

private MessageDialog dialog;

// Simulate business process, create and display a dialog, but do not immediately process click event
dialog = MessageDialog.show("Title", "Ask Question", "OK", "NO", "OTHER");

// When needed, you can get which button was clicked by the user using the getButtonSelectResult() method
BUTTON_SELECT_RESULT result = dialog.getButtonSelectResult();

BUTTON_SELECT_RESULT is an enumeration, containing the following types:

NONE,           // No selection made
BUTTON_OK,      // OK button selected
BUTTON_CANCEL,  // Cancel button selected
BUTTON_OTHER    // Other button selected

You can determine which button was clicked based on its state.

Based on this feature, if the business process involves the same part of the code needing to be executed regardless of which option the user chooses, then the developer can also uniformly process the user's choice after the selection, for example, in the `DialogLifecycle

#onDismiss` dialog closing event, reducing redundant code.

Input Dialog Button Click Callback

The callback for InputDialog is slightly different from MessageDialog. In the callback parameters, the input text content is given, facilitating direct judgment and retrieval of the input text:

new InputDialog("Title", "Body Content", "Confirm", "Cancel", "Text Being Typed")
        .setCancelable(false)
        .setOkButton(new OnInputDialogButtonClickListener<InputDialog>() {
            @Override
            public boolean onClick(InputDialog baseDialog, View v, String inputStr) {
                toast("Input Content: " + inputStr);
                return false;
            }
        })
        .show();

Additionally, you can also use inputDialog.getInputText() to get the input text content.

Lifecycle Callbacks

To monitor the lifecycle of the dialog, implement its .setDialogLifecycleCallback(...) interface. It's recommended to build the dialog using the build() method:

MessageDialog.build()
        .setDialogLifecycleCallback(new DialogLifecycleCallback<MessageDialog>() {
            @Override
            public void onShow(MessageDialog dialog) {
                // Callback when the dialog is launched
            }
            @Override
            public void onDismiss(MessageDialog dialog) {
                // Callback when the dialog is closed
            }
        })
        .show();

MessageDialog/InputDialog also supports Lifecycle. You can get the Lifecycle object using .getLifecycle().

You can also handle lifecycle events by overriding lifecycle events when building instances using new, for example:

// Demonstration of event override
new MessageDialog() {
    @Override
    public void onShow(MessageDialog dialog) {
        //...
        tip("onShow");
    }
    @Override
    public void onDismiss(MessageDialog dialog) {
        //...
        tip("onDismiss");
    }
}

You can also use the methods .onShow(DialogXRunnable) and .onDismiss(DialogXRunnable) to handle lifecycle transactions, for example:

MessageDialog.show("title", "content", "ok")
        .onShow(new DialogXRunnable<MessageDialog>() {
            @Override
            public void run(MessageDialog dialog) {
                //MessageDialog show!
            }
        })
        .onDismiss(new DialogXRunnable<MessageDialog>() {
            @Override
            public void run(MessageDialog dialog) {
                //MessageDialog dismiss!
            }
        })
        .show();

Custom Layout

To include a custom layout in the dialog, first prepare your custom layout file, then build using the following method:

MessageDialog.show("This is the Title", "This dialog demonstrates the effect of a custom dialog inner layout", "Confirm", "Cancel")
        .setCustomView(new OnBindView<MessageDialog>(R.layout.layout_custom_view) {
            @Override
            public void onBind(MessageDialog dialog, View v) {
                //View childView = v.findViewById(resId)...
            }
        });

In the callback parameters, v is the instantiated component of your given layout file. You can instantiate other child layout components through v.findViewById(resId) and set their functionality and event callbacks in the onBind method.

If you are using ViewBinding, you can also replace it with OnBindingView to get the layout instance directly through binding:

MessageDialog.show("This is the Title", "This dialog demonstrates the effect of a custom dialog inner layout", "Confirm", "Cancel")
        .setCustomView(new OnBindingView<MessageDialog, LayoutCustomViewBinding>() {
            @Override
            public void onBind(MessageDialog dialog, View view, LayoutCustomViewBinding binding) {
                //View childView = binding.childView
            }
        });

Custom Enter and Exit Animations

To customize the animation for a single display of a dialog, use the following method:

MessageDialog.build()
        .setTitle("Title")
        .setMessage("Here is the body content.")
        .setOkButton("Confirm")
        .setCancelButton("Cancel")
        // Set entrance and exit animation resources
        .setAnimResId(R.anim.anim_dialogx_bottom_enter, R.anim.anim_dialogx_bottom_exit)
        .show();

To customize animation files, refer to: Default Dialog Start Animation File and Default Dialog Exit Animation File

Additionally, besides .setAnimResId(enterAnimResId, exitAnimResId), there are also .setEnterAnimResId(enterAnimResId) and .setExitAnimResId(enterAnimResId) methods available, applicable only to a single display of a dialog.

You can also set the duration of the entrance animation with setEnterAnimDuration([long]) and the exit animation with .setExitAnimDuration([long]).

Modifying the Global Animation for MessageDialog and InputDialog:

You can directly modify the global animation for MessageDialog and InputDialog through static properties:

// Set the global entrance animation for MessageDialog
MessageDialog.overrideEnterAnimRes = R.anim.anim_dialogx_bottom_enter;
// Set the global exit animation for MessageDialog
MessageDialog.overrideExitAnimRes = R.anim.anim_dialogx_bottom_exit;
// Set the global entrance animation duration for MessageDialog
MessageDialog.overrideEnterDuration = 1000;
// Set the global exit animation duration for MessageDialog
MessageDialog.overrideExitDuration = 1000;

Modifications to the animations of MessageDialog and InputDialog that are effective globally:

You can directly modify the global animations for MessageDialog and InputDialog through static properties:

// Set the global enter animation for MessageDialog
MessageDialog.overrideEnterAnimRes = R.anim.anim_dialogx_bottom_enter;
// Set the global exit animation for MessageDialog
MessageDialog.overrideExitAnimRes = R.anim.anim_dialogx_bottom_exit;
// Set the duration of the global enter animation for MessageDialog
MessageDialog.overrideEnterDuration = 1000;
// Set the duration of the global exit animation for MessageDialog
MessageDialog.overrideExitDuration = 1000;

Modifications through custom themes

You can also completely customize the default animation effects of the global dialog boxes by referring to the custom theme interface. For details, please consult 《Custom DialogX Themes》

Please note that these three settings have different priorities: The priority of modifications to animations for a single dialog display > Global modifications for MessageDialog, InputDialog animations > Custom theme modifications.

Additional Methods

// Force a refresh of the interface
.refreshUI();

// Close the dialog
.dismiss();

// Set whether clicking outside the area or the back button is allowed to close the dialog
.setCancelable(boolean);

// Set the title text style
.setTitleTextInfo(TextInfo);

// Set the message text style
.setMessageTextInfo(TextInfo);

// Set the button text style
.setOkTextInfo(TextInfo);
.setCancelTextInfo(TextInfo);
.setOtherTextInfo(TextInfo);

// Set the button orientation, buttonOrientation can be LinearLayout.VERTICAL or LinearLayout.HORIZONTAL
.setButtonOrientation(buttonOrientation);

// Set the back button callback
.setOnBackPressedListener(OnBackPressedListener);

// Get the dialog instance object, you can customize the Dialog features more deeply through this method
.getDialogImpl()

// Get the custom layout instance
.getCustomView()

// Set the background color, forcibly dye the dialog background. Note that the parameter is an int type color value, not an R.color index
.setBackgroundColor(ColorInt);

// InputDialog auto-popup keyboard
.setAutoShowInputKeyboard(boolean)

// InputDialog set default input text style
.setInputInfo(InputInfo)

// Set dialog corner radius (will crop content display)
.setRadius(float px)

// Hide the dialog (no animation), to show again, execute the non-static method .show()
.hide();

// Hide the dialog (simulate the close dialog animation), to show again, execute the non-static method .show()
.hideWithExitAnim();

// Check if it is currently displayed
.isShow()

// Set placeholder text
.setInputHintText("Hint Text")

// Front dialog box display hierarchy
.bringToFront()

// Specify the level of dialog display
.setThisOrderIndex(int)

Background Mask

MessageDialog supports modifying the background mask for added flexibility. To set the background mask, you can use the following code:

messageDialog.setMaskColor(colorInt);

Please note, the parameter is a ColorInt value. You can use Color.parseColor("#4D000000") to set a HEX color value, or getResources().getColor(R.color.black30) to set a color resource value.

Additional Components

TextInfo

TextInfo is used to store basic text style settings, including a series of properties and their respective get/set methods, explained as follows:

Property Explanation Default Value
fontSize Font size, -1 for default style, unit: dp -1
gravity Alignment, -1 for default style, can use values like Gravity.CENTER -1
fontColor Text color, 1 for default style, can use Color.rgb(r,g,b) to get value 1
bold Whether it's bold false

Note that fontColor is a ColorInt value. You can use Color.parseColor("#4D000000") to set a HEX color value, or a resource getResources().getColor(R.color.black30) to set a color resource value. Do not directly pass in a resource ID as it might not work.

InputInfo

InputInfo is used for custom settings of input content, including a series of properties and their respective get/set methods, explained as follows:

Property Explanation Default Value
MAX_LENGTH Maximum length, -1 for no effect -1
inputType Custom input type, types detailed in android.text.InputType
textInfo Default font style (TextInfo)
multipleLines Whether to support multiple lines false
selectAllText

| Default select all text (for ease of modification) | false | | cursorColor | Cursor color of the input box | | | bottomLineColor | Input box bottom line color (note some themes may affect background color) | |

Note that cursorColor and bottomLineColor are ColorInt values. You can use Color.parseColor("#4D000000") to set a HEX color value, or a resource getResources().getColor(R.color.black30) to set a color resource value. Do not directly pass in a resource ID as it might not work.

Specifying Styles Individually

If your app includes multiple themes and you need the dialog to display in a specific non-global theme style in certain scenarios, you can use .build() to construct the dialog, then use .setStyle(style) to specify the theme style, and finally execute .show() to display the dialog, as follows:

MessageDialog.build()
        // or directly use .build(IOSStyle.style())
        .setStyle(IOSStyle.style())
        .setTitle("Title")
        .setMessage("Message content.")
        .setOkButton("OK")
        .show();
Clone this wiki locally