Android自定义多种Dialog样式弹框

项目开发中都会自己定义一些Dialog弹框来实现好看的效果
下面是一些常用的弹框样式,效果图如下:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
接下来我们就需要一个个的来实现对应的效果
用到的Color色值如下

 <color name="colorBlack">#333333</color>
 <color name="colorWhite">#FFFFFF</color>

用到的自定义资源文件如下
shape_picture_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <corners android:radius="5dp" />

    <solid android:color="#FFFFFF" />

</shape>

shape_white_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="7dp"/>

    <solid android:color="@color/colorWhite"/>

</shape>

shape_btn_white_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@android:color/transparent" />

    <corners android:radius="1px" />

    <stroke android:width="2px" android:color="#CACAC8" />

</shape>

shape_btn_blue_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#44B4F3"/>

    <corners android:radius="8.0px"/>

    <padding
        android:top="10dp"
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"/>

</shape>

上传图片选择弹框布局
dialog_up_picture_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="@drawable/shape_picture_bg"
        android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="选择照片的方式"
        android:textSize="16sp"
        android:textStyle="bold"
        android:textColor="@color/colorBlack"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#CACAC8" />

    <TextView
        android:id="@+id/dialog_picture_text_album"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="从手机相册选择"
        android:textSize="15sp"
        android:textColor="#666666" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#CACAC8" />

    <TextView
        android:id="@+id/dialog_picture_text_camera"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="打开相机拍照"
        android:textSize="15sp"
        android:textColor="#666666"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="@drawable/shape_picture_bg">

    <TextView
        android:id="@+id/dialog_picture_text_cancel"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="取消"
        android:textSize="16sp"
        android:textColor="@color/colorBlack" />
    </LinearLayout>

</LinearLayout>

对话提示弹框布局
dialog_gue_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="270dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    android:background="@drawable/shape_white_bg">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="15dp"
        android:layout_gravity="center"
        android:text="确定要退出登陆吗?"
        android:textSize="17sp"
        android:textColor="@color/colorBlack" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#DCDCDC" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <TextView
        android:id="@+id/dialog_gue_text_cancel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="15dp"
        android:gravity="center"
        android:text="取消"
        android:textSize="18sp"
        android:textColor="@color/colorBlack"/>

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#DCDCDC"/>

    <TextView
        android:id="@+id/dialog_gue_text_determine"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:gravity="center"
        android:layout_weight="1"
        android:text="确定"
        android:textSize="18sp"
        android:textColor="@color/colorBlack"
        android:textStyle="bold"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

输入文本内容弹框布局
dialog_input_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:orientation="vertical"
    android:background="@drawable/shape_white_bg">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:text="大大的标题"
        android:textSize="17sp"
        android:textColor="@color/colorBlack" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:paddingTop="10dp"
        android:paddingLeft="10dp"
        android:gravity="left"
        android:hint="说点什么吧~我们会做的更好~"
        android:textColorHint="#999999"
        android:textColor="#999999"
        android:textSize="15sp"
        android:background="@null"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#DCDCDC" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <TextView
        android:id="@+id/dialog_input_text_cancel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="15dp"
        android:gravity="center"
        android:text="取消"
        android:textSize="18sp"
        android:textColor="@color/colorBlack"/>

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#DCDCDC"/>

    <TextView
        android:id="@+id/dialog_input_text_determine"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:gravity="center"
        android:layout_weight="1"
        android:text="确定"
        android:textSize="18sp"
        android:textColor="@color/colorBlack" />
    </LinearLayout>
</LinearLayout>

描述信息弹框布局
dialog_desc_info_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:orientation="vertical"
    android:background="@drawable/shape_white_bg">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp">

    <TextView
        android:id="@+id/dialog_desc_text_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="15dp"
        android:text="我是标题"
        android:textSize="20sp"
        android:textColor="@color/colorBlack" />

    <TextView
        android:id="@+id/dialog_desc_text_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="30dp"
        android:layout_below="@+id/dialog_desc_text_title"
        android:text="一段话概括"
        android:textSize="15sp"
        android:textColor="@color/colorBlack" />

    <TextView
        android:id="@+id/dialog_desc_text_cancel"
        android:layout_width="60dp"
        android:layout_height="35dp"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/dialog_desc_text_info"
        android:layout_toLeftOf="@+id/dialog_desc_text_determine"
        android:gravity="center"
        android:text="取消"
        android:textSize="13sp"
        android:textColor="@color/colorBlack"
        android:background="@drawable/shape_btn_white_bg" />

    <TextView
        android:id="@+id/dialog_desc_text_determine"
        android:layout_width="60dp"
        android:layout_height="35dp"
        android:layout_below="@+id/dialog_desc_text_info"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="20dp"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:text="确定"
        android:textSize="13sp"
        android:textColor="@color/colorWhite"
        android:background="@drawable/shape_btn_blue_bg" />
    </RelativeLayout>
