Skip to content

MessageDialog&InputDialog_tc

Kongzue edited this page Sep 14, 2024 · 5 revisions

🌐 View English Document | 简体中文文档

💬基礎對話框 MessageDialog 和 輸入對話框 InputDialog

基礎對話框 MessageDialog 和 輸入對話框 InputDialog

基礎對話框組件可以實現基本的對話框業務邏輯,包含標題、消息文本、單/雙/三按鈕的提醒功能,三個按鈕可以按照縱向/橫向進行顯示,滿足絕大部分日常阻斷式提醒需求。

輸入對話框 InputDialog 是基礎對話框的擴展組件,除了包含基礎的功能外還提供了輸入框,可自訂輸入提示文本、輸入文字樣式和點擊按鈕後的輸入內容回調等。

顯示一個簡單消息對話框

使用以下代碼顯示一個對話框:

MessageDialog.show("標題", "正文內容", "確定");

請注意,標題、正文內容都可以傳入 null,則不會顯示相應的文本布局。

顯示多個按鈕的對話框:

MessageDialog.show("標題", "正文內容", "確定", "取消", "其他");

若需要將按鈕顯示為縱向的,可以通過以下代碼設置:

MessageDialog messageDialog = new MessageDialog("標題", "正文內容", "確定", "取消", "其他")
        .setButtonOrientation(LinearLayout.VERTICAL);
messageDialog.show();

構造對話框

通過上述代碼您可以看到,對話框組件可以通過 .show(...) 靜態方法直接創建並顯示,也可以通過new進行創建,另外要創建一個空的對話框,您可以使用 MessageDialog.build() 來實例化對話框對象。

若您在項目中引入了多個主題,需要臨時改變某一個對話框的主題,亦或者是需要臨時改變對話框的亮色和暗色模式,那麼必須使用非“show”的方法創建,修改主題或顏色後再顯示,方法如下:

MessageDialog.build()
        .setStyle(IOSStyle.style())
        .setTheme(DialogX.THEME.DARK)
        .setTitle("標題")
        .setMessage("內容")
        .setOkButton("確定")
        .show();

除此之外,你也可以使用 new 指令來構建 MessageDialog 和 InputDialog,DialogX 的對話框支持多種構建方式,隨你所想,隨你所用。

new MessageDialog()
        .setTitle("標題")
        .setMessage("內容")
        .setOkButton("確定")
        .show();

按鈕點擊回調

按鈕回調可以透過方法進行設置:

MessageDialog.show("標題", "正文內容", "確定").setOkButton(new OnDialogButtonClickListener<MessageDialog>() {
    @Override
    public boolean onClick(MessageDialog baseDialog, View v) {
        toast("點擊確定按鈕");
        return false;
    }
});

回調中有一個返回值,若return true 則可以點擊後不自動關閉對話框。

另外,DialogX 還提供了多種設置回調和按鈕文本的方法:

//只設置按鈕文本
.setOkButton("確定")

//只設置按鈕點擊回調
.setOkButton(new OnDialogButtonClickListener<MessageDialog>() {
    @Override
    public boolean onClick(MessageDialog baseDialog, View v) {
        toast("點擊確定按鈕");
        return false;
    }
});

//設置按鈕文本並設置回調
.setOkButton("確定", new OnDialogButtonClickListener<MessageDialog>() {
    @Override
    public boolean onClick(MessageDialog baseDialog, View v) {
        toast("點擊確定按鈕");
        return false;
    }
});

//隱藏按鈕
.setOkButton(null)

請依據個人喜好隨意使用。

獲取用戶選擇狀態

如果你的業務流程中,並不需要對用戶操作立即進行處理,但需要知道用戶選擇了哪個按鈕,你也可以通過持有對話框句柄,在後續獲取選擇的狀態,例如:

private MessageDialog dialog;

//業務流程模擬,創建並顯示了一個對話框,但不立即處理點擊事務
dialog = MessageDialog.show("Title", "Ask Question", "OK", "NO", "OTHER");

//需要時可根據 getButtonSelectResult() 方法獲取用戶點擊了哪個按鈕選項
BUTTON_SELECT_RESULT result = dialog.getButtonSelectResult();

BUTTON_SELECT_RESULT 是一個枚舉,它包含以下類型:

NONE,           //未做出選擇
BUTTON_OK,      //選擇了確定按鈕
BUTTON_CANCEL,  //選擇了取消按鈕
BUTTON_OTHER    //選擇了其他按鈕

你可以根據它的狀態判斷用戶點擊了哪個按鈕。

基於這個特性,如果業務流程中針對用戶的選擇,無論選擇哪個選項都有相同部分的代碼需要執行,那麼開發者也可以在用戶選擇後,例如在 DialogLifecycle#onDismiss 對話框的關閉事件中對用戶的選擇進行統一處理,減少重複代碼量;

