【Android UI设计】Dialog对话框详解（一）

所谓Dialog其实就是一个小窗口，用户在对界面进行某些操作的时候，可以通过Dialog来响应，对用户进行反馈，但是我们一般在使用Dialog的时候是不会直接使用Dialog来进行编码创建对话框，而是使用它的子类来进行操作：

  • AlertDialog

一个对话框—–可以显示一个标题，最多三个按钮，一个可选项列表，或自定义布局。

  • Dialog继承关系图

其他子类不在此处介绍，本篇主要介绍AlertDialog和Android官方推荐使用的DialogFragment这两种方式来创建Dialog。

  • DialogFragment简介

DialogFragment在android 3.0时被引入，DialogFragment的父类是Fragment，其实它就是一个特殊的Framgent。

当用户按下返回按钮或旋转屏幕时，使用Dialogfragment管理对话框使得它可以正确的处理生命周期事件（状态不会丢失）。Dialogfragment类还允许你在不同大小的用户界面上重用同一个界面（例如当你想要的对话框出现在不同大小的屏幕上）。

一、创建一个DialogFragment

1.创建MyDialogFragment.java，该类继承DialogFragment类（导入的包为android.support.v4.app.DialogFragment），具体代码如下：

public class MyDialogFragment extends DialogFragment
{
    private static MyDialogFragment dialogFragment = null;

    /**
     *
     * 重写方法--创建一个Dialog
     * @param savedInstanceState
     * @return
     * @see android.support.v4.app.DialogFragment#onCreateDialog(android.os.Bundle)
     */
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState)
    {
        // Use the Builder class for convenient dialog construction
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setMessage("确认要退出吗？").setPositiveButton("确认", new DialogInterface.OnClickListener()
        {
            public void onClick(DialogInterface dialog, int id)
            {
                dialog.dismiss();
            }
        }).setNegativeButton("取消", new DialogInterface.OnClickListener()
        {
            public void onClick(DialogInterface dialog, int id)
            {
                // User cancelled the dialog
                dialog.dismiss();
            }
        });
        // Create the AlertDialog object and return it
        return builder.create();
    }

    /**
     *
     * <提供该类的实例>
     * <功能详细描述>
     * @return
     * @see [类、类#方法、类#成员]
     */
    public static MyDialogFragment getInstance()
    {
        if (null == dialogFragment)
        {
            dialogFragment = new MyDialogFragment();
        }

        return dialogFragment;
    }
}

2.弹出提示框，使用show()方法。

FragmentTransaction transaction = fragmentManager.beginTransaction();
//第二个参数是一个独特的标签名称，系统用来保存和恢复Fragment状态
MyDialogFragment.getInstance().show(transaction, "test");

3.运行效果

二、创建一个AlertDialog

  • AlertDialog包括三个部分，分布是标题title，内容区域content area，动作区域Action buttons，title是可选的，一般在如下情况才会显示title：在内容区域有详细的信息，比如占据了一个列表，或自定义布局，如果你需要一个简单的信息或问题（如图1中的对话框），你不需要一个标题。content area可以显示一个文本提示信息，一个列表或者是一个自定义布局，Action区域主要是显示操作按钮。

具体模块图如下：

  • 第三个部分按钮操作主要包含三个，分别是PositiveButton，NeutralButton，NegativeButton，分别代表确认，确认与取消之间的状态，取消，具体看下面的例子。

1.使用AlertDialog来创建一个Dialog

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

        AlertDialog dialog = builder.setMessage("确定打开GPS功能吗？").setPositiveButton("打开", new DialogInterface.OnClickListener()
        {
            @Override
            public void onClick(DialogInterface dialog, int which)
            {
                // 打开
            }
        }).setNeutralButton("以后提醒我", new DialogInterface.OnClickListener()
        {
            @Override
            public void onClick(DialogInterface dialog, int which)
            {
                // 介于打开与关闭之间的状态，比如：以后提醒我
            }
        }).setNegativeButton("关闭", new DialogInterface.OnClickListener()
        {
            @Override
            public void onClick(DialogInterface dialog, int which)
            {
                // 关闭
            }
        }).create();

        dialog.show();

2.通过以上代码即可显示一个对话框，效果如下：

三、Dialog展示可选择列表

