Android自定義加載等待Dialog彈窗控件(仿ios效果實作)

效果圖

使用說明

1、項目下的build.gradle添加

allprojects {
        repositories {
            ...
            maven { url 'https://www.jitpack.io' }
        }
    }
           

2、子產品下的build.gradle添加依賴

dependencies {
            compile 'com.github.gittjy:LoadingDialog:1.0.2'
    }
           

3、在代碼中使用

LoadingDailog.Builder loadBuilder=new LoadingDailog.Builder(this)
                .setMessage("加載中...")
                .setCancelable(true)
                .setCancelOutside(true);
        LoadingDailog dialog=loadBuilder.create();
        dialog.show();
           

實作過程

布局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dialog_loading_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="150dp"
        android:layout_height="110dp"
        android:background="@drawable/loading_bg"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="10dp"
        android:paddingLeft="21dp"
        android:paddingRight="21dp"
        android:paddingTop="10dp">

        <ProgressBar
            android:id="@+id/progressBar1"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="center_horizontal"
            android:indeterminateBehavior="repeat"
            android:indeterminateDrawable="@drawable/dialog_loading"
            android:indeterminateOnly="true" />

        <TextView
            android:id="@+id/tipTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="加載中..."
            android:textColor="#f0f0f0"
            android:textSize="15sp" />
    </LinearLayout>

</LinearLayout>
           

布局檔案挺簡單的，不過說實在的，我對布局有些東西掌握并不好，有的隻知道這樣可以去達到想要實作的效果，但是不知道為什麼…..

簡單說說這個，最外面是一個LinearLayout，給他設定了一個.9.png的背景圖作為整個彈窗的背景，然後在上面用一個progressbar來顯示一個圈兒轉起來的動畫效果，下面的textview用來設定提示資訊

在progressbar中有幾個不常用到的屬性說一下：

indeterminateBehavior，indeterminateDrawable，indeterminateOnly

這三個都是用來設定progressbar顯示的進度模式為模糊的模式，即不顯示具體的進度數值，說通俗點兒就是沒有百分比啥的效果，隻有一個不明物體在那兒轉得飛起，其中indeterminateDrawable指定了一個旋轉的資源檔案，資源檔案定義了一個動畫效果，具體代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@mipmap/dialog_loading_img"
    android:pivotX="50%"
    android:pivotY="50%" />
           

資源檔案中設定的圖檔資源就是這個

，然後指定了旋轉中心為圖檔中心點

到這，布局檔案基本上就準備好了…

自定義Dialog

接下來的工作就是自定義一個LoadingDialog類繼承Dialog，把寫好的布局檔案加載出來，同時提供一些自定義屬性

直接上代碼：

package com.android.tu.loadingdialog;

import android.app.Dialog;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

/**
 * Created by tjy on 2017/6/19.
 */
public class LoadingDialog extends Dialog{


    public LoadingDialog(Context context) {
        super(context);
    }

    public LoadingDialog(Context context, int themeResId) {
        super(context, themeResId);
    }

    public static class Builder{

        private Context context;
        private String message;
        private boolean isShowMessage=true;
        private boolean isCancelable=false;
        private boolean isCancelOutside=false;


        public Builder(Context context) {
            this.context = context;
        }

        /**
         * 設定提示資訊
         * @param message
         * @return
         */

        public Builder setMessage(String message){
            this.message=message;
            return this;
        }

        /**
         * 設定是否顯示提示資訊
         * @param isShowMessage
         * @return
         */
        public Builder setShowMessage(boolean isShowMessage){
            this.isShowMessage=isShowMessage;
            return this;
        }

        /**
         * 設定是否可以按傳回鍵取消
         * @param isCancelable
         * @return
         */

        public Builder setCancelable(boolean isCancelable){
            this.isCancelable=isCancelable;
            return this;
        }

        /**
         * 設定是否可以取消
         * @param isCancelOutside
         * @return
         */
        public Builder setCancelOutside(boolean isCancelOutside){
            this.isCancelOutside=isCancelOutside;
            return this;
        }

        public LoadingDialog create(){

            LayoutInflater inflater = LayoutInflater.from(context);
            View view=inflater.inflate(R.layout.dialog_loading,null);
            LoadingDialog loadingDailog=new LoadingDialog(context,R.style.MyDialogStyle);
            TextView msgText= (TextView) view.findViewById(R.id.tipTextView);
            if(isShowMessage){
                msgText.setText(message);
            }else{
                msgText.setVisibility(View.GONE);
            }
            loadingDailog.setContentView(view);
            loadingDailog.setCancelable(isCancelable);
            loadingDailog.setCanceledOnTouchOutside(isCancelOutside);
            return  loadingDailog;

        }


    }
}
           

在這裡，沒有直接在構造函數中設定各種屬性，加載布局什麼的，而是采用了Builder的模式，至于為什麼采用這個模式，因為Android自己的AlertDialog就是采用的這種模式啊，哈哈哈，是不是感覺很有道理。另外，推薦一篇文章，寫的很通俗，看了就知道Builder模式的好處了，賣熱幹面的啟發 —Builder 模式

簡單解釋一下上面的代碼，我在LoadingDialog的内部又定義了一個内部類Builder，Bulder類内部提供了各個可能需要自定義的屬性，包括設定提示資訊，設定是否可以取消等，但其實在我們使用AlertDialog的時候就知道，我們并不是需要去設定所有屬性，很多都隻需要保持預設值，這時候Builder的模式的好處就出來了，每個屬性都會傳回類型都是Builder，使用者可以在後面自由的連續.set所需要的屬性，想起什麼設定什麼就好了，不需要關心順序、個數的多少，最終都會傳回Builder類型的對象；

最後在Builder類中又定義了一個create方法，這個方法也是和Android自己的AlertDialog中的create方法一樣，它将傳回一個Dialog對象，也就是說在這個方法中，我們需要做的就是根據各種屬性和布局檔案，建立一個Dialog對象并傳回。這裡面就是一些自定義Dialog的正常代碼，就不詳細解釋了…

到這，自定義的一個Dialog就已經做好了…寫完了發現真的沒有什麼技術含量…不過熟悉熟悉這個過程和Builder模式也還是挺好的…

完整代碼和資源檔案可以在github上下載下傳

github

2017.6.22 23:24

806實驗室