Three Custom Dialogs
今天再介紹三個客制化的 Dialog。
1. 重新拉過 xml 的文字輸入 Dialog
透過適當的 xml,包括 background 也使用 drawable 下的 xml 來描框,可以作出跟 iOS 對話框類似的效果。
private var customTextInputDialog: Dialog? = null
interface CustomTextInputDialogCallback {
fun onCancel()
fun onTextInput(inputText: String?)
}
fun launchCustomTextInputDialog(
context: Context,
title: String,
description: String?,
defaultText: String?,
hint : String?,
okStr: String,
cancelStr: String?,
callback: CustomTextInputDialogCallback
) {
customTextInputDialog?.dismiss()
customTextInputDialog = Dialog(context)
customTextInputDialog?.setCancelable(false)
customTextInputDialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
customTextInputDialog?.setContentView(R.layout.iotec_custom_text_input_dialog)
val tvTitle = customTextInputDialog?.findViewById(R.id.tv_title)
tvTitle?.text = title
val tvDesc = customTextInputDialog?.findViewById(R.id.tv_desc)
description?.let{tvDesc?.setText(it)}
val etInput = customTextInputDialog?.findViewById(R.id.et_input)
defaultText?.let { etInput?.setText(it) }
if (hint != null) {
etInput?.hint = hint
}else{
etInput?.hint = ""
}
val tvCancel = customTextInputDialog?.findViewById(R.id.tv_cancel)
tvCancel?.text = cancelStr
tvCancel?.setOnClickListener {
callback.onCancel()
customTextInputDialog?.dismiss()
customTextInputDialog= null
}
val tvOK = customTextInputDialog?.findViewById(R.id.tv_ok)
tvOK?.text = okStr
tvOK?.setOnClickListener {
callback.onTextInput(etInput?.text.toString())
customTextInputDialog?.dismiss()
customTextInputDialog= null
}
customTextInputDialog?.show()
}
2. 有打勾的 checkbox 與 visit link 的 Dialog
private var checkboxOkCancelDialog: Dialog? = null
interface LinkOkCancelDialogCallback {
fun onClickLink()
fun onClickOK()
fun onClickCancel()
}
fun launchCheckboxLinkOkCancelDialog(
context: Context,
title: String,
message: String?,
linkMessage: String?,
okStr: String,
cancelStr: String?,
callback: LinkOkCancelDialogCallback
) {
checkboxOkCancelDialog?.dismiss()
checkboxOkCancelDialog = Dialog(context)
checkboxOkCancelDialog?.setCancelable(false)
checkboxOkCancelDialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
checkboxOkCancelDialog?.setContentView(R.layout.iotec_dialog_check_link_ok_cancel)
val tvTitle: TextView? = checkboxOkCancelDialog?.findViewById(R.id.tv_title)
tvTitle?.text = title
if(message!=null) {
val tvMessage: TextView? = checkboxOkCancelDialog?.findViewById(R.id.tv_message)
tvMessage?.text = message
}
val tvLink: TextView? = checkboxOkCancelDialog?.findViewById(R.id.tv_link)
if(linkMessage != null) {
tvLink?.text = linkMessage
}
val tvOK: TextView? = checkboxOkCancelDialog?.findViewById(R.id.tv_ok)
tvOK?.text = okStr
val tvCancel: TextView? = checkboxOkCancelDialog?.findViewById(R.id.tv_cancel)
if(cancelStr!=null) {
tvCancel?.text = cancelStr
}
val cbCheckbox: CheckBox? = checkboxOkCancelDialog?.findViewById(R.id.checkbox)
tvLink?.setOnClickListener {
callback.onClickLink()
checkboxOkCancelDialog?.dismiss()
checkboxOkCancelDialog = null
}
tvCancel?.setOnClickListener {
callback.onClickCancel()
checkboxOkCancelDialog?.dismiss()
checkboxOkCancelDialog = null
}
tvOK?.setOnClickListener {
if (cbCheckbox?.isChecked == true) {
callback.onClickOK()
checkboxOkCancelDialog?.dismiss()
checkboxOkCancelDialog = null
}
}
checkboxOkCancelDialog?.show()
}
3. 可選擇輸入文字類型的密碼對話框
在某個角落要放工程師最愛的 backdoor 時,可用這個沒有用 xml 的密碼對話框。反正是 backdoor,就不用美化了對吧?
var pwdDialog: AlertDialog? = null
enum class PasswordType {
NumberPassword, TextPassword, VisiblePassword, WebPassword
}
interface PasswordDialogCallback {
fun onPasswordInput(password: String?)
fun onPasswordInputCanceled()
}
fun launchSimplePasswordDialog(
context: Context?,
passwordType: PasswordType?,
title: String?,
okStr: String?,
cancelStr: String?,
callback: PasswordDialogCallback
) {
val alert: AlertDialog.Builder = AlertDialog.Builder(context)
val edittext = EditText(context)
edittext.inputType = when (passwordType) {
PasswordType.WebPassword -> InputType.TYPE_TEXT_VARIATION_WEB_PASSWORD
PasswordType.TextPassword -> InputType.TYPE_TEXT_VARIATION_PASSWORD
PasswordType.NumberPassword -> InputType.TYPE_CLASS_NUMBER or InputType.TYPE_NUMBER_VARIATION_PASSWORD
PasswordType.VisiblePassword -> InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
else -> InputType.TYPE_TEXT_VARIATION_PASSWORD
}
alert.setTitle(title)
alert.setView(edittext)
alert.setPositiveButton(okStr
) { _, _ ->
val password = edittext.text.toString()
callback.onPasswordInput(password)
pwdDialog?.dismiss()
pwdDialog = null
}
alert.setNegativeButton(cancelStr
) { _, _ ->
callback.onPasswordInputCanceled()
pwdDialog?.dismiss()
pwdDialog = null
}
pwdDialog = alert.create()
pwdDialog?.show()
}
Sample project :
https://github.com/orangedream/IotecDialogExample/tree/custom_dialogs