1. 程式人生 > >android:自定義Material Design風格ProgressDialog的進度框

android:自定義Material Design風格ProgressDialog的進度框

1、前言

在安卓開發中,我們需要自定義進度條對話方塊ProgressDialog來滿足設計的需求。本來主要講解如何來快速實現一個自定義進度條並且修改進度條顏色。

先看下最終效果 :

2、程式碼編寫

2.1 佈局檔案

以下是自定義對話方塊的佈局,實際開發中我們可以根據需求進行個性化佈局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="100dp"
              android:layout_height
="100dp" android:layout_gravity="center_horizontal" android:background="@drawable/shape_dialog_bg" android:layout_centerInParent="true" android:orientation="vertical">
<RelativeLayout android:layout_width="match_parent" android:layout_height
="wrap_content" android:layout_marginTop="10dp">
<ProgressBar android:id="@+id/pb_load" android:layout_width="65dp" android:layout_height="65dp" android:layout_centerInParent="true"/> </RelativeLayout> <TextView
android:id="@+id/tv_load_dialog" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/loading" android:textColor="#9a9b98" android:textSize="12sp"/>
</LinearLayout>

shape程式碼:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

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

    <solid android:color="#88000000" />

</shape>

2.2 自定義ProgressDialog

直接貼程式碼,程式碼如下:

/**
 * 載入提醒對話方塊
 */
public class CustomDialog extends ProgressDialog
{
    public CustomDialog(Context context)
    {
        super(context);
    }

    public CustomDialog(Context context, int theme)
    {
        super(context, theme);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        init(getContext());
    }

    private void init(Context context)
    {
        //設定不可取消,點選其他區域不能取消,實際中可以抽出去封裝供外包設定
        setCancelable(false);
        setCanceledOnTouchOutside(false);

        setContentView(R.layout.load_dialog);
        WindowManager.LayoutParams params = getWindow().getAttributes();
        params.width = WindowManager.LayoutParams.WRAP_CONTENT;
        params.height = WindowManager.LayoutParams.WRAP_CONTENT;
        getWindow().setAttributes(params);
    }

    @Override
    public void show()
    {
        super.show();
    }
}

以上程式碼中,我們設定了不可取消對話方塊,在實際開發中,我們可以根據需求提供一個公開的方法供外部呼叫。除此之外,比如提示文字類容等,也可以暴露方法出來,本文的例子只實現了一個簡單的進度對話方塊。

2.3 使用

      CustomDialog dialog = new CustomDialog(this);
        dialog.show();

在acitvity中呼叫如上方法就可以顯示對話方塊,隱藏的使用對話方塊的dismiss()方法。

3、 存在問題

3.1 寬度過寬

程式碼寫完,演示效果的時候,我們發現對話方塊度出現了問題:在按照5.0以上系統左右倆邊留白了,對話方塊實際寬度大於我們佈局寬度,先看
效果圖。

解決寬度留白問題:

    <style name="CustomDialog" parent="Theme.AppCompat.Dialog">
        <item name="android:backgroundDimEnabled">false</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>

首先我們自定義style,繼承於Theme.AppCompat.Dialog,重寫倆個屬性,其中

  • android:backgroundDimEnabled:表示頁面時候變暗,我們設定false,不變暗
  • android:windowBackground:表示背景顏色,我們這種為透明,因為我們給佈局檔案背景設定了圓角,如果不設定對話方塊為透明的話,圓角部分會留白

建立好自定義樣式後,我們只要在建立對話方塊的時候呼叫另外過載構造方法設定樣式就可以new CustomDialog(this, R.style.CustomDialog)解決寬度不適配問題。

下看下效果圖:

3.2 修改顏色

搞定寬度問題後,如何修改進度條顏色呢,當時我也在這個地方卡了半個多小時,後來一層一層的點安卓資原始檔才發現在主題下有個colorAccent值控制對話方塊顏色,其實他的意思是著重色,像按鈕,toolbar都是預設採用這個顏色。我們在自定義樣式中加上這個就行。
如下程式碼:

    <style name="CustomDialog" parent="AppTheme">
        <item name="android:backgroundDimEnabled">false</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="colorAccent">#ffE91E63</item>
    </style>

這裡需要注意的是使用colorAccent相容低版本,而不是android:colorAccent