Android UI设计之自定义Dialog，实现各种风格效果的对话框

虽然Android给我们提供了众多组件，但是使用起来都不是很方便，我们开发的APK都有自己的风格，如果使用了系统自带的组件，总是觉得和应用的主题不着边际并且看起来也不顺心，那我们就需要自定义了，为了方便大家对自定义组件的学习，我接下来准备了几遍有关自定义的Dialog的文章，希望对大家有帮助。

在开发APK中最常见的估计就数弹出对话框了，这种对话框按照按钮数量来分大致是三种：一个按钮，两个按钮，三个按钮。现在要讲的就是按照按钮数量分为以上三类吧(当然了可以有更多的按钮，只要你愿意)。

自定义Dialog对话大致可分为三步走吧：第一步就是重新定义Dialog的样式，第二部就是定义我们需要显示的布局文件，第三部就是设置事件监听器。

好了，还是老规矩，首先贴上工程目录：

在工程中我定义了一个基类BaseBean，这个类用来作为在整个工程项目中的基类，基类中定义一些公共的常用的属性，如有需要另外属性我们只需要继承基类就好了，所以我定义了DialogBean，它继承了BaseBean，因此拥有了BaseBean的所有功能。那我们先看看BaseBean中定义的都是啥吧：

public class BaseBean {

	/**
	 * 标题
	 */
	String title;
	/**
	 * 内容
	 */
	String content;

	/**
	 * 获取标题
	 * 
	 * @return 标题
	 */
	public String getTitle() {
		return title;
	}

	/**
	 * 设置标题
	 * 
	 * @param title
	 *            标题
	 */
	public void setTitle(String title) {
		this.title = title;
	}

	/**
	 * 获取内容
	 * 
	 * @return 内容
	 */
	public String getContent() {
		return content;
	}

	/**
	 * 设置内容
	 * 
	 * @param content
	 *            内容
	 */
	public void setContent(String content) {
		this.content = content;
	}
}

以上是基类中的内容，那接下来就看看Dialog中是怎么定义的吧：

public class DialogBean extends BaseBean {

	/**
	 * 点击返回键是否可消失
	 */
	boolean cancelable;
	/**
	 * 点击蒙皮是否可以消失
	 */
	boolean outCancelable;
	/**
	 * 事件监听
	 */
	DialogClickListener listener;
	/**
	 * 按钮类型【默认显示两个按钮】
	 */
	DialogButtonType buttonType = DialogButtonType.TwoButton;

	/**
	 * 显示布局资源ID
	 */
	Integer layoutResID;

	public DialogBean() {
	}

	/**
	 * 点击BACK键是否可以消失
	 * 
	 * @return 【true:可消失】【false:不消失】
	 */
	public boolean isCancelable() {
		return cancelable;
	}

	/**
	 * 设置点击BACK键是否可以消失
	 * 
	 * @param cancelable
	 *            【true:可消失】【false:不消失】
	 */
	public void setCancelable(boolean cancelable) {
		this.cancelable = cancelable;
	}

	/**
	 * 点击蒙皮是否可以消失
	 * 
	 * @return 【true:可消失】【false:不消失】
	 */
	public boolean isOutCancelable() {
		return outCancelable;
	}

	/**
	 * 设置点击蒙皮是否可以消失
	 * 
	 * @param outCancelable
	 *            【true:可消失】【false:不消失】
	 */
	public void setOutCancelable(boolean outCancelable) {
		this.outCancelable = outCancelable;
	}

	/**
	 * 获取事件监听器
	 * 
	 * @return 事件监听器
	 */
	public DialogClickListener getListener() {
		return listener;
	}

	/**
	 * 设置事件监听器
	 * 
	 * @param listener
	 *            事件监听器
	 */
	public void setListener(DialogClickListener listener) {
		this.listener = listener;
	}

	/**
	 * 获取按钮类型
	 * 
	 * @return 按钮类型
	 */
	public DialogButtonType getButtonType() {
		return buttonType;
	}

	/**
	 * 设置按钮类型
	 * 
	 * @param buttonType
	 *            按钮类型
	 */
	public void setButtonType(DialogButtonType buttonType) {
		this.buttonType = buttonType;
	}

	/**
	 * 获取要显示的布局ID
	 * 
	 * @return 要显示的布局ID
	 */
	public Integer getLayoutResID() {
		return layoutResID;
	}

	/**
	 * 设置要显示的布局ID
	 * 
	 * @param layoutResID
	 *            要显示的布局ID
	 */
	public void setLayoutResID(Integer layoutResID) {
		this.layoutResID = layoutResID;
	}

	/**
	 * 按钮类型
	 * 
	 * @author llew
	 */
	public enum DialogButtonType {
		/**
		 * 一个按钮
		 */
		OneButton,
		/**
		 * 两个按钮
		 */
		TwoButton,
		/**
		 * 三个按钮
		 */
		ThreeButton
	}

