Skip to content

CustomDialog_en

Kongzue edited this page Oct 17, 2024 · 8 revisions

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

📐 CustomDialog

Custom Dialog CustomDialog

CustomDialog is a dialog component with a high degree of customization freedom, completely implemented by the user. CustomDialog offers the ALIGN option for easy customization of dialog pop-up modes, supporting three default pop-up modes from the center, bottom, and top of the screen, along with corresponding animation effects. Users can also customize animation effects.

Displaying a Simple Custom Dialog

First, prepare a custom layout, then use the following code to display a custom dialog:

CustomDialog.show(new OnBindView<CustomDialog>(R.layout.layout_custom_dialog) {
    @Override
    public void onBind(final CustomDialog dialog, View v) {
        ImageView btnOk;
        btnOk = v.findViewById(R.id.btn_ok);
        btnOk.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });
    }
});

The above code demonstrates how to bind instantiated components and set events in the onBind callback method.

You can also use the build() method to construct CustomDialog:

CustomDialog.build()
    .setCustomView(new OnBindView<CustomDialog>(R.layout.layout_custom_dialog) {
        @Override
        public void onBind(final CustomDialog dialog, View v) {
            ImageView btnOk;
            btnOk = v.findViewById(R.id.btn_ok);
            btnOk.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dialog.dismiss();
                }
            });
        }
    })
    .show();

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

FullScreenDialog.show(new OnBindingView<FullScreenDialog, LayoutCustomViewBinding>() {
            @Override
            public void onBind(FullScreenDialog dialog, View view, LayoutCustomViewBinding binding) {
                //View childView = binding.childView
            }
        });

Custom Options for CustomDialog

CustomDialog supports settings for dialog display from the top/bottom/center of the screen with different Align settings, accompanied by different default launch animations. For example, a dialog launched from the center of the screen uses the default message dialog animation, while top/bottom display and closure use slide-down/slide-up translation + fade animations. Custom animation effects can also be set if needed.

Set Align to modify the launch mode of CustomDialog:

CustomDialog.show(...)
    .setAlign(ALIGN.TOP);

ALIGN is an enumeration, with values defined as follows:

CENTER			Central display (default)
TOP				Top display (equivalent to top center)
TOP_CENTER		Top center display
TOP_LEFT		Top left display
TOP_RIGHT		Top right display
BOTTOM			Bottom display (equivalent to bottom center)
BOTTOM_CENTER	Bottom center display
BOTTOM_LEFT		Bottom left display
BOTTOM_RIGHT	Bottom right display
LEFT			Left display (equivalent to left center)
LEFT_CENTER		Left center display
LEFT_TOP		Left top display
LEFT_BOTTOM		Left bottom display
RIGHT			Right display (equivalent to right center)
RIGHT_CENTER	Right center display
RIGHT_TOP		Right top display
RIGHT_BOTTOM	Right bottom display

Please note: For example, the difference between TOP_LEFT and LEFT_TOP is in the direction of the entrance and exit animations. The animation for top left display enters from the top of the screen, positioned on the left, whereas left top display enters from the left, positioned at the top.

You can also customize the launch/close animations by using custom anim resource files:

CustomDialog.build()
    .setCustomView(...)
    .setEnterAnimResId(R.anim.enter_anim)
    .setExitAnimResId(R.anim.exit_anim)
    .show();

Or:

CustomDialog.build()
    .setCustomView(...)
    .setAnimResId(R.anim.enter_anim, R.anim.exit_anim)
    .show();

Please note that launch animations must be set before the dialog starts, that is, using the build() method to construct the dialog.

Display Based on View Position

You can specify an existing view on the interface, making CustomDialog display around its position

.setAlignBaseViewGravity(btnCustomDialogAlign, Gravity.TOP)

alignGravity can specify TOP, LEFT, RIGHT, BOTTOM and be combined with CENTER_VERTICAL, CENTER_HORIZONTAL for relative horizontal or vertical centering, or set to completely center CENTER. The display effect is as follows:

Display Based on View Position

  • Note: This method will set CustomDialog to full-screen mode (setFullScreen(true)).

Additionally, you can specify the margin between the view and the dialog when displayed based on view position:

.setBaseViewMargin(marginLeft, marginTop, marginRight, marginBottom)

You can also specify separately:

.setBaseViewMarginLeft(marginLeft)

Background Mask

CustomDialog does not implement dialog background masks by default, to enhance extensibility. If a background mask is needed, you can set it using the following code:

customDialog.setMaskColor(colorInt);

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

Immersive Mode

CustomDialog by default enables immersive non-safe area isolation mode, meaning it sets a padding in the root layout, separating the top status bar and bottom navigation bar's untouchable non-safe area, ensuring the custom layout is always within the safe area. However, this may conflict with your immersive framework, or if no immersive mode is configured (i.e., both the top navigation bar and bottom status bar are non-immersive), leading to extra space in the top/bottom display of CustomDialog. In such cases, you can use the following setting to disable immersive padding:

CustomDialog.build()
    .setCustomView(...)
    . setEnableImmersiveMode(false)
    .show();

Please note, setEnableImmersiveMode(Boolean) must be set before the dialog starts, that is, using the build() method to construct the dialog.

Lifecycle Callbacks

To monitor the lifecycle of a dialog, you can implement the .setDialogLifecycleCallback(...) interface. It's recommended to use the build() method to construct the dialog:

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

CustomDialog also supports Lifecycle. You can get the Lifecycle object using .getLifecycle().

You can also handle lifecycle events by overriding them when creating an instance using new, for example:

// Event overriding demonstration
new CustomDialog() {
    @Override
    public void onShow(CustomDialog dialog) {
        //...
        tip("onShow");
    }
    @Override
    public void onDismiss(CustomDialog dialog) {
        //...
        tip("onDismiss");
    }
}

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

CustomDialog.show(...)
        .onShow(new DialogXRunnable<CustomDialog>() {
            @Override
            public void run(CustomDialog dialog) {
                //CustomDialog show!
            }
        })
        .onDismiss(new DialogXRunnable<CustomDialog>() {
            @Override
            public void run(CustomDialog dialog) {
                //CustomDialog dismiss!
            }
        });

Additional Methods

// Force refresh the interface
.refreshUI();

// Close the dialog
.dismiss();

// Get the instantiated dialog object, you can use this method for deeper customization of the Dialog's functionality
.getDialogImpl()

// Get custom layout instance
.getCustomView()
    
// Set dialog width
.setWidth(px)
    
// Set dialog height
.setHeight(px)

// Hide the dialog (without animation), to restore display execute the non-static method .show()
.hide();

// Hide the dialog (simulate closing dialog animation), to restore display execute the non-static method .show()
.hideWithExitAnim();

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

// Make the touch penetrate the mask
.setBkgInterceptTouch(false)

// Front dialog box display hierarchy
.bringToFront()

// Specify the level of dialog display
.setThisOrderIndex(int)
Clone this wiki locally