Android 中实现自定义 Dialog 对话框

Android自定义Dialog实现详解

原创已于 2025-09-09 15:27:46 修改 · 562 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android #自定义对话框

于 2025-08-08 18:12:23 首次发布

Kotlin 同时被 2 个专栏收录

23 篇文章

订阅专栏

Android 控件

13 篇文章

订阅专栏

一、提示对话框

1、功能说明

自定义一个简单的提示框，上方显示一个文本信息，下方显示一个确定按钮，效果如下：

2、实现步骤

创建自定义控件布局文件；
自定义提示框控件，继承自 AppCompatDialog；
使用自定义控件。

3、示例代码

（1）布局文件 dialog_hint.xml

	<?xml version="1.0" encoding="utf-8"?>
	<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:layout_width="@dimen/dp_320"
	    android:layout_height="@dimen/dp_220"
	    xmlns:app="http://schemas.android.com/apk/res-auto"
	    android:background="@mipmap/hint_dialog_bg">
	
	    <TextView
	        android:id="@+id/hint_text"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:textColor="@color/white"
	        android:textSize="@dimen/sp_28"
	        android:text="@string/hint"
	        app:layout_constraintTop_toTopOf="parent"
	        app:layout_constraintLeft_toLeftOf="parent"
	        app:layout_constraintRight_toRightOf="parent"
	        android:layout_marginTop="@dimen/dp_50"/>
	
	    <Button
	        android:id="@+id/button_ok"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:background="@mipmap/button_bg"
	        android:textColor="@color/white"
	        android:textSize="@dimen/sp_24"
	        android:text="@string/confirm"
	        app:layout_constraintBottom_toBottomOf="parent"
	        app:layout_constraintLeft_toLeftOf="parent"
	        app:layout_constraintRight_toRightOf="parent"
	        android:layout_marginBottom="@dimen/dp_30"/>
	
	</androidx.constraintlayout.widget.ConstraintLayout>

（2）自定义控件 HintDialog.kt

	package com.android.androidfunctiondemo.customview
	
	import android.content.Context
	import android.graphics.Color
	import android.os.Bundle
	import android.widget.Button
	import android.widget.TextView
	import androidx.appcompat.app.AppCompatDialog
	import androidx.core.graphics.drawable.toDrawable
	import com.android.androidfunctiondemo.R
	import com.android.androidfunctiondemo.utils.CommonUtils
	
	class HintDialog(context: Context): AppCompatDialog(context) {
	
	    fun interface OnClickListener {
	        fun onButtonOk()
	    }
	
	    private var textView: TextView? = null
	    private var listener: OnClickListener? = null
	
	
	    override fun onCreate(savedInstanceState: Bundle?) {
	        super.onCreate(savedInstanceState)
	        setContentView(R.layout.dialog_hint.xml)
	
	        // 点击屏幕 dialog 不消失
	        setCanceledOnTouchOutside(false)
	
	        window?.let {
	            // 隐藏导航栏
	            CommonUtils.hideNavigationBar(it)
	            // 设置 dialog 背景为透明色，解决圆角背景图四角白色问题
	            it.setBackgroundDrawable(Color.TRANSPARENT.toDrawable())
	        }
	
	        textView = findViewById(R.id.hint_text)
	        val button = findViewById<Button>(R.id.button_ok)
	        button?.setOnClickListener {
	            listener?.onButtonOk()
	        }
	    }
	
	    /**
	     * 设置消息
	     */
	    fun setMessage(message: String) {
	        textView?.text = message
	    }
	
	    /**
	     * 设置按钮监听器
	     */
	    fun setButtonListener(listener: OnClickListener) {
	        this.listener = listener
	    }
	}

setCanceledOnTouchOutside：设置用户点击 Dialog 外的区域时，Dialog 不会消失。
setBackgroundDrawable(Color.TRANSPARENT.toDrawable())：设置 Dialog 的背景色为透明，否则圆角背景图的四角会有白色显示，如下图所示：

（3）使用自定义控件

	package com.android.androidfunctiondemo
	
	import android.os.Bundle
	import androidx.appcompat.app.AppCompatActivity
	import com.android.androidfunctiondemo.customview.HintDialog
	import com.android.androidfunctiondemo.databinding.ActivityMainBinding
	import com.android.androidfunctiondemo.utils.CommonUtils
	
	class MainActivity: AppCompatActivity() {
	
	    private lateinit var viewBinding: ActivityMainBinding
	    override fun onCreate(savedInstanceState: Bundle?) {
	        super.onCreate(savedInstanceState)
	        viewBinding = ActivityMainBinding.inflate(layoutInflater)
	        setContentView(viewBinding.root)
	        CommonUtils.hideNavigationBar(window)
	
	        viewBinding.textView.setOnClickListener {
	            showHintDialog()
	        }
	    }
	
	    private fun showHintDialog() {
	        val hintDialog = HintDialog(this)
	        hintDialog.setMessage("提交成功")
	        hintDialog.setButtonListener {
	            hintDialog.dismiss()
	        }
	        hintDialog.show()
	    }
	}

