项目开发中都会自己定义一些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到项目中。