</LinearLayout>

接着就是代码部分
创建一个DialogView和一个DialogManager用来加载View和管理

package com.ranlegeran.dialogstyletest;

import android.app.Dialog;
import android.content.Context;
import android.view.Window;
import android.view.WindowManager;

import androidx.annotation.NonNull;

/**
 * 作者 : RAN
 * 简介 : 一言以蔽之
 * 时间 : 2021/4/9 14:25
 * 描述 : 定义DialogView
 * 版本 : 1.0
 */
public class DialogView extends Dialog {

    public DialogView(@NonNull Context context, int layout, int style, int gravity) {
        super(context, style);
        setContentView(layout);
        Window mWindow = getWindow();
        WindowManager.LayoutParams params = mWindow.getAttributes();
        params.width = WindowManager.LayoutParams.MATCH_PARENT;
        params.height = WindowManager.LayoutParams.WRAP_CONTENT;
        params.gravity = gravity;
        mWindow.setAttributes(params);
    }
}

package com.ranlegeran.dialogstyletest;

import android.content.Context;
import android.view.Gravity;

/**
 * 作者 : RAN
 * 简介 : 一言以蔽之
 * 时间 : 2021/4/9 14:24
 * 描述 : Dialog管理
 * 版本 : 1.0
 */
public class DialogManager {
    private static volatile DialogManager mInstance = null;

    private DialogManager() {

    }

    public static DialogManager getInstance() {
        if (mInstance == null) {
            synchronized (DialogManager.class) {
                if (mInstance == null) {
                    mInstance = new DialogManager();
                }
            }
        }
        return mInstance;
    }

    public DialogView initView(Context context, int layout) {
        return new DialogView(context,layout, R.style.CustomDialog, Gravity.CENTER);
    }

    public DialogView initView(Context context,int layout,int gravity) {
        return new DialogView(context,layout, R.style.CustomDialog, gravity);
    }

    /**
     * 显示
     * @param view
     */
    public void show(DialogView view) {
        if (view != null) {
            if (!view.isShowing()) {
                view.show();
            }
        }
    }

    /**
     * 隐藏
     * @param view
     */
    public void hide(DialogView view) {
        if (view != null) {
            if (view.isShowing()) {
                view.dismiss();
            }
        }
    }
}

定义CustomDialog主题

 <style name="CustomDialog" parent="Theme.AppCompat.Dialog">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="windowNoTitle">true</item>
 </style>

最后就是在MainActivity中去加载对应的布局