二、确认对话框

1、功能说明

自定义一个简单的确认对话框，上方图标和标题，中间显示确认内容信息，下方显示取消和确认两个按钮，效果如下：

2、实现步骤

创建自定义控件布局文件；
自定义对话框控件，继承自 AppCompatDialog；
使用自定义控件。

3、示例代码

（1）布局文件 dialog_confirm.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="@dimen/dp_280"
    android:layout_height="@dimen/dp_160"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/background_white"
    android:padding="@dimen/dp_20">

    <ImageView
        android:id="@+id/title_icon"
        android:layout_width="@dimen/dp_24"
        android:layout_height="@dimen/dp_24"
        android:src="@mipmap/delete_icon"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/text_black"
        android:textSize="@dimen/sp_16"
        android:text="@string/delete_title"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/title_icon"
        app:layout_constraintTop_toTopOf="@+id/title_icon"
        app:layout_constraintBottom_toBottomOf="@+id/title_icon"
        android:layout_marginStart="@dimen/dp_10"/>

    <TextView
        android:id="@+id/content_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/text_black"
        android:textSize="@dimen/sp_14"
        android:text="@string/delete_content"
        app:layout_constraintLeft_toLeftOf="@+id/title_text"
        app:layout_constraintTop_toBottomOf="@+id/title_text"
        android:layout_marginTop="@dimen/dp_20"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <Button
            android:id="@+id/button_cancel"
            android:layout_width="@dimen/dp_80"
            android:layout_height="@dimen/dp_32"
            android:background="@color/background_white"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_16"
            android:text="@string/cancel"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"/>

        <Button
            android:id="@+id/button_confirm"
            android:layout_width="@dimen/dp_80"
            android:layout_height="@dimen/dp_32"
            android:background="@mipmap/button_confirm_bg"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_16"
            android:text="@string/confirm"
            app:layout_constraintBottom_toBottomOf="@id/button_cancel"
            app:layout_constraintLeft_toRightOf="@+id/button_cancel"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

其中涉及到颜色、字符串等资源，如下所示：

    <string name="ok">确定</string>
    <string name="hint">提交成功</string>
    <string name="delete_title">删除提醒</string>
    <string name="delete_content">是否确认删除工单</string>
    <string name="confirm">确认</string>
    <string name="cancel">取消</string>
    <string name="hint_dialog">提示对话框</string>
    <string name="confirm_dialog">确认对话框</string>

    <color name="background_white">#FFEBEBEB</color>
    <color name="text_black">#FF3D4050</color>

（2）自定义控件 ConfirmDialog.kt

package com.android.androidfunctiondemo.dialog

import android.content.Context
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatDialog
import com.android.androidfunctiondemo.R
import com.android.androidfunctiondemo.utils.CommonUtils

class ConfirmDialog(context: Context): AppCompatDialog(context) {

    fun interface OnButtonClickListener {
        fun onButtonConfirm()
    }
    private var listener: OnButtonClickListener? = null

    private var titleTextView: TextView? = null
    private var contentTextView: TextView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.dialog_confirm)

        // 点击屏幕 dialog 不消失
        setCanceledOnTouchOutside(false)

        window?.let {
            // 隐藏导航栏
            CommonUtils.hideNavigationBar(it)
        }

        titleTextView = findViewById(R.id.title_text)
        contentTextView = findViewById(R.id.content_text)

        val buttonCancel = findViewById<Button>(R.id.button_cancel)
        val buttonConfirm = findViewById<Button>(R.id.button_confirm)
        buttonCancel?.setOnClickListener {
            dismiss()
        }
        buttonConfirm?.setOnClickListener {
            listener?.onButtonConfirm()
        }
    }

    /**
     * 设置确认按钮点击事件
     */
    fun setOnButtonClickListener(listener: OnButtonClickListener) {
        this.listener = listener
    }

    /**
     * 设置标题
     */
    fun setTitle(text: String) {
        titleTextView?.text = text
    }

    /**
     * 设置内容
     */
    fun setContent(text: String) {
        contentTextView?.text = text
    }
}

（3）使用控件 DialogActivity.kt

package com.android.androidfunctiondemo.dialog

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.android.androidfunctiondemo.R
import com.android.androidfunctiondemo.utils.CommonUtils

class DialogActivity: AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_dialog)
        CommonUtils.hideNavigationBar(window)

        val buttonHint = findViewById<Button>(R.id.button_hint)
        val buttonConfirm = findViewById<Button>(R.id.button_confirm)
        buttonHint.setOnClickListener {
            val hintDialog = HintDialog(this)
            hintDialog.setButtonListener {
                hintDialog.dismiss()
            }
            hintDialog.show()
        }
        buttonConfirm.setOnClickListener {
            val confirmDialog = ConfirmDialog(this)
            confirmDialog.setOnButtonClickListener {
                confirmDialog.dismiss()
            }
            confirmDialog.show()
            // 可重置提示标题和内容
            confirmDialog.setTitle("测试")
            confirmDialog.setContent("是否确认全部清空！")
        }
    }
}