有三种类型的列表可以使用Dialog来创建，分别是

  • A traditional single-choice list（单选）
  • A persistent single-choice list (radio buttons)（有radio的单选）
  • A persistent multiple-choice list (checkboxes)（多选）

下面分别来介绍一下这三种列表。

I. single-choice list

  1. 在values目录下添加arrays.xml文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
     <string-array name="city">
        <item>南京市</item>
        <item>杭州市</item>
        <item>苏州市</item>
        <item>无锡市</item>
        <item>上海市</item>
    </string-array>
</resources>

2.创建Dialog并显示

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        AlertDialog dialog = builder.setTitle("选择城市").setItems(R.array.city, new DialogInterface.OnClickListener()
        {
            public void onClick(DialogInterface dialog, int which)
            {
                String[] city = getResources().getStringArray(R.array.city);
                Toast.makeText(MainActivity.this, "当前选择城市:" + city[which], Toast.LENGTH_SHORT).show();
            }
        }).setNegativeButton("取消", new DialogInterface.OnClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which)
            {

            }
        }).setNeutralButton("以后再说", new DialogInterface.OnClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which)
            {

            }
        }).create();

        dialog.show();

3.效果截图

II. single-choice list (radio buttons)

1.在values目录下添加arrays.xml文件，和上面一样

2.创建Dialog并显示

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        AlertDialog dialog = builder.setTitle("选择城市").setSingleChoiceItems(R.array.city, 0, new DialogInterface.OnClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which)
            {
                String[] city = getResources().getStringArray(R.array.city);
                Toast.makeText(MainActivity.this, "当前选择城市:" + city[which], Toast.LENGTH_SHORT).show();
            }
        }).setPositiveButton("确定", new DialogInterface.OnClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which)
            {

            }
        }).setNegativeButton("取消", new DialogInterface.OnClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which)
            {

            }
        }).create();
        dialog.show();

3.效果截图

III. multiple-choice list (checkboxes)

1.在values目录下添加arrays.xml文件，和上面一样

2.创建Dialog并显示

final List<Integer> mSelectedItems = new ArrayList<Integer>(); // Where we track the selected items
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        AlertDialog dialog = builder.setTitle("选择城市").setMultiChoiceItems(R.array.city, null, new DialogInterface.OnMultiChoiceClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which, boolean isChecked)
            {
                if (isChecked)
                {
                    // If the user checked the item, add it to the selected items
                    mSelectedItems.add(which);
                }
                else if (mSelectedItems.contains(which))
                {
                    // Else, if the item is already in the array, remove it
                    mSelectedItems.remove(Integer.valueOf(which));
                }

                StringBuffer buffer = new StringBuffer();
                String[] city = getResources().getStringArray(R.array.city);
                for (int i = 0; i < mSelectedItems.size(); i++)
                {
                    buffer.append(city[mSelectedItems.get(i)] + ",");
                }
                Toast.makeText(MainActivity.this, "当前已选择城市:" + buffer, Toast.LENGTH_SHORT).show();
            }
        }).setPositiveButton("确定", new DialogInterface.OnClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which)
            {

            }
        }).setNegativeButton("取消", new DialogInterface.OnClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which)
            {

            }
        }).create();
        dialog.show();

3.效果截图

四、创建自定义布局的Dialog

如果你想给对话框自定义布局，创建一个布局，AlertDialog通过调用setview()方法将它添加到你的AlertDialog中。默认情况下，自定义布局填充对话框窗口，但你仍然可以使用AlertDialog.Builder添加按钮和标题。

1.在res/layout目录下新建dialog_signin.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:background="#FFFFBB33"
        android:contentDescription="@string/app_name"
        android:textSize="22sp"
        android:gravity="center"
        android:text="用户登录"/>
    <EditText
        android:id="@+id/username"
        android:inputType="textEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"
        android:hint="Username" />
    <EditText
        android:id="@+id/password"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="16dp"
        android:fontFamily="sans-serif"
        android:hint="Password"/>
</LinearLayout>