輸入對話框按鈕點擊回調

InputDialog 的回調與 MessageDialog 的回調略有不同,在回調參數中個給出了輸入文本內容,方便直接判斷和獲取輸入的文本:

new InputDialog("標題", "正文內容", "確定", "取消", "正在輸入的文字")
        .setCancelable(false)
        .setOkButton(new OnInputDialogButtonClickListener<InputDialog>() {
            @Override
            public boolean onClick(InputDialog baseDialog, View v, String inputStr) {
                toast("輸入的內容:" + inputStr);
                return false;
            }
        })
        .show();

另外你也可以使用 inputDialog.getInputText() 來獲取輸入的文本內容。

生命週期回調

想要監控對話框的生命週期,可以實現其 .setDialogLifecycleCallback(...) 介面,建議使用build()方法構建對話框:

MessageDialog.build()
        .setDialogLifecycleCallback(new DialogLifecycleCallback<MessageDialog>() {
            @Override
            public void onShow(MessageDialog dialog) {
                //對話框啟動時回調
            }
            @Override
            public void onDismiss(MessageDialog dialog) {
                //對話框關閉時回調
            }
        })
        .show();

MessageDialog/InputDialog 也支持 Lifecycle,你可以使用 .getLifecycle() 獲取 Lifecycle 對象。

你也可以透過使用 new 構建實例時,override 的生命週期事件的方式來處理生命週期事務,例如:

//複寫事件示範
new MessageDialog() {
    @Override
    public void onShow(MessageDialog dialog) {
        //...
        tip("onShow");
    }
    @Override
    public void onDismiss(MessageDialog dialog) {
        //...
        tip("onDismiss");
    }
}

你也可以使用方法 .onShow(DialogXRunnable).onDismiss(DialogXRunnable),來處理生命週期事務,例如:

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

自訂布局

要實現在對話框中加入自訂布局,請先準備好自訂布局文件,然後使用以下方法構建:

MessageDialog.show("這裡是標題", "此對話框示範的是自訂對話框內部布局的效果", "確定", "取消")
        .setCustomView(new OnBindView<MessageDialog>(R.layout.layout_custom_view) {
            @Override
            public void onBind(MessageDialog dialog, View v) {
                //View childView = v.findViewById(resId)...
            }
        });

回調參數中,v 為您給定的布局文件的實例化組件,您可以通過 v.findViewById(resId)來實例化其他子布局組件,並在 onBind 方法中設置其功能和事件回調。

使用 ViewBinding 的話也可以更換為 OnBindingView 來實現直接通過 binding 獲取佈局實例:

MessageDialog.show("這裡是標題", "此對話框示範的是自訂對話框內部布局的效果", "確定", "取消")
        .setCustomView(new OnBindingView<MessageDialog, LayoutCustomViewBinding>() {
            @Override
            public void onBind(MessageDialog dialog, View view, LayoutCustomViewBinding binding) {
                //View childView = binding.childView
            }
        });

自訂進入和關閉動畫

針對單次顯示的對話框動畫修改,可使用以下方法進行自訂:

MessageDialog.build()
        .setTitle("標題")
        .setMessage("這裡是正文內容。")
        .setOkButton("確定")
        .setCancelButton("取消")
        //設置入場動畫資源和出場動畫資源
        .setAnimResId(R.anim.anim_dialogx_bottom_enter, R.anim.anim_dialogx_bottom_exit)
        .show();

要自訂動畫文件,可以參考:預設對話框啟動動畫文件預設對話框關閉動畫文件

額外說明,除了 .setAnimResId(enterAnimResId, exitAnimResId) 外,還有 .setEnterAnimResId(enterAnimResId).setExitAnimResId(enterAnimResId) 單獨方法可選,此方法僅針對單次顯示的對話框有效。

另外你也可以通過 setEnterAnimDuration([long]) 設置入場動畫時長以及通過 .setExitAnimDuration([long]) 設置關閉動畫時長。

對 MessageDialog、InputDialog 全局生效的的動畫修改:

你可以通過靜態屬性直接修改全局 MessageDialog、InputDialog 的動畫:

//設置全局 MessageDialog 入場動畫
MessageDialog.overrideEnterAnimRes = R.anim.anim_dialogx_bottom_enter;
//設置全局 MessageDialog 出場動畫
MessageDialog.overrideExitAnimRes = R.anim.anim_dialogx_bottom_exit;
//設置全局 MessageDialog 入場動畫時間
MessageDialog.overrideEnterDuration = 1000;
//設置全局 MessageDialog 出場動畫時間
MessageDialog.overrideExitDuration = 1000;

通過自訂主題修改

