您的位置:首页 > 产品设计 > UI/UE

Android UI 详解之AlertDialog

2015-01-16 12:09 423 查看
Android UI 详解之AlertDialog

一、Android一共有四种常用的对话框

①AlertDialog ,功能最丰富,实际应用最广的对话框。

②ProgressDialog, 进度条对话框,这个对话框只是对进度条的简单封装。

③DatePickerDialog:日期选择对话框,这个对话框只是对DatePicker的包装。

④TimePickerDialog:事件选择对话框,这个对话框只是对TimePicker的包装

所以,上面最灵活,功能最强的是AlertDialog

1.使用、AlertDialog创建对话框

AlertDialog组成部分为4个区域。

①图片区

②标题区

③内容区

④按钮区

上面4步中最灵活的也是第3步,有6种选择,

①setMessage():设置简单的文本

②setItems():设置对话框内容为简单列表项

③setSingleChoiceItems()设置对话框内容为单选列表项

④setMultiChoiceItems():设置对话框内容为多选列表项

⑤setAdapter():设置对话框内容为自定义列表项

⑤setView():设置对话框的内容为自定义View

package org.crazyit.ui;

import android.app.Activity;
import android.app.AlertDialog;

import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.TableLayout;
import android.widget.TextView;

public class AlertDialogTest extends Activity
{
TextView show;
String[] items = new String[] {
"疯狂Java讲义", "疯狂Ajax讲义",
"轻量级Java EE企业应用实战",
"疯狂Android讲义" };
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
show = (TextView) findViewById(R.id.show);
}

public void simple(View source)
{
AlertDialog.Builder builder = new AlertDialog.Builder(this)
// 设置对话框标题
.setTitle("简单对话框")
// 设置图标
.setIcon(R.drawable.tools)
.setMessage("对话框的测试内容\n第二行内容");
// 为AlertDialog.Builder添加【确定】按钮
setPositiveButton(builder);
// 为AlertDialog.Builder添加【取消】按钮
setNegativeButton(builder)
.create()
.show();
}

public void simpleList(View source)
{
AlertDialog.Builder builder = new AlertDialog.Builder(this)
// 设置对话框标题
.setTitle("简单列表项对话框")
// 设置图标
.setIcon(R.drawable.tools)
// 设置简单的列表项内容
.setItems(items, new OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
show.setText("你选中了《" + items[which] + "》");
}
});
// 为AlertDialog.Builder添加【确定】按钮
setPositiveButton(builder);
// 为AlertDialog.Builder添加【取消】按钮
setNegativeButton(builder)
.create()
.show();
}

public void singleChoice(View source)
{
AlertDialog.Builder builder = new AlertDialog.Builder(this)
// 设置对话框标题
.setTitle("单选列表项对话框")
// 设置图标
.setIcon(R.drawable.tools)
// 设置单选列表项,默认选中第二项(索引为1)
.setSingleChoiceItems(items, 1, new OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
show.setText("你选中了《" + items[which] + "》");
}
});
// 为AlertDialog.Builder添加【确定】按钮
setPositiveButton(builder);
// 为AlertDialog.Builder添加【取消】按钮
setNegativeButton(builder)
.create()
.show();
}
public void multiChoice(View source)
{
AlertDialog.Builder builder = new AlertDialog.Builder(this)
// 设置对话框标题
.setTitle("多选列表项对话框")
// 设置图标
.setIcon(R.drawable.tools)
// 设置多选列表项,设置勾选第2项、第4项
.setMultiChoiceItems(items
, new boolean[]{false , true ,false ,true}, null);
// 为AlertDialog.Builder添加【确定】按钮
setPositiveButton(builder);
// 为AlertDialog.Builder添加【取消】按钮
setNegativeButton(builder)
.create()
.show();
}
public void customList(View source)
{
AlertDialog.Builder builder = new AlertDialog.Builder(this)
// 设置对话框标题
.setTitle("自定义列表项对话框")
// 设置图标
.setIcon(R.drawable.tools)
// 设置自定义列表项
.setAdapter(new ArrayAdapter<String>(this
, R.layout.array_item
, items), null);
// 为AlertDialog.Builder添加【确定】按钮
setPositiveButton(builder);
// 为AlertDialog.Builder添加【取消】按钮
setNegativeButton(builder)
.create()
.show();
}

