【android开发记录片】2.自定义/定做 Dialog组件

【android开发记录片】2.自定义/定制 Dialog组件
写在前面

好久没有更新android方面的博客，因为一直没搞，最近做一个小项目，用到了Dialog作弹出菜单 和 确认/输入框。这里跟大家分享一下我定制Dialog的方法。
下面是截图：

1.弹出菜单

2.确认框

3.输入框

4.颜色选择框

包含dialog的封装类，layout文件，drawable文件。

首先定义对话框的事件接口：

public interface MenuListener{/** * @方法名称 :onClick * @功能描述 : * @param position 菜单项的下标 * @return :void */public void onMenuClick(int code, int position);}public interface ConfirmListener{/** * @方法名称 :onConfirmClick * @功能描述 :当confirm对话框中的按钮被点击时 * @param position * @return :void */public void onConfirmClick(int position, Object obj);}

然后定义一个layout，里面放一个GridView就好，还定义GridView 的Item的布局：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/RelativeLayout_Item"android:layout_width="fill_parent" android:layout_height="wrap_content"android:paddingBottom="1dip"><ImageView android:id="@+id/item_image"android:layout_centerHorizontal="true" android:layout_width="wrap_content"android:layout_height="wrap_content"android:contentDescription="@string/nothing" /><TextView android:layout_below="@id/item_image" android:id="@+id/item_text"android:layout_centerHorizontal="true" android:layout_width="wrap_content"android:layout_height="wrap_content" android:text="@string/nothing" /></RelativeLayout>

接着是MenuDialog.java，内部有一个Dialog实例，对外提供show()方法：

