An beautiful and easy to use dialog library for Android

Related tags

Dialog xDialog
Overview
================================================================================================
                    88888888ba,    88              88                            
                    88      `"8b   ""              88                            
                    88        `8b                  88                            
       8b,     ,d8  88         88  88  ,adPPYYba,  88   ,adPPYba,    ,adPPYb,d8  
        `Y8, ,8P'   88         88  88  ""     `Y8  88  a8"     "8a  a8"    `Y88  
          )888(     88         8P  88  ,adPPPPP88  88  8b       d8  8b       88  
        ,d8" "8b,   88      .a8P   88  88,    ,88  88  "8a,   ,a8"  "8a,   ,d88  
       8P'     `Y8  88888888Y"'    88  `"8bbdP"Y8  88   `"YbbdP"'    `"YbbdP"Y8  
                                                                    aa,    ,88  
                                                                     "Y8bbdP"   
================================================================================================

优雅的 Android 对话框类库封装 xDialog

对 Android 开发而言,对话框是打交道比较频繁的 UI 控件之一。对话框对大部分程序员而言并不陌生。然而,当考虑到复杂的交互效果、组件复用、自定义和各种 UI 风格的时候,事情变得麻烦了起来。xDialog 就是我设计的用来整合以上多种情况的 UI 组件。相比于大部分开源库,它可自定义程度更高,能满足更多的应用场景。

1、整体设计

xDialog 基于 Kotlin 开发,也吸取了 KotlinDSL 的特性,提供了更加方便使用的 API. 该对话框基于 DialogFragment 开发,在复用性方面,分别将对话框的头部、内容和底部进行了抽象,提取了三个接口,所以,用户只需要实现这三个接口就可以拼凑出自己的对话框,真正实现了三个部分的随意组装,

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

        // ...

        /** 为对话框指定头部 */
        fun withTitle(iDialogTitle: IDialogTitle) {
            this.dialogTitle = iDialogTitle
        }

        /** 为对话框指定内容 */
        fun withContent(iDialogContent: IDialogContent) {
            this.dialogContent = iDialogContent
        }

        /** 为对话框指定底部 */
        fun withBottom(iDialogFooter: IDialogFooter) {
            this.dialogFooter = iDialogFooter
        }

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

/** 提供了基于 kotlin DSL 风格的对话框构建器 */
inline fun createDialog(
    init: BeautyDialog.Builder.() -> Unit
): BeautyDialog = BeautyDialog.Builder().apply(init).build()

如上代码所示,用户只需要将通过实现三个接口实现自己的各个部分,然后就可以做到指定的位置的 UI 的替换。

2、兼容平板、手机和横屏

基于上述设计思路,我为构建者增加了几个参数用来满足在不同分辨率上使用的场景的需求。该库内置了四种不同大小的对话框,对于用户,只需要判断上述不同的情景之后根据情况传入指定的样式即可。然后在对话框内部会使用不同的 style 作为对话框的主题,

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()
}

3、兼容 BottomSheet 和普通的对话框的场景

谷歌提供的 Material 库中提供了叫做 BottomSheetDialog 的对话框。相比于普通的对话框,这个类可以提供更好的交互效果。比如,比如自己的地图中就有类似的交互效果。底部弹出一部分,然后向上可以继续拖拽并展示全部内容。这种交互方式在许多情景下会非常有用,特别是,当我们需要提供的内容可能在普通的对话框装不下的情况而又不希望切换一个新的页面的时候。较少的切换页面,降低操作的层级,可以提供更好的用户交互体验。

在 xDialog 中,我增加了几个参数来支持这种应用场景,

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()
}

所以,对于使用这个库的用户而言,只需要动态调整几个参数就可以随意在两种不同的交互方式之间切换。

4、提供对话框背景模糊效果

xDialog 为背景模糊效果提供了封装。为此 xDialog 提供了 BlurEngine 用来在 Dialog 显示的时候截取屏幕进行模糊并展示到对话框背部。用户启用的方式也非常简单,只需要传入一个参数就可以直接使用背景模糊的效果。

5、提供了默认的封装和多种实用 API

除了上述封装,xDialog 提供了几个默认的头部、内容和底部实现类。用户可以直接使用,也可以参照他们实现自己想要的效果,

此外,xDialog 还提供了其他的 API,比如自定义对话框显示的位置是头部、中间还是底部,自定义对话框是否可以撤销,自定义对话框的背景,监听对话框的的显示和隐藏事件等等。

其他

上述是对该对话框封装的分析。对话框相关的开源库还是挺多的,这里我只是觉得这个设计可以拿出来分享一下。如果你需要做相关的工作的话,可以参考一下。最后源代码地址,

源码地址:https://github.com/Shouheng88/xDialog

You might also like...
Android library that allows applications to add dialog-based slider widgets to their settings
Android library that allows applications to add dialog-based slider widgets to their settings

Android Slider Preference Library Overview Slider represents a float between 0.0 and 1.0 Access with SliderPreference.getValue() or SharedPreferences.

