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

上一篇我们介绍了Dialog的基本使用方法，【Android UI设计】Dialog对话框详解（一）今天继续介绍，废话不多说，今天主要实现ProgressDialog和透明Dialog两种效果，最后介绍一下github上的一个Dialog动画开源库，里面包含多种动画特效，效果图如下：

一、ProgressDialog基本使用

1.ProgressDialog关键代码

mProgressDialog = new ProgressDialog(MainActivity.this);
        // 圆形progressbar
        // mProgressDialog.setProgress(ProgressDialog.STYLE_SPINNER);
        // 水平progressbar
        mProgressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);

        // 设置ProgressDialog标题
        mProgressDialog.setTitle("天天熬夜");
        // 设置ProgressDialog提示
        mProgressDialog.setMessage("想死的心都有了···");
        // 设置ProgressDialog进度条的图标
        mProgressDialog.setIcon(R.drawable.dialog);

        // 如果设置为false就是滚动条的当前值自动在最小到最大值之间来回移动，形成这样一个动画效果，告诉别人“我正在工作”，但不能提示工作进度到哪个阶段。
        // 主要是在进行一些无法确定操作时间的任务时作为提示。而“明确”(true)就是根据你的进度可以设置现在的进度值。
        mProgressDialog.setIndeterminate(true);

        // 是否可以按回退键取消
        mProgressDialog.setCancelable(true);
        // 设置ProgressDialog的一个Button,可选三种值：BUTTON_POSITIVE,BUTTON_NEGATIVE,BUTTON_NEUTRAL
        mProgressDialog.setButton(ProgressDialog.BUTTON_POSITIVE, "确定", new DialogInterface.OnClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which)
            {
                //点击确认之后的操作
            }
        });

        mProgressDialog.setButton(ProgressDialog.BUTTON_NEGATIVE, "取消", new DialogInterface.OnClickListener()
        {

            @Override
            public void onClick(DialogInterface dialog, int which)
            {
                //点击取消之后的操作
            }
        });

        mProgressDialog.show();

2.为了展示效果，添加异步任务AsyncTask模拟进度更新

public class MyTask extends AsyncTask<Void, Integer, Integer>
    {

        @Override
        protected Integer doInBackground(Void... params)
        {
            //模拟进度更新
            for (int i = 0; i <= 100; i++)
            {
                try
                {
                    Thread.sleep(40);
                    publishProgress(i);
                }
                catch (InterruptedException e)
                {
                    e.printStackTrace();
                }
            }

            return 1;
        }

        @Override
        protected void onProgressUpdate(Integer... values)
        {
            if (values[0] == 100)
            {
                mProgressDialog.dismiss();
            }
            else
            {
                mProgressDialog.setProgress(values[0]);
            }
        }

        @Override
        protected void onPostExecute(Integer result)
        {
            if (result == 1)
            {
                Toast.makeText(MainActivity.this, "下载完成！", Toast.LENGTH_SHORT).show();
            }
        }
    }

3.在mProgressDialog.show()方法后启动任务

// 启动AsyncTask异步任务更新Progress进度
MyTask task = new MyTask();
task.execute();

4.运行效果

二、透明Dialog

1.准备Dialog背景图片

2.在values/styles.xml中添加自定义透明风格

<style name="MyDialogStyle">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowFrame">@null</item><!--边框-->
        <item name="android:windowNoTitle">true</item><!--无标题-->
        <item name="android:windowIsFloating">true</item><!--是否浮现在activity之上-->
        <item name="android:windowIsTranslucent">true</item><!--半透明--> 
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
        <item name="android:backgroundDimEnabled">true</item><!--模糊-->  
    </style>

3.新建DialogActivity，修改主题为Dialog样式

<activity
android:name=".DialogActivity"                    android:label="@string/title_activity_dialog"
<!-- 执行自己上面自定义的样式 -->
android:theme="@style/MyDialogStyle" >
</activity>

4.添加布局文件activity_dialog.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">    

    <RelativeLayout  
        android:layout_width="200dp"  
        android:layout_height="200dp"  
        android:layout_centerInParent="true"  
        android:background="@drawable/back" >  

        <LinearLayout  
            android:layout_width="fill_parent"  
            android:layout_height="fill_parent"  
            android:layout_alignParentLeft="true"  
            android:layout_alignParentTop="true"  
            android:gravity="center"  
            android:orientation="vertical" >  

            <ProgressBar  
                android:id="@+id/progressBar"  
                style="?android:attr/progressBarStyleLarge"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_gravity="center_horizontal" />  

            <TextView  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_marginTop="10dp"  
                android:text="正在登录···"  
                android:textColor="#fff"  
                android:textSize="20sp" />  
        </LinearLayout>  

    </RelativeLayout>  

</RelativeLayout>  

5.弹出Dialog，此时的Dialog其实就是一个Activity，在需要弹出的地方使用startActivity（Intent) 方法即可弹出Dialog。

Intent intent = new Intent(MainActivity.this,DialogActivity.class);
                startActivity(intent);

6.运行效果

三、NiftyDialogEffects开源项目

github地址：https://github.com/sd6352051/NiftyDialogEffects

1.libs目录下添加nineoldandroids-2.4.0.jar包

2.使用方式，创建Dialog实例

NiftyDialogBuilder dialogBuilder=NiftyDialogBuilder.getInstance(this);

dialogBuilder
    .withTitle("Modal Dialog")
    .withMessage("This is a modal Dialog.")
    .show();

3.设置Dialog参数

dialogBuilder
    .withTitle("Modal Dialog")                                  //设置标题
    .withTitleColor("#FFFFFF")                                  //标题颜色
    .withDividerColor("#11000000")                              //分割线
    .withMessage("This is a modal Dialog.")                     //提示信息
    .withMessageColor("#FFFFFFFF")                              //信息颜色
    .withDialogColor("#FFE74C3C")                               //Dialog颜色
    .withIcon(getResources().getDrawable(R.drawable.icon))
//设置图标
    .withDuration(700)                                          //动画时间
    .withEffect(effect)                                         //动画样式
    .withButton1Text("OK")                                      //按钮1
    .withButton2Text("Cancel")                                  //按钮2
    .isCancelableOnTouchOutside(true)                           //触摸外部消失
    .setCustomView(R.layout.custom_view,v.getContext())         //设置自定义布局
    .setButton1Click(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(v.getContext(), "i‘m btn1", Toast.LENGTH_SHORT).show();
                    }
    })
    .setButton2Click(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(v.getContext(),"i‘m btn2",Toast.LENGTH_SHORT).show();
        }
    })
    .show();

4.支持的动画种类，点击查看支持的动画，实例下载：NiftyDialogEffects Demo

5.效果正如本文开头所展示的那样