	/**
	 * 按钮点击监听器
	 * 
	 * @author llew
	 * 
	 */
	public interface DialogClickListener {
		/**
		 * 点击按钮
		 * 
		 * @param buttonIndex
		 *            按钮下标【从0开始】
		 */
		public void onClick(int buttonIndex);
	}
}

DialogBean中的代码注释的都很详细了，就不再多解释了，主要就是封装了对话框中常见的属性。接下来就看看定义的所需要的Dialog的样式吧：

样式主要定义了该对话框没有标题，背景颜色是透明的，现在所需的样式定义完了，主角GlobleDialog该出场了，代码如下：

public class GlobleDialog extends Dialog implements View.OnClickListener {

	private TextView titleTextView, contentTextView;
	private Button leftButton, centerButton ,rightButton;
	private DialogBean bean;
	
	public GlobleDialog(Context context, int theme, DialogBean bean) {
		super(context, theme);
		this.bean = bean;
		initWedgits();
	}

	/**
	 * 初始化各组件
	 */
	private void initWedgits() {
		try {
			setCancelable(bean.isCancelable());
			setCanceledOnTouchOutside(bean.isOutCancelable());
			View dialogView = getLayoutInflater().inflate(bean.getLayoutResID(), null);
			titleTextView = (TextView) dialogView.findViewById(R.id.button_title);
			contentTextView = (TextView) dialogView.findViewById(R.id.button_content);
			titleTextView.setText(bean.getTitle());
			contentTextView.setText(bean.getContent());
    		leftButton = (Button) dialogView.findViewById(R.id.button_left);
    		centerButton = (Button) dialogView.findViewById(R.id.button_center);
    		rightButton = (Button) dialogView.findViewById(R.id.button_right);
    		
    		leftButton.setOnClickListener(this);
    		centerButton.setOnClickListener(this);
    		rightButton.setOnClickListener(this);
    		
    		if(DialogButtonType.OneButton == bean.getButtonType()) {
    			leftButton.setVisibility(View.GONE);
    			rightButton.setVisibility(View.GONE);
    		} else if(DialogButtonType.TwoButton == bean.getButtonType()) {
    			centerButton.setVisibility(View.GONE);
    		}
    		setContentView(dialogView);
    		
    		Window dialogWindow = getWindow();
    		WindowManager.LayoutParams lp = dialogWindow.getAttributes();
    		dialogWindow.setGravity(Gravity.CENTER);
    		DisplayMetrics dm = new DisplayMetrics();
    		dialogWindow.getWindowManager().getDefaultDisplay().getMetrics(dm);
    		lp.width = dm.widthPixels - 20;
    		dialogWindow.setAttributes(lp);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Override
	public void onClick(View v) {
		try {
			switch (v.getId()) {
			case R.id.button_left:
				bean.getListener().onClick(0);
				break;
			case R.id.button_center:
				bean.getListener().onClick(1);
				break;
			case R.id.button_right:
				bean.getListener().onClick(2);
				break;
			default:
				break;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

自定义的GlobleDialog的代码写完了，那就看看是如何使用的吧：

package com.llew.e.dialog.view.activity;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
import android.widget.Toast;

import com.llew.e.dialog.R;
import com.llew.e.dialog.view.bean.DialogBean;
import com.llew.e.dialog.view.bean.DialogBean.DialogButtonType;
import com.llew.e.dialog.view.bean.DialogBean.DialogClickListener;
import com.llew.e.dialog.view.wedgit.GlobleDialog;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
	
	private Dialog dialog;
	private TextView textView;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        textView = (TextView) findViewById(R.id.textview);
        textView.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				DialogBean dialogBean = new DialogBean();
		        dialogBean.setCancelable(true);
		        dialogBean.setOutCancelable(true);
		        dialogBean.setTitle("小练习");
		        dialogBean.setContent("在这里输入提示信息");
		        dialogBean.setButtonType(DialogButtonType.TwoButton);
		        dialogBean.setLayoutResID(R.layout.dialog_common);
		        dialogBean.setListener(new DialogClickListener() {
					@Override
					public void onClick(int buttonIndex) {
						switch (buttonIndex) {
						case 0:
							Toast.makeText(MainActivity.this, "点击了播放", Toast.LENGTH_SHORT).show();
							break;
						case 1:
							Toast.makeText(MainActivity.this, "点击了暂停", Toast.LENGTH_SHORT).show();
							break;
						case 2:
							Toast.makeText(MainActivity.this, "点击了停止", Toast.LENGTH_SHORT).show();
							break;
						default:
							break;
						}
					}
				});
		        createDialog(dialogBean);
			}
		});
    }
    
    public void createDialog(DialogBean bean) {
    	if(null == dialog) {
    		dialog = new GlobleDialog(MainActivity.this, R.style.theme_dialog_alert, bean);
    	}
    	dialog.show();
    }
}

代码实在是没有什么好解释的，我相信你一看就会，那看看运行效果吧：

好了，到这里自定义Dialog实现不同风格效果的对话框就讲解完了，感谢收看。

界面看上去有点丑，大家可以自己修改颜色值或者使用图片代替

源码下载