【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高阶使用，敬请期待！