自定义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。