2.创建自定义Dialog并显示

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        // Get the layout inflater
        LayoutInflater inflater = MainActivity.this.getLayoutInflater();

        // Inflate and set the layout for the dialog
        // Pass null as the parent view because its going in the dialog layout
        AlertDialog dialog = builder.setView(inflater.inflate(R.layout.dialog_signin, null))
        // Add action buttons
            .setPositiveButton("登录", new DialogInterface.OnClickListener()
            {
                @Override
                public void onClick(DialogInterface dialog, int id)
                {
                    // sign in the user ...
                }
            })
            .setNegativeButton("取消", new DialogInterface.OnClickListener()
            {
                public void onClick(DialogInterface dialog, int id)
                {
                    dialog.dismiss();
                }
            }).create();

        dialog.show();

3.效果截图

五、给DialogFragment添加回调接口

当用户触摸一个对话框的操作按钮或选择一个列表的某一项时，dialogfragment本身可能需要执行一些必要的响应，当打开对话框时，通常会想把事件传递给activity或fragment。为此，可以为每种类型的单击事件定义接口。然后在需要实现操作处理的地方实现接受动作的事件接口即可，看下面的例子。

1.这是一个Dialogfragment，定义一个接口，它给activity提供的事件回调：

public class NoticeDialogFragment extends DialogFragment {

    /* The activity that creates an instance of this dialog fragment must
     * implement this interface in order to receive event callbacks.
     * Each method passes the DialogFragment in case the host needs to query it. */
    public interface NoticeDialogListener {
        public void onDialogPositiveClick(DialogFragment dialog);
        public void onDialogNegativeClick(DialogFragment dialog);
    }

    // Use this instance of the interface to deliver action events
    NoticeDialogListener mListener;

    // Override the Fragment.onAttach() method to instantiate the NoticeDialogListener
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        // Verify that the host activity implements the callback interface
        try {
            // Instantiate the NoticeDialogListener so we can send events to the host
            mListener = (NoticeDialogListener) activity;
        } catch (ClassCastException e) {
            // The activity doesn‘t implement the interface, throw exception
            throw new ClassCastException(activity.toString()
                    + " must implement NoticeDialogListener");
        }
    }
    ...
}

2.主activity通过实现NoticeDialogListener接口来对dialog操作事件进行响应。

public class MainActivity extends FragmentActivity
                          implements NoticeDialogFragment.NoticeDialogListener{
    ...

    public void showNoticeDialog() {
        // Create an instance of the dialog fragment and show it
        DialogFragment dialog = new NoticeDialogFragment();
        dialog.show(getSupportFragmentManager(), "NoticeDialogFragment");
    }

    // The dialog fragment receives a reference to this Activity through the
    // Fragment.onAttach() callback, which it uses to call the following methods
    // defined by the NoticeDialogFragment.NoticeDialogListener interface
    @Override
    public void onDialogPositiveClick(DialogFragment dialog) {
        // User touched the dialog‘s positive button
        ...
    }

    @Override
    public void onDialogNegativeClick(DialogFragment dialog) {
        // User touched the dialog‘s negative button
        ...
    }
}

3.传入该接口实例后即可实现回调

public class NoticeDialogFragment extends DialogFragment {
    ...

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Build the dialog and set up the button click handlers
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setMessage(R.string.dialog_fire_missiles)
               .setPositiveButton(R.string.fire, new DialogInterface.OnClickListener() {
                   public void onClick(DialogInterface dialog, int id) {
                       // Send the positive button event back to the host activity
                       mListener.onDialogPositiveClick(NoticeDialogFragment.this);
                   }
               })
               .setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener() {
                   public void onClick(DialogInterface dialog, int id) {
                       // Send the negative button event back to the host activity
                       mListener.onDialogNegativeClick(NoticeDialogFragment.this);
                   }
               });
        return builder.create();
    }
}

六、Dialog弹出动画

1.在res目录下新建anim目录，在anim下新建dialog_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:fromYDelta="1000"
        android:toXDelta="0"
        android:toYDelta="0" />

    <scale
        android:fromXScale="0"
        android:toXScale="1"
        android:fromYScale="0"
        android:toYScale="1"
        android:duration="500"
        />

</set>

2.在anim目录下新建dialog_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="1000"
        />

    <scale
        android:fromXScale="1"
        android:toXScale="0"
        android:fromYScale="1"
        android:toYScale="0"
        android:duration="500"
        />

</set>

3.在代码中使用

//dialog是已经创建好的Dialog实例
Window window = dialog.getWindow();
// 设置显示动画
window.setWindowAnimations(R.style.mystyle);
dialog.show();

4.效果截图

