自定義ProgressDialog

一.動畫效果的progressDialog如下圖:

                                                       

加載框中的圖片不斷變化，那就讓我們看看是怎麼實現的吧！

第一步：在res下創建一個文件夾anim，下面放progress_animation.xml,動畫列表文件progress_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"
    >
    <item android:drawable="@drawable/progress1" android:duration="2000"/>
    <item android:drawable="@drawable/progress2" android:duration="2000"/>
    <item android:drawable="@drawable/progress3" android:duration="2000"/>
    <item android:drawable="@drawable/progress4" android:duration="2000"/>
    <item android:drawable="@drawable/progress5" android:duration="2000"/>
    <item android:drawable="@drawable/progress6" android:duration="2000"/>
    <item android:drawable="@drawable/progress7" android:duration="2000"/>
    <item android:drawable="@drawable/progress8" android:duration="2000"/>
</animation-list>

這裏的oneshot代表循環播放，false循環播放，true不循環播放,這裏創建了一個動畫列表。duration是間期的意思，也就是該圖播放的持續時間。

第二步:自定義dialog的佈局文件progress_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:gravity="center_vertical"
    >
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="10dp"
        >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            >
            <ImageView
                android:id="@+id/loadingImageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@anim/progress_animation"
                />
            <TextView
                android:id="@+id/loadingText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"         
                android:textSize="20dp"
                android:textColor="@android:color/white"
                android:gravity="center"
                android:layout_alignParentBottom="true"
                android:layout_gravity="bottom|center"
                />
        </RelativeLayout>


    </android.support.v7.widget.CardView>

</LinearLayout>

這個佈局很簡單，就是一個ImageView和TextView,值得一提的是ImageView的src是讓圖片顯示原圖大小，Background是讓圖片顯示佈局的大小。

第三步：Dialog風格設置:

<style name="CustomProgressDialog" parent="@style/CustomDialog">
    <item name="android:windowFrame">@null</item>		//Dialog的windowFrame框爲無
    <item name="android:windowIsFloating">true</item>		//是否浮現在activity之上
    <item name="android:windowContentOverlay">@null</item>	//窗口內容覆蓋                             <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>                      <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>    //窗口軟輸入模式         <item name="android:windowNoTitle">true</item>                                                    </style>

第四步:自定義dialog的實現

public class CustomProgressDialog extends Dialog {
    private static Context context;
    private static CustomProgressDialog mCustomProgressDialog = null;
    public CustomProgressDialog(Context context) {
        super(context);
        this.context = context;
    }

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

    public static CustomProgressDialog createDialog(Context context) {
        mCustomProgressDialog = new CustomProgressDialog(context, R.style.CustomProgressDialog);
        mCustomProgressDialog.setContentView(R.layout.progress_dialog);
        mCustomProgressDialog.getWindow().getAttributes().gravity = Gravity.CENTER;
        return mCustomProgressDialog;
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        if(mCustomProgressDialog == null) {
            return;
        }

        ImageView imageView = (ImageView) findViewById(R.id.loadingImageView);
        if(imageView.getDrawable() == null && imageView.getBackground() == null) {
            return;
        }

        AnimationDrawable animationDrawable = (AnimationDrawable) (imageView.getDrawable()   != null ? imageView.getDrawable():imageView.getBackground());
        animationDrawable.start();

        super.onWindowFocusChanged(hasFocus);
    }

    public CustomProgressDialog setMessage(String msg) {
        TextView textView = (TextView) findViewById(R.id.loadingText);
        if(textView != null) {
            textView.setText(msg);
        }
        return mCustomProgressDialog;
    }
}

1.創建dialog(獲取style與佈局layout文件以及設置gravity)

2.重寫onWindowFocusChanged()方法,開啓動畫

二.自定義旋轉圓圈progressBar

1.自定義drawable文件:progre.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360"
    >
    <shape
        android:shape="ring"
        android:innerRadiusRatio="3"
        android:thicknessRatio="8"
        android:useLevel="false">
        <gradient

            android:type="sweep"
            android:centerY="0.50"
            android:centerX="0.50"
            android:useLevel="false"
            android:startColor="#FFFFFF"
            android:centerColor="#FFFFFF"
            android:endColor="#99cc00"
            />
        <size
            android:width="5dp"
            android:height="5dp"/>


    </shape>

</rotate>

大體就是創建一個shape,將其放在rotate中使其旋轉即可

2.在progressBar中調用indeterminateDrawable（）方法。

<ProgressBar
    android:padding="30dp"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:fitsSystemWindows="true"
    android:layout_gravity="center"
    android:indeterminateDrawable="@drawable/progre"
    />