Android sample code, kotlin

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

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.