【Android UI設計】Dialog對話方塊詳解（二），androiddialog

【Android UI設計】Dialog對話方塊詳解（二），androiddialog

上一篇我們介紹了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樣式

<activityandroid: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.效果正如本文開頭所展示的那樣