public void customView(View source)
{
//装载/res/layout/login.xml界面布局
TableLayout loginForm = (TableLayout)getLayoutInflater()
.inflate( R.layout.login, null);
new AlertDialog.Builder(this)
// 设置对话框的图标
.setIcon(R.drawable.tools)
// 设置对话框的标题
.setTitle("自定义View对话框")
// 设置对话框显示的View对象
.setView(loginForm)
// 为对话框设置一个“确定”按钮
.setPositiveButton("登录" , new OnClickListener()
{
@Override
public void onClick(DialogInterface dialog,
int which)
{
// 此处可执行登录处理
}
})
// 为对话框设置一个“取消”按钮
.setNegativeButton("取消", new OnClickListener()
{
@Override
public void onClick(DialogInterface dialog,
int which)
{
// 取消登录,不做任何事情。
}
})
// 创建、并显示对话框
.create()
.show();
}

private AlertDialog.Builder setPositiveButton(
AlertDialog.Builder builder)
{
// 调用setPositiveButton方法添加确定按钮
return builder.setPositiveButton("确定", new OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
show.setText("单击了【确定】按钮!");
}
});
}

private AlertDialog.Builder setNegativeButton(
AlertDialog.Builder builder)
{
// 调用setNegativeButton方法添加取消按钮
return builder.setNegativeButton("取消", new OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
show.setText("单击了【取消】按钮!");
}
});
}
}


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<!-- 显示一个普通的文本编辑框组件 -->
<EditText
android:id="@+id/show"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:editable="false"/>
<!-- 定义一个普通的按钮组件 -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="简单对话框"
android:onClick="simple"
/>
<!-- 定义一个普通的按钮组件 -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="简单列表项对话框"
android:onClick="simpleList"
/>
<!-- 定义一个普通的按钮组件 -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="单选列表项对话框"
android:onClick="singleChoice"
/>
<!-- 定义一个普通的按钮组件 -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="多选列表项对话框"
android:onClick="multiChoice"
/>
<!-- 定义一个普通的按钮组件 -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="自定义列表项对话框"
android:onClick="customList"
/>
<!-- 定义一个普通的按钮组件 -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="自定义View对话框"
android:onClick="customView"
/>
</LinearLayout>


<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/loginForm"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRow>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="用户名:"
android:textSize="10pt"
/>
<!-- 输入用户名的文本框 -->
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="请填写登录帐号"
android:selectAllOnFocus="true"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="密码:"
android:textSize="10pt"
/>
<!-- 输入密码的文本框 -->
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="请填写密码"
android:password="true"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="电话号码:"
android:textSize="10pt"
/>
<!-- 输入电话号码的文本框 -->
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="请填写您的电话号码"
android:selectAllOnFocus="true"
android:phoneNumber="true"
/>
</TableRow>
</TableLayout>


使用PopupWindo
创建对话框风格窗口

步骤两步,

①调用PopupWindow的构造器创建PopupWindow对象。

②调用PopupWindow的showAsDropDown(View v)将PopupWindow作为V组件的下拉组件显示出来,或调用PopupWindow的showAtLocation()方法将PopupWindow在指定位置显示出来。

看下面一个例子

package org.crazyit.ui;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.PopupWindow;

public class PopupWindowTest extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// 装载R.layout.popup对应的界面布局
View root = this.getLayoutInflater().inflate(R.layout.popup, null);
// 创建PopupWindow对象
final PopupWindow popup = new PopupWindow(root, 280, 360);
Button button = (Button) findViewById(R.id.bn);
button.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
// 以下拉方式显示。
//				popup.showAsDropDown(v);
//将PopupWindow显示在指定位置
popup.showAtLocation(findViewById(R.id.bn), Gravity.CENTER, 20,
20);
}
});
// 获取PopupWindow中的关闭按钮。
root.findViewById(R.id.close).setOnClickListener(
new View.OnClickListener()
{
public void onClick(View v)
{
// 关闭PopupWindow
popup.dismiss(); //①
}
});
}
}
使用DatezPickerDialog 和TimePickerDialog

package org.crazyit.ui;

import java.util.Calendar;

import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TimePicker;