An Android library for displaying a dialog where it presents new features in the app.
An Android library for displaying a dialog where it presents new features in the app.

WhatIsNewDialog What is new dialog for Android is used for presenting new features in the the app. It can be used in the activity starts, from menu or

Android library to show
Android library to show "Rate this app" dialog

Android-RateThisApp Android-RateThisApp is an library to show "Rate this app" dialog. The library monitors the following status How many times is the

A simple library to show custom dialog with animation in android
A simple library to show custom dialog with animation in android

SmartDialog A simple library to show custom dialog in android Step 1. Add the JitPack repository to your build file allprojects { repositories {

CuteDialog- Android Custom Material Dialog Library
CuteDialog- Android Custom Material Dialog Library

A Custom Material Design Dialog Library for Android Purpose CuteDialog is a Highly Customizable Material Design Android Library. CuteDialog allows dev

An easy-to-use Android library that will help you to take screenshots of specif views of your app and save them to external storage (Including API 29 Q+ with Scope Storage)

🇺🇸 English | 🇧🇷 Português (pt-br) 🇺🇸 English: An easy to use Library that will help you to take screenshots 📸 of the views in your app Step 1.

Advanced dialog solution for android
Advanced dialog solution for android

DialogPlus Simple and advanced dialog solution. Uses normal view as dialog Provides expandable option Multiple positioning Built-in options for easy i

An Android Dialog Lib simplify customization.
An Android Dialog Lib simplify customization.

FlycoDialog-Master 中文版 An Android Dialog Lib simplify customization. Supprot 2.2+. Features [Built-in Dialog, convenient to use](#Built-in Dialog) [Ab

A simple file/ directory picker dialog for android
A simple file/ directory picker dialog for android

FileListerDialog FileListerDialog helps you to list and pick file/directory. Library is built for Android Getting Started Installing To use this libra

Owner
ShouHeng
.java.kt.py.fe
ShouHeng
Alert Dialog - You can use this extension instead of creating a separate Alert Dialog for each Activity or Fragment.

We show a warning message (Alert Dialog) to the user in many parts of our applications. You can use this extension instead of creating a separate Alert Dialog for each Activity or Fragment. Thanks to this extension, you can create a Dialog and call it in the Activity or Fragment you want and customize the component you want.

Gökmen Bayram 0 Jan 9, 2022
AlertDialog for Android, a beautiful and material alert dialog to use in your android app.

AlertDialog for Android, a beautiful and material alert dialog to use in your android app. Older verion of this library has been removed

Akshay Masram 124 Dec 28, 2022
Android has a built in microphone through which you can capture audio and store it , or play it in your phone. There are many ways to do that but with this dialog you can do all thats with only one dialog.

# Media Recorder Dialog ![](https://img.shields.io/badge/Platform-Android-brightgreen.svg) ![](https://img.shields.io/badge/Android-CustomView-blue.sv

Abdullah Alhazmy 73 Nov 29, 2022
ionalert 1.3 1.6 Java Sweetalert, Dialog, Alert Dialog

ionalert - Android Alert Dialog A beautiful design Android Alert Dialog, alternative of Sweet Alert Dialog based on KAlertDialog using MaterialCompone

Excel Dwi Oktavianto 23 Sep 17, 2022
SweetAlert for Android, a beautiful and clever alert dialog

Sweet Alert Dialog SweetAlert for Android, a beautiful and clever alert dialog 中文版 Inspired by JavaScript SweetAlert Demo Download ScreenShot Setup Th

书呆子 7.3k Dec 30, 2022
An easy to use, yet very customizable search dialog

search-dialog An awesome and customizable search dialog with built-in search options. Usage First add jitpack to your projects build.gradle file allpr

Mad Mirrajabi 518 Dec 15, 2022
[Deprecated] This project can make it easy to theme and custom Android's dialog. Also provides Holo and Material themes for old devices.

Deprecated Please use android.support.v7.app.AlertDialog of support-v7. AlertDialogPro Why AlertDialogPro? Theming Android's AlertDialog is not an eas

Feng Dai 468 Nov 10, 2022
⭐ ‎‎‎‏‏‎ ‎Offers a range of beautiful sheets (dialogs & bottom sheets) for quick use in your project. Includes many ways to customize sheets.

Sheets Sleek dialogs and bottom-sheets for quick use in your app. Choose one of the available sheets or build custom sheets on top of the existing fun

Maximilian Keppeler 838 Dec 30, 2022
Extremely useful library to validate EditText inputs whether by using just the validator for your custom view or using library's extremely resizable & customisable dialog

Extremely useful library for validating EditText inputs whether by using just the validator (OtpinVerification) for your custom view or using library's extremely resizable & customisable dialog (OtpinDialogCreator)

Ehma Ugbogo 17 Oct 25, 2022
Android library to show "Rate this app" dialog

Android-RateThisApp Android-RateThisApp is an library to show "Rate this app" dialog. The library monitors the following status How many times is the

Keisuke Kobayashi 553 Nov 23, 2022