至此，Dialog基本使用方法就先扯到这了，下篇会详细介绍下DialogFragment和Dialog高阶使用，敬请期待！

时间： 2024-11-08 18:29:02

【Android UI设计】Dialog对话框详解（一）的相关文章

【Android UI设计】ExpandableListView详解

一.前言 今天我们来实现一下如下这个效果,类似于QQ好友分组的UI效果,废话不多说,先上效果图: ExpandableListView是一个用来显示二级节点的listview.默认展示的是第一级的分组,点击某个分组后会展开该分组下的子列表,下面我们就一步步来实现这个效果. 二.实现过程 1.首先在activity_main.xml中指定ExpandableListView组件 <RelativeLayout xmlns:android="http://schemas.android.com

【Android UI设计】Dialog对话框详解（二）

上一篇我们介绍了Dialog的基本使用方法,[Android UI设计]Dialog对话框详解(一)今天继续介绍,废话不多说,今天主要实现ProgressDialog和透明Dialog两种效果,最后介绍一下github上的一个Dialog动画开源库,里面包含多种动画特效,效果图如下: 一.ProgressDialog基本使用 1.ProgressDialog关键代码 mProgressDialog = new ProgressDialog(MainActivity.this); // 圆形pro

Android创建自定义dialog方法详解-样式去掉阴影效果

在自定义组件时,从已有组件源码中会很大收获.就拿progressDialog来说     间接父类是dialog,想了解dialog继承结构可以去百度,或者    从构造器来说ProgressDialog(Context context, int theme)很明显需要个样式主题文件,我们可以在value文件下自定义一个样式文件.   从外观上需要个动态效果控件和文本框两个属性    ProgressBar mProgress;   TextView mMessageView源码中onCreat

Android基础入门教程——2.5.3 AlertDialog(对话框)详解

Android基础入门教程--2.5.3 AlertDialog(对话框)详解 标签(空格分隔): Android基础入门教程 本节引言: 本节继续给大家带来是显示提示信息的第三个控件AlertDialog(对话框),同时它也是其他 Dialog的的父类!比如ProgressDialog,TimePickerDialog等,而AlertDialog的父类是:Dialog! 另外,不像前面学习的Toast和Notification,AlertDialog并不能直接new出来,如果你打开 Alert

Android组件系列----Activity组件详解

[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3924567.html 联系方式:[email protected] [正文] 注:四大组件指的是应用组件:Activity.Service.BroadcastReceiver.ContentProvider:之前的控件指的是UI组件. 博文目录: 一.Activity简介 二.Activity的状

Android UI设计之&lt;十&gt;自定义ListView，实现QQ空间阻尼下拉刷新和渐变菜单栏效果

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51559694 好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客是在2014年写的:Android UI设计之<七>自定义Dialog,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效

（转载）Android常用的Dialog对话框用法

Android常用的Dialog对话框用法 Android的版本有很多通常开发的时候对话框大多数使用自定义或是 Google提供的V4, V7 兼容包来开发保持各个版本的对话框样式统一,所以这里使用的是V7 包里的AlertDialog. 1 import android.app.ProgressDialog; 2 import android.content.DialogInterface; 3 import android.os.Bundle; 4 import android.os.Sys

Android触摸屏事件派发机制详解与源码分析三(Activity篇)

PS一句:最终还是选择CSDN来整理发表这几年的知识点,该文章平行迁移到CSDN.因为CSDN也支持MarkDown语法了,牛逼啊! [工匠若水 http://blog.csdn.net/yanbober] 该篇承接上一篇<Android触摸屏事件派发机制详解与源码分析二(ViewGroup篇)>,阅读本篇之前建议先阅读. 1 背景 还记得前面两篇从Android的基础最小元素控件(View)到ViewGroup控件的触摸屏事件分发机制分析吗?你可能看完会有疑惑,View的事件是ViewGro

Android开发四大组件--Activity详解

Android开发四大组件--Activity详解 - Android开发教程 Android开发的四大组件在开发中应用中是必不可少的,下面就来详解下四大组件之一Activity,总结自网络.Activty的生命周期的也就是它所在进程的生命周期. 一个Activity的启动顺序: onCreate()——>onStart()——>onResume() 当另一个Activity启动时: 第一个Activity onPause()——>第二个Activity onCreate()——>