Dialogs are one of the most frequently used UI controls for Android development. Dialog boxes are familiar to most programmers. However, things get messy when you consider complex interactions, component reuse, customization, and various UI styles. The xDialog is the UI component I designed to integrate all of these scenarios. Compared to most open source libraries, it is more customizable and can meet more application scenarios.

1. Overall design

XDialog is based on Kotlin and also takes the features of KotlinDSL and provides a more user-friendly API. The dialog box is developed based on DialogFragment. In terms of reusability, the head, content and bottom of the dialog box are respectively abstracted and three interfaces are extracted. Therefore, users only need to realize these three interfaces to piece together their own dialog box, which really realizes the random assembly of three parts.

class BeautyDialog : DialogFragment() {

    private var iDialogTitle: IDialogTitle?     = null
    private var iDialogContent: IDialogContent? = null
    private var iDialogFooter: IDialogFooter?   = null

    // ...

    override fun onCreateDialog(savedInstanceState: Bundle?).: Dialog {
        // ...
    }

    @BeautyDialogDSL class Builder {
        private var dialogTitle: IDialogTitle?      = null
        private var dialogContent: IDialogContent?  = null
        private var dialogFooter: IDialogFooter?    = null

        // ...

        /** Specifies the header */ for the dialog box
        fun withTitle(iDialogTitle: IDialogTitle) {
            this.dialogTitle = iDialogTitle
        }

        /** Specifies the content of the dialog */
        fun withContent(iDialogContent: IDialogContent) {
            this.dialogContent = iDialogContent
        }

        /** Specifies the bottom */ for the dialog box
        fun withBottom(iDialogFooter: IDialogFooter) {
            this.dialogFooter = iDialogFooter
        }

        fun build(a): BeautyDialog {
            val dialog = BeautyDialog()
            // ...
            return dialog
        }
    }
}

/** provides a kotlin DSL-style dialog box builder */
inline fun createDialog(
    init: BeautyDialog.Builder. () - >Unit
): BeautyDialog = BeautyDialog.Builder().apply(init).build()
Copy the code

As shown in the code above, the user only needs to implement each part of himself by implementing three interfaces, and then can do the UI replacement at the specified location.

2. Compatible with tablet, mobile phone and landscape screen

Based on the above design ideas, I added several parameters for the builder to meet the needs of the scenarios used at different resolutions. The library has four built-in dialog boxes of different sizes. For the user, it is only necessary to judge the different situations and pass in the specified style according to the situation. And then inside the dialog, you use a different style as the theme of the dialog,

val theme = when(dialogStyle) {
    STYLE_WRAP      -> R.style.BeautyDialogWrap
    STYLE_HALF      -> R.style.BeautyDialogHalf
    STYLE_TWO_THIRD -> R.style.BeautyDialogTwoThird
    else            -> R.style.BeautyDialog
}
val dialog = if (bottomSheet) {
    BottomSheetDialog(requireContext(), theme)
} else {
    AlertDialog.Builder(requireContext(), theme).create()
}
Copy the code

3, compatible with BottomSheet and ordinary dialog box scenarios

A dialog called BottomSheetDialog is available in the Material library provided by Google. This class provides better interaction than normal dialogs. For example, I have a similar interaction effect in my own map. Part of it pops up at the bottom, and then you can drag it up and show it all. This kind of interaction can be very useful in many situations, especially when we don’t want to switch to a new page without having to provide content that might not fit in the normal dialog box. Fewer switching pages and lower levels of operation can provide better user interaction experience.

In xDialog, I added a few parameters to support this scenario,

val dialog = if(bottomSheet) { BottomSheetDialog(requireContext(), theme).apply { halfExpandedRatio? .let {this.behavior.halfExpandedRatio = it } isFitToContents ? .let {this.behavior.isFitToContents = it } peekHeight ? .let {this.behavior.peekHeight        = it }
    }
} else {
    AlertDialog.Builder(requireContext(), theme).create()
}
Copy the code

As a result, users of the library can switch between two different modes of interaction with just a few parameters dynamically.

4, provide dialog box background blur effect

XDialog provides encapsulation for the background blur effect. For this purpose xDialog provides BlurEngine to capture and blur the screen while the Dialog is displayed and display it on the back of the Dialog. The user enabled method is also very simple, just need to pass in a parameter can directly use the background blur effect.

5. Provides default encapsulation and a variety of utility apis

In addition to the encapsulation described above, xDialog provides several default header, content, and bottom implementation classes. Users can use them directly or follow them to achieve their desired effect,

In addition, xDialog provides other apis, such as customizing the display position of the dialog box at the top, middle, or bottom, customizing whether the dialog box can be undone, customizing the dialog box background, listening for the display and hide events of the dialog box, and so on.

other

This is an analysis of the encapsulation of the dialog box. There are a lot of open source libraries for dialog boxes. I just thought this design could be shared. If you need to do related work, you can refer to it. Last source code address,

Source address: https://github.com/Shouheng88/xDialog