package com.ranlegeran.dialogstyletest;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Button mBtnUpPicture;
    private Button mBtnDialoGue;
    private Button mBtnInputText;
    private Button mBtnDescInfo;

    //上传图片弹框
    private DialogView mDialogUpView;
    private TextView mTextAlbum;
    private TextView mTextCamera;

    //对话提示弹框
    private DialogView mDialogGueView;
    private TextView mTextGueCancel;
    private TextView mTextGueDetermine;

    //文本内容弹框
    private DialogView mDialogTextView;
    private TextView mTextInputCancel;
    private TextView mTextInputDetermine;

    //描述信息弹框
    private DialogView mDialogDescView;
    private TextView mTextCancel;
    private TextView mTextDetermine;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mBtnUpPicture = (Button) findViewById(R.id.btn_up_picture);
        mBtnDialoGue = (Button) findViewById(R.id.btn_dialogue);
        mBtnInputText = (Button) findViewById(R.id.btn_input_text);
        mBtnDescInfo = (Button) findViewById(R.id.btn_desc_info);
        mBtnUpPicture.setOnClickListener(this);
        mBtnDialoGue.setOnClickListener(this);
        mBtnInputText.setOnClickListener(this);
        mBtnDescInfo.setOnClickListener(this);
        showDialogView();
    }

    private void showDialogView() {
        //上传图片
        mDialogUpView = DialogManager.getInstance().initView(this,R.layout.dialog_up_picture_layout,Gravity.BOTTOM);
        mTextAlbum = (TextView) mDialogUpView.findViewById(R.id.dialog_picture_text_album);
        mTextCamera = (TextView) mDialogUpView.findViewById(R.id.dialog_picture_text_camera);
        mTextAlbum.setOnClickListener(this);
        mTextCamera.setOnClickListener(this);

        //对话提示
        mDialogGueView = DialogManager.getInstance().initView(this,R.layout.dialog_gue_layout,Gravity.CENTER);
        mTextGueCancel = (TextView) mDialogGueView.findViewById(R.id.dialog_gue_text_cancel);
        mTextGueDetermine = (TextView) mDialogGueView.findViewById(R.id.dialog_gue_text_determine);
        //是否允许弹框局部点击 默认是可以点击 这里设置不允许外部点击
        mDialogGueView.setCancelable(false);
        mTextGueCancel.setOnClickListener(this);
        mTextGueDetermine.setOnClickListener(this);

        //文本内容
        mDialogTextView = DialogManager.getInstance().initView(this,R.layout.dialog_input_layout,Gravity.CENTER);
        mTextInputCancel = (TextView) mDialogTextView.findViewById(R.id.dialog_input_text_cancel);
        mTextInputDetermine = (TextView) mDialogTextView.findViewById(R.id.dialog_input_text_determine);
        //是否允许弹框局部点击 默认是可以点击 这里设置不允许外部点击
        mDialogTextView.setCancelable(false);
        mTextInputCancel.setOnClickListener(this);
        mTextInputDetermine.setOnClickListener(this);

        //描述信息
        mDialogDescView = DialogManager.getInstance().initView(this,R.layout.dialog_desc_info_layout,Gravity.CENTER);
        mTextCancel = (TextView) mDialogDescView.findViewById(R.id.dialog_desc_text_cancel);
        mTextDetermine = (TextView) mDialogDescView.findViewById(R.id.dialog_desc_text_determine);
        //是否允许弹框局部点击 默认是可以点击 这里设置不允许外部点击
        mDialogDescView.setCancelable(false);
        mTextCancel.setOnClickListener(this);
        mTextDetermine.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_up_picture:
                DialogManager.getInstance().show(mDialogUpView); //显示对话框
                break;
            case R.id.dialog_picture_text_album:
                Toast.makeText(this, "相册", Toast.LENGTH_SHORT).show();
                break;
            case R.id.dialog_picture_text_camera:
                Toast.makeText(this, "相机", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn_dialogue:
                DialogManager.getInstance().show(mDialogGueView); //显示对话框
                break;
            case R.id.dialog_gue_text_cancel:
                Toast.makeText(this, "取消退出", Toast.LENGTH_SHORT).show();
                DialogManager.getInstance().hide(mDialogGueView); //关闭对话框
                break;
            case R.id.dialog_gue_text_determine:
                Toast.makeText(this, "确定退出", Toast.LENGTH_SHORT).show();
                DialogManager.getInstance().hide(mDialogGueView); //关闭对话框
                break;
            case R.id.btn_input_text:
                DialogManager.getInstance().show(mDialogTextView); //显示对话框
                break;
            case R.id.dialog_input_text_cancel:
                Toast.makeText(this, "文本输入取消", Toast.LENGTH_SHORT).show();
                DialogManager.getInstance().hide(mDialogTextView); //关闭对话框
                break;
            case R.id.dialog_input_text_determine:
                Toast.makeText(this, "文本输入确定", Toast.LENGTH_SHORT).show();
                DialogManager.getInstance().hide(mDialogTextView); //关闭对话框
                break;
            case R.id.btn_desc_info:
                DialogManager.getInstance().show(mDialogDescView); //显示对话框
                break;
            case R.id.dialog_desc_text_cancel: //描述信息弹框取消点击事件
                DialogManager.getInstance().hide(mDialogDescView); //关闭对话框
                break;
            case R.id.dialog_desc_text_determine:
                Toast.makeText(this, "描述信息确定", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

以上是全部代码,有需要的可以直接copy到项目中。

  • 5
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Android自定义dialog是一种可以根据开发者的需求进行自定义的对话框。通过自定义dialog,开发者可以实现特定的界面设计和功能。根据引用,我们可以使用AlertDialog.Builder来创建一个普通的弹出框。而根据引用,我们可以通过简单的设置和技巧来实现Android自定义dialog。如果想要对话框具有自定义布局,可以创建一个布局文件,然后通过调用AlertDialog.Builder的setView()方法将其添加到对话框中。默认情况下,自定义布局会填充对话框窗口,但是仍然可以使用AlertDialog.Builder的其他方法来添加按钮和标题。此外,开发者还可以完全自定义一个Dialog,需要进行以下几步: 1. 定义一个style 2. 创建一个继承自Dialog的子类 3. 在子类中实现自定义布局和相关功能 4. 在应用中调用自定义dialog的实例来显示对话框。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [android自定义Dialog](https://blog.csdn.net/weixin_41796401/article/details/96636408)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Android自定义dialog简单实现方法](https://download.csdn.net/download/weixin_38736562/12800768)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值