public MenuDialog(Context context, int id) {this.context = context;this.id = id;}/** * @方法名称 :creatDialog * @功能描述 :创建一个菜单Dialog，需要有数据才得，否则 menuDialog 为null * @param menuDialog * @param data * @return :void */public void creatDialog(final MenuData data){if(data == null)return ;if(data.icons.length > 0){View view = View.inflate(context, getMenuLayout(), null);//优先使用图片作为背景if(data.bgResource != -1){view.setBackgroundDrawable(UIFactory.getRepeatBG(context,data.bgResource));}else if(data.bgColor != -1){Log.i("CellNote", "set bgColor---------");view.setBackgroundColor(data.bgColor);}GridView gView = (GridView)view.findViewById(GRID_ID);gView.setAdapter(getMenuAdapter(data));dialog = new Dialog(context);dialog.show();Window win = dialog.getWindow();//将dialog的背景透明化win.setBackgroundDrawable(new ColorDrawable(0));win.setGravity(getGravity());win.setContentView(view);if(data.listener != null){//注册菜单事件gView.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1,int arg2, long arg3) {data.listener.onMenuClick(id,arg2);if(data.onlyOneTime)dialog.dismiss();}});}registerKey();this.hasMenu = true;}}/** * @方法名称 :show * @功能描述 :显示对话框 * @return :void */public void show(){dialog.show();}

在Activity中如此调用：

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {menu.add("danting");return super.onCreateOptionsMenu(menu);}@Overridepublic boolean onMenuOpened(int featureId, Menu menu) {hideKeyboard();if (menuDialog == null) {menuDialog = new MenuDialog(this, MENU_OPTION);menuDialog.creatDialog(getMenuData());Log.i("CellNote","menuDialog create!!");}if(menuDialog.hasMenu)menuDialog.show();// 返回false 阻止系统的菜单return false;}

上面是一个父类Activity通用的产生弹出菜单的方法（在onCreateOptionsMenu（）方法，menu.add("");是一定要的，不要的话不会弹出对话框，这个不解=.=)，子类只需要重写 getMenuData()方法就可以产生菜单，如：

/** * 产生菜单 */@Overridepublic MenuData getMenuData() {MenuData data = new MenuData();data.icons = new int[]{R.drawable.ic_menu_color_home,R.drawable.ic_menu_color_category,R.drawable.ic_menu_color_note,R.drawable.ic_menu_color_search,R.drawable.ic_menu_color_setting,R.drawable.ic_menu_color_bag,R.drawable.ic_menu_color_help,R.drawable.ic_menu_color_about};data.labels = new String[]{"首页","新分类","新便签","内容搜索","设置","备份/还原","帮助","关于我们"};data.listener = this;data.bgResource = R.drawable.bg_green_32x32;return data;}

上面用到了一个MenuData类，如下：

/** * @项目名称 :CellNote * @文件名称 :MenuDialog.java * @所在包 :org.nerve.cellnote.view * @功能描述 : *菜单数据体，其中 icons 是菜单的图像引用，labels 是菜单文字 * @创建者 :集成显卡1053214511@qq.com * @创建日期 :2013-1-23 * @修改记录 : */public static class MenuData{/**背景的drawable，如果为-1，则使用默认的背景*/public int bgResource = -1;/**背景颜色*/public int bgColor = -1;/**菜单点击监听器*/public MenuListener listener;/**为true时，菜单被点击后后自动消失*/public boolean onlyOneTime;public int[] icons = new int[0];public String[] labels;public MenuData(){this.onlyOneTime = true;}public MenuData(int [] is,String[] ls){this();this.icons = is;this.labels = ls;}}

定义layout：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@drawable/shape_dialog"    >      <TextView         android:id="@+id/dialog_title"        android:layout_width="fill_parent"        android:layout_height="35dp"        android:textSize="18sp"        android:textColor="#000000"        android:gravity="center"        />        <TextView         android:id="@+id/dialog_message"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:padding="20dp"        android:paddingBottom="2dp"        android:textColor="#000000"        />        <!-- 这个可以自由添加视图 -->    <LinearLayout         android:id="@+id/dialog_live"        android:orientation="vertical"        android:layout_width="fill_parent"        android:layout_height="wrap_content"       >           </LinearLayout>        <LinearLayout         android:id="@+id/dialog_button_group"        android:orientation="horizontal"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:paddingLeft="20dp"        android:paddingRight="20dp"        android:paddingBottom="15dp">                <Button             android:id="@+id/dialog_ok"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="@string/dialog_ok"            android:padding="3dp"            android:background="@drawable/shape_dialog_button_ok"            android:textColor="@color/black"            android:layout_marginRight="10dp"/>                 <Button             android:id="@+id/dialog_cannel"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="@string/dialog_cannel"            android:layout_marginLeft="10dp"            android:textColor="@color/black"            android:background="@drawable/shape_dialog_button_cannel"/>            </LinearLayout></LinearLayout> 

然后是ConfirmDialog.java：

package org.nerve.cellnote.view.dialog;import org.nerve.cellnote.R;import org.nerve.cellnote.view.dialog.DialogHelper.ConfirmListener;import android.app.Dialog;import android.content.Context;import android.graphics.drawable.ColorDrawable;import android.view.Gravity;import android.view.View;import android.view.View.OnClickListener;import android.view.Window;import android.view.WindowManager.LayoutParams;import android.widget.Button;import android.widget.LinearLayout;import android.widget.TextView;/** * @项目名称 :CellNote * @文件名称 :ConfirmDialog.java * @所在包 :org.nerve.cellnote.view.dialog * @功能描述 : *确定对话框，显示标题，内容，还有确定和取消按钮 * @创建者 :集成显卡1053214511@qq.com * @创建日期 :2013-1-28 * @修改记录 : */public class ConfirmDialog {/**默认的对话框视图*/public static int DIALOG_UI = R.layout.dialog_main;/**默认的对话框占主屏幕多宽度的比例*/public static float WIDTH_SCALE = 0.8F;/**OK按钮被点击*/public static final int OK = 0;/**取消按钮点击*/public static final int CANNEL = 1;protected Context context;protected Dialog dialog;protected Button okBtn;protected Button cannelBtn;protected int id;protected String title;protected String message;protected ConfirmListener listener;public ConfirmDialog(Context context){this.context = context;}public ConfirmDialog(Context context, String t, String m){this(context);this.title = t;this.message = m;}public void setTitle(String t){this.title = t;}public void setMessage(String m){this.message = m;}public void setConfirmListener(ConfirmListener listener){this.listener = listener;}protected void createDialog(){View view = View.inflate(context, getMainXML(), null);((TextView)view.findViewById(R.id.dialog_title)).setText(title);//如果message为null，不显示TextView messageTV = (TextView)view.findViewById(R.id.dialog_message);if(message == null)((LinearLayout)view).removeView(messageTV);elsemessageTV.setText(message);dialog = new Dialog(context);dialog.show();Window win = dialog.getWindow();//将dialog的背景透明化win.setBackgroundDrawable(new ColorDrawable(0));win.setGravity(getGravity());LinearLayout ll = (LinearLayout)view.findViewById(R.id.dialog_live);View liveView = getLiveView();if(liveView != null){ll.addView(liveView);}win.setLayout(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);win.setContentView(view);initButton(view);}public void show(){if(dialog == null)createDialog();elsedialog.show();}/** * @方法名称 :initButton * @功能描述 :初始化按钮 *  * @param view * @return :void */protected void initButton(View view){if(isButtonShow()){okBtn = (Button)view.findViewById(R.id.dialog_ok);cannelBtn = (Button)view.findViewById(R.id.dialog_cannel);okBtn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {dialog.dismiss();afterClickOK();}});cannelBtn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {dialog.dismiss();}});}else{View v = view.findViewById(R.id.dialog_button_group);((LinearLayout)view).removeView(v);}}/** * @方法名称 :isButtonShow * @功能描述 :如果子类不需要显示按钮，可以重写这个方法。 * @return * @return :boolean */protected boolean isButtonShow(){return true;}/** * @方法名称 :getMainXML * @功能描述 :获得主视图id * @return * @return :int */public int getMainXML(){return DIALOG_UI;}public int getGravity(){return Gravity.CENTER;}/** * @方法名称 :afterClickOK * @功能描述 :确认按钮点击后触发，子类可以重写这个方法达到不同的效果 * @return :void */public void afterClickOK(){if(listener != null)listener.onConfirmClick(OK, null);}/** * @方法名称 :getLiveView * @功能描述 :得到一个扩展的视图，可以产生不同组合的对话框，子类可以重写这个方法 * @return * @return :View */public View getLiveView(){return null;}}

子类可以通过重写一些方法再定义对话框。

调用方法：

ConfirmDialog cd = new ConfirmDialog(this);cd.setTitle("关于我们");StringBuilder about = new StringBuilder();about.append("名称："+getString(R.string.app_name));about.append("\n版本：" + getString(R.string.app_version));about.append("\n作者：" + getString(R.string.app_author));about.append("\n简介：" + getString(R.string.app_information));about.append("\n邮箱：" + getString(R.string.app_email));cd.setMessage(about.toString());cd.show();

dialog_single_input.xml：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="fill_parent"        android:layout_height="wrap_content"      android:paddingLeft="20dp"    android:paddingRight="20dp"       >          <EditText     android:id="@+id/dialog_single_input"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:hint="@null" /></LinearLayout>

然后 SingleInputDialog 继承自 ConfirmDialog，重写getView() 方法，返回 上面的布局：

package org.nerve.cellnote.view.dialog;import org.nerve.cellnote.R;import android.content.Context;import android.view.View;import android.widget.EditText;/** * @项目名称 :CellNote * @文件名称 :SingleInputDialog.java * @所在包 :org.nerve.cellnote.view.dialog * @功能描述 : *只有一个输入的对话框，在这里，message 被设置为了：请输入 * @创建者 :集成显卡1053214511@qq.com * @创建日期 :2013-1-28 * @修改记录 : */public class SingleInputDialog extends ConfirmDialog{protected EditText singleInput;protected String defaultText;public SingleInputDialog(Context context) {super(context);}@Overridepublic View getLiveView() {View lv = View.inflate(context, R.layout.dialog_single_input, null);this.singleInput = (EditText)lv.findViewById(R.id.dialog_single_input);this.singleInput.setText(defaultText);return lv;}@Overridepublic void afterClickOK() {listener.onConfirmClick(OK, singleInput.getText().toString());}public void setDefaultText(String t){this.defaultText = t;}}

调用方法：

SingleInputDialog sd = new SingleInputDialog(this);String title = getString(R.string.category_input);sd.setTitle(title);sd.setMessage(title + "：");sd.setConfirmListener(new ConfirmListener() {@Overridepublic void onConfirmClick(int position, Object obj) {String name = (String)obj;newCategoryDo(name);}});sd.show();

恩，帖了好多代码，这里就源文件打包给大家下载，下载导入到自己的工程里便可以看到效果：http://download.csdn.net/detail/ssrc0604hx/5062435