【android开发记录片】2.自定义/定制 Dialog组件
写在前面
好久没有更新android方面的博客，因为一直没搞，最近做一个小项目，用到了Dialog作弹出菜单 和 确认/输入框。这里跟大家分享一下我定制Dialog的方法。
下面是截图：
1.弹出菜单
2.确认框
3.输入框
4.颜色选择框
文件结构
包含dialog的封装类，layout文件，drawable文件。
实现
1.弹出菜单
首先定义对话框的事件接口：
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() {
@Override
public 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中如此调用：
@Override
public boolean onCreateOptionsMenu(Menu menu) {
menu.add("danting");
return super.onCreateOptionsMenu(menu);
}
@Override
public 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()方法就可以产生菜单，如：
/**
* 产生菜单
*/
@Override
public 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;
}
}
2.确认对话框
定义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);
else
messageTV.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();
else
dialog.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() {
@Override
public void onClick(View v) {
dialog.dismiss();
afterClickOK();
}
});
cannelBtn.setOnClickListener(new OnClickListener() {
@Override
public 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();
3.输入对话框
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);
}
@Override
public 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;
}
@Override
public 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() {
@Override
public void onConfirmClick(int position, Object obj) {
String name = (String)obj;
newCategoryDo(name);
}
});
sd.show();
恩，帖了好多代码，这里就源文件打包给大家下载，下载导入到自己的工程里便可以看到效果：http://download.csdn.net/detail/ssrc0604hx/5062435