您還可以通過參考自訂主題介面,完全訂製全局的動畫框默認動畫效果,具體請查閱 《自訂 DialogX 主題》

請注意這三種設置是由優先度區別的,針對單次顯示的對話框動畫修改優先度 > 對 MessageDialog、InputDialog 全局生效的的動畫修改 > 自訂主題修改。

其他額外方法

//強制重新刷新界面
.refreshUI();

//關閉對話框
.dismiss();

//是否允許點擊外部區域或返回鍵關閉
.setCancelable(boolean);

//設置標題文字樣式
.setTitleTextInfo(TextInfo);

//設置消息文字樣式
.setMessageTextInfo(TextInfo);

//設置按鈕文字樣式
.setOkTextInfo(TextInfo);
.setCancelTextInfo(TextInfo);
.setOtherTextInfo(TextInfo);

//設置按鈕排列方式,buttonOrientation 可選 LinearLayout.VERTICAL 或 LinearLayout.HORIZONTAL
.setButtonOrientation(buttonOrientation); 
    
//設置返回按鍵回調
.setOnBackPressedListener(OnBackPressedListener);

//獲取對話框實例化對象,您可以透過此方法更深度的訂製Dialog的功能
.getDialogImpl()

//獲取自訂布局實例
.getCustomView()
    
//設置背景顏色,強行對對話框背景進行染色,請注意參數為int類型的顏色值而非R.color的索引
.setBackgroundColor(ColorInt);
    
//InputDialog 是否自動彈出鍵盤
.setAutoShowInputKeyboard(boolean)

//InputDialog 設置默認輸入文本樣式
.setInputInfo(InputInfo)

//設置對話框圓角(會裁切內容顯示)
.setRadius(float px)

//隱藏對話框(無動畫),恢復顯示請執行非靜態方法的 .show()
.hide();

//隱藏對話框(模擬關閉對話框的動畫),恢復顯示請執行非靜態方法的 .show()
.hideWithExitAnim();

//是否處於顯示狀態
.isShow()

//設置占位文本
.setInputHintText("Hint Text")

//置頂對話框
.bringToFront()

//指定對話框顯示層級
.setThisOrderIndex(int)

背景遮罩

MessageDialog 支持修改背景遮罩,這是為了豐富擴展性。如果需要背景遮罩,您可以自行使用如下代碼設置:

messageDialog.setMaskColor(colorInt);

請注意,傳入參數為 ColorInt 值,您可以使用 Color.parseColor("#4D000000") 設置一個 HEX 色值,或使用 getResources().getColor(R.color.black30) 設置一個顏色的資源值。

額外組件

TextInfo

TextInfo 用於儲存基礎文本樣式設置,其包含一系列屬性和響應的 get/set 方法,例如方法解釋如下:

屬性 解釋 預設值
fontSize 字號大小,值為-1時使用默認樣式,單位:dp -1
gravity 對齊方式,值為-1時使用默認樣式,取值可使用Gravity.CENTER等對齊方式 -1
fontColor 文字顏色,值為1時使用默認樣式,取值可以用Color.rgb(r,g,b)等方式獲取 1
bold 是否粗體 false

請注意,fontColor 為 ColorInt 值,您可以使用 Color.parseColor("#4D000000") 設置一個 HEX 色值,或使用資源 getResources().getColor(R.color.black30) 設置一個顏色的資源值,請勿直接傳入資源 ID,它可能會無效。

InputInfo

InputInfo 用於提供輸入內容的自訂設置,其包含一系列屬性和響應的 get/set 方法,例如方法解釋如下:

屬性 解釋 預設值
MAX_LENGTH 最大長度,-1不生效 -1
inputType 自訂輸入類型,類型詳見 android.text.InputType
textInfo 默認字體樣式 (TextInfo)
multipleLines 是否支持多行 false
selectAllText 默認選中所有文字(便於修改) false
cursorColor 輸入框的游標顏色
bottomLineColor 輸入框底線顏色(請注意部分主題下該屬性可能影響背景顏色)

請注意,cursorColor 和 bottomLineColor 為 ColorInt 值,您可以使用 Color.parseColor("#4D000000") 設置一個 HEX 色值,或使用資源 getResources().getColor(R.color.black30) 設置一個顏色的資源值,請勿直接傳入資源 ID,它可能會無效。

單獨指定樣式

若你的 App 引入了多種主題,在特定場景下需要使對話框顯示為某種非全局的主體樣式,可使用 .build() 構建對話框,然後使用 .setStyle(style) 來指定主題樣式,在最後執行 .show() 命令顯示對話框,例如:

MessageDialog.build()
        //或直接使用 .build(IOSStyle.style())
        .setStyle(IOSStyle.style())
        .setTitle("Title")
        .setMessage("Message content.")
        .setOkButton("OK")
        .show();
Clone this wiki locally