自定義一個簡單的載入對話方塊

AaronZheng發表於2019-04-07

在公司專案遇到了這麼一個小需求，在載入網頁的時候顯示一個進度條，讓使用者知道目前正在載入中，因為如果沒有進度條，恰好某些使用者網速比較慢，那麼在載入網頁的過程中，螢幕畫面會定在跳轉前的畫面，這樣就會給使用者造成卡頓感，這是非常不好的，所以這麼一個小需求現在就簡單的做一下吧。

目前實現的效果是這樣的：

自定義一個簡單的載入對話方塊
為了實現對話方塊顯示時不可通過點選對話方塊外部或者點按返回鍵取消，我選擇的是直接用Dialog建立一個對話方塊物件，為什麼不直接用ProgressDialog呢？因為感覺直接用Dialog自由一些，根據自己需求吧，接下來開始分解步驟，很簡單。

1. 先寫好對話方塊的背景檔案

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="5dp" />

    <solid android:color="@color/bg_dialog" />

</shape>
複製程式碼

2. 編寫對話方塊需要的控制元件內容，這裡的對話方塊用到的是ProgressBar和TextView ，將上面寫好的背景設定給根佈局，其他引數根據需要調整

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_dialog"
    android:orientation="vertical"
    android:paddingStart="20dp"
    android:paddingTop="10dp"
    android:paddingEnd="20dp"
    android:paddingBottom="10dp">

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX="0.5"
        android:scaleY="0.5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="@string/dialog_progress_hint"
        android:textColor="#FFFFFFFF" />

</LinearLayout>
複製程式碼

3. 建立Dialog物件並初始化屬性，這裡我是封裝起來了，因為不止一個Activity用到，封裝起來也方便些

public class DialogUtil {

    private static Dialog sDialog;

    public static void showProgress(Context context) {
        if (sDialog == null) init(context);
        sDialog.show();
    }

    public static void dismissProgress() {
        if (sDialog.isShowing()) sDialog.dismiss();
    }

    private static void init(Context context) {
        sDialog = new Dialog(context);
        // 修改對話方塊預設背景為透明，因為不這麼設定的話，對話方塊預設是白色的
        // 然後你自定義的背景是黑色且有圓角，相信我，你不想看到的
        Window window = sDialog.getWindow();
        if (window != null) window.setBackgroundDrawableResource(android.R.color.transparent);
        // 設定自己編寫的佈局檔案，即剛才有 ProgressBar 和 TextView 的那個佈局檔案
        sDialog.setContentView(R.layout.dialog_progress);
        // 設定不可點選或點按返回鍵取消對話方塊，這樣相當於禁止了使用者與介面的互動
        // 實際情況根據需求而定
        sDialog.setCancelable(false);
//        sDialog.setCanceledOnTouchOutside(false);
    }
}
複製程式碼

4. 接下來只要在需要用到的地方，呼叫DialogUtil.showProgress(context)或DialogUtil.dismissProgress()就能顯示對話方塊了，到這裡就結束了。

  • 如果有更好的實現方法，請告訴我，這篇文章的主要目的也只是記錄下自己在學習路上所遇到的一些解決問題的方法，如果還能幫助到大家，那是再好不過了。

相關文章