public class DateDialogTest extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button dateBn = (Button)findViewById(R.id.dateBn);
Button timeBn = (Button)findViewById(R.id.timeBn);
//为“设置日期”按钮绑定监听器。
dateBn.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View source)
{
Calendar c = Calendar.getInstance();
// 直接创建一个DatePickerDialog对话框实例,并将它显示出来
new DatePickerDialog(DateDialogTest.this,
// 绑定监听器
new DatePickerDialog.OnDateSetListener()
{
@Override
public void onDateSet(DatePicker dp, int year,
int month, int dayOfMonth)
{
EditText show = (EditText) findViewById(R.id.show);
show.setText("您选择了:" + year + "年" + (month + 1)
+ "月" + dayOfMonth + "日");
}
}
//设置初始日期
, c.get(Calendar.YEAR)
, c.get(Calendar.MONTH)
, c.get(Calendar.DAY_OF_MONTH)).show();
}
});
//为“设置时间”按钮绑定监听器。
timeBn.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View source)
{
Calendar c = Calendar.getInstance();
// 创建一个TimePickerDialog实例,并把它显示出来。
new TimePickerDialog(DateDialogTest.this,
// 绑定监听器
new TimePickerDialog.OnTimeSetListener()
{
@Override
public void onTimeSet(TimePicker tp, int hourOfDay,
int minute)
{
EditText show = (EditText) findViewById(R.id.show);
show.setText("您选择了:" + hourOfDay + "时" + minute
+ "分");
}
}
//设置初始时间
, c.get(Calendar.HOUR_OF_DAY)
, c.get(Calendar.MINUTE)
//true表示采用24小时制
, true).show();
}
});
}
}


用法也非常简单,定义两个按钮,一个设置日期,一个设置年月,当点击的时候new出来一个对话框,并绑定一个监听器,同时调用.show方法显示,两个监听器分别是,new DatePickerDialog.OnDateSetListener()和new TimePickerDialog.OnTimeSetListener(),还可以分别传入初始值。

进度条对话框ProgressDialog

package org.crazyit.ui;

import android.app.Activity;
import android.app.ProgressDialog;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;

public class ProgressDialogTest extends Activity
{
final static int MAX_PROGRESS = 100;
// 该程序模拟填充长度为100的数组
private int[] data = new int[50];
// 记录进度对话框的完成百分比
int progressStatus = 0;
int hasData = 0;
ProgressDialog pd1,pd2;
// 定义一个负责更新的进度的Handler
Handler handler = new Handler()
{
@Override
public void handleMessage(Message msg)
{
// 表明消息是由该程序发送的。
if (msg.what == 0x123)
{
pd2.setProgress(progressStatus);
}
}
};

@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
<pre name="code" class="java">        // 显示环形进度条
public void showSpinner(View source){ProgressDialog.show(this, "任务执行中", "任务执行中,请等待", false, true); //①} //不显示进度的进度条public void showIndeterminate(View source){pd1 = new ProgressDialog(ProgressDialogTest.this);// 设置对话框的标题pd1.setTitle("任务正在执行中");//
设置对话框显示的内容pd1.setMessage("任务正在执行中,敬请等待...");// 设置对话框能用“取消”按钮关闭pd1.setCancelable(true);// 设置对话框的进度条风格pd1.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);// 设置对话框的进度条是否显示进度pd1.setIndeterminate(true);pd1.show(); //②} //显示进度的进度条public void showProgress(View
source){// 将进度条的完成进度重设为0progressStatus = 0;// 重新开始填充数组。hasData = 0;pd2 = new ProgressDialog(ProgressDialogTest.this);pd2.setMax(MAX_PROGRESS);// 设置对话框的标题pd2.setTitle("任务完成百分比");// 设置对话框 显示的内容pd2.setMessage("耗时任务的完成百分比");// 设置对话框不能用“取消”按钮关闭pd2.setCancelable(false);//
设置对话框的进度条风格pd2.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);// 设置对话框的进度条是否显示进度pd2.setIndeterminate(false);pd2.show(); //③new Thread(){public void run(){while (progressStatus < MAX_PROGRESS){// 获取耗时操作的完成百分比progressStatus = MAX_PROGRESS* doWork() / data.length;//
发送空消息到Handlerhandler.sendEmptyMessage(0x123);}// 如果任务已经完成if (progressStatus >= MAX_PROGRESS){// 关闭对话框pd2.dismiss();}}}.start();}// 模拟一个耗时的操作。public int doWork(){// 为数组元素赋值data[hasData++] = (int) (Math.random() * 100);try{Thread.sleep(100);}catch (InterruptedException
e){e.printStackTrace();}return hasData;}}


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="环形进度条"
android:onClick="showSpinner" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="不显示进度的进度条"
android:onClick="showIndeterminate" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="显示进度的进度条"
android:onClick="showProgress" />
</LinearLayout>


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: