簡單好看的Android圓形進度條對話方塊開源庫

本文由碼農網 – 蘇耀東原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

簡介

本文介紹CircleProgressDialog開源庫的使用及實現的詳細過程，該開源庫主要實現以下幾個功能：

• 自定義一個好看的圓形進度條，可直接在佈局檔案中使用，可設定圓環寬度、圓環顏色、圓環陰影大小等屬性；
• 實現自定義的dialog，用於使用者等待時的顯示，通過簡單的程式碼即可直接呼叫顯示，同時提供api進行顏色、文字等設定

通過本文可瞭解到自定義view的相關知識及自定義dialog的方法

github連結如下，覺得還可以請幫忙點下star~

github連結

使用效果

首先看下使用效果：

有兩種使用方式

佈局檔案中使用

提供loading_color、loading_width、shadow_offset進行設定

<com.syd.oden.circleprogressdialog.view.RotateLoading
            oden:loading_color="@color/colorAccent"
            oden:loading_width="6dp"
            oden:shadow_offset="8dp"
            android:layout_width="100dp"
            android:layout_height="100dp" />

程式碼中使用，對話方塊形式彈出

如果直接採用預設設定直接呼叫以下程式碼即可

CircleProgressDialog circleProgressDialog;
circleProgressDialog = new CircleProgressDialog(this);
circleProgressDialog.showDialog();

當然，還可以進行相關屬性的設定，同時在等待的過程中可根據程式執行情況動態改變提示文字的內容及顏色

CircleProgressDialog circleProgressDialog;
circleProgressDialog = new CircleProgressDialog(this);
//可對對話方塊的大小、進度條的顏色、寬度、文字的顏色、內容等屬性進行設定
circleProgressDialog.setDialogSize(15);
circleProgressDialog.setProgressColor(Color.parseColor("#FFFFFF"));
circleProgressDialog.setTextColor(Color.parseColor("#FFFFFF"));
...
circleProgressDialog.showDialog();  //顯示對話方塊

//顯示過程中可根據狀態改變文字內容及顏色
circleProgressDialog.changeText("erro:...");
circleProgressDialog.changeTextColor(Color.parseColor("##EB0000"));

circleProgressDialog.dismiss();//關閉對話方塊

當然在使用前需先匯入該庫，僅需加入兩行程式碼：

在工程的 build.gradle中加入：

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

module的build.gradle中加入依賴：

dependencies {
            compile 'com.github.autume:CircleProgressDialog:1.0.0'
    }

具體實現過程

自定義view

相關知識

繪製弧：

drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

• oval是RecF型別的物件，其定義了橢圓的形狀
• startAngle指的是繪製的起始角度，鐘錶的3點位置對應著0度，如果傳入的startAngle小於0或者大於等於360，那麼用startAngle對360進行取模後作為起始繪製角度。
• sweepAngle指的是從startAngle開始沿著鐘錶的順時針方向旋轉掃過的角度。如果sweepAngle大於等於360，那麼會繪製完整的橢圓環。如果sweepAngle小於0，那麼會用sweepAngle對360進行取模後作為掃過的角度。
• useCenter是個boolean值，如果為true，表示在繪製完環之後，用橢圓的中心點連線環上的起點和終點以閉合環；如果值為false，表示在繪製完環之後，環的起點和終點直接連線，不經過橢圓的中心點。

設定矩形：

RectF rectF = new RectF(100, 100, 300, 300);

這四個引數分別代表的意思是：left top right bottom 左 上 右 下

• left ： 矩形左邊的X座標
• top: 矩形頂部的Y座標
• right : 矩形右邊的X座標
• bottom： 矩形底部的Y座標

其實就是矩形的左上角和右下角的座標值

首先加入自定義view的屬性

我們定義了顏色，寬度，陰影偏移大小，是否顯示等屬性，format是值該屬性的取值型別:

一共有：string,color,demension,integer,enum,reference,float,boolean,fraction,flag;

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="RotateLoading">
        <attr name="loading_width" format="dimension"/>
        <attr name="loading_color" format="color"/>
        <attr name="shadow_offset" format="dimension"/>
        <attr name="loading_visible" format="boolean"/>
    </declare-styleable>

</resources>

編寫自定義view–RotateLoading

預設相關屬性

private final int DEFAULT_COLOR = Color.WHITE; //預設顏色
private final int DEFAULT_WIDTH = 6;
private final int DEFAULT_SHADOW_POSITION = 2;
private final boolean DEFAULT_VISIBLE = true;

private int color = DEFAULT_COLOR;
private int width = dpToPx(DEFAULT_WIDTH);
private int shadowOffset = dpToPx(DEFAULT_SHADOW_POSITION);
private boolean isStart = DEFAULT_VISIBLE;

private Paint mPaint = new Paint();
private RectF loadingRectF;
private RectF shadowRectF;

//對稱的兩個弧形起始角度
private int topDegree = 10;
private int bottomDegree = 190;

獲取自定義屬性

private void obtainStyleAttrs(AttributeSet attrs) {
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.RotateLoading);
        color = typedArray.getColor(R.styleable.RotateLoading_loading_color, color);
        width = (int) typedArray.getDimension(R.styleable.RotateLoading_loading_width, width);
        shadowOffset = (int) typedArray.getDimension(R.styleable.RotateLoading_shadow_offset, shadowOffset);
        isStart = typedArray.getBoolean(R.styleable.RotateLoading_loading_visible, isStart);
        typedArray.recycle();
    }

Paint初始化

private void initView() {
        mPaint.setColor(color);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(width);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
    }

初始化繪製弧形所需的RectF

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        arc = 10;
        //佔滿介面 邊距為2*width
        loadingRectF = new RectF(2 * width, 2 * width, w - 2 * width, h - 2 * width);
        shadowRectF = new RectF(2 * width + shadowOffset, 2 * width + shadowOffset, w - 2 * width + shadowOffset, h - 2 * width + shadowOffset);
    }

重寫onDraw，繪出圖形

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (!isStart) {
            return;
        }

        mPaint.setColor(Color.parseColor("#1a000000"));
        canvas.drawArc(shadowRectF, topDegree, arc, false, mPaint);
        canvas.drawArc(shadowRectF, bottomDegree, arc, false, mPaint);

        mPaint.setColor(color);
        canvas.drawArc(loadingRectF, topDegree, arc, false, mPaint);
        canvas.drawArc(loadingRectF, bottomDegree, arc, false, mPaint);

        try {
            Thread.sleep(2);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        topDegree += 10;
        bottomDegree += 10;
        if (topDegree > 360) {
            topDegree = topDegree - 360;
        }
        if (bottomDegree > 360) {
            bottomDegree = bottomDegree - 360;
        }

        if (changeBigger) {
            if (arc < 160) {
                arc += 2.5;
                invalidate();
            }
        } else {
            if (arc > 10) {
                arc -= 5;
                invalidate();
            }
        }
        if (arc == 160 || arc == 10) {
            changeBigger = !changeBigger;
            invalidate();
        }
    }

至此，圓形進度條就完成了,完整的程式碼可在github上檢視

邊寫自定義dialog

編寫佈局檔案

就是放入剛才自定義的RotateLoading，同時在下面放入一個文字

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:oden="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#00000000"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/llProgress"
        android:layout_width="100dp"
        android:layout_height="100dp">

        <com.syd.oden.circleprogressdialog.view.RotateLoading
            android:id="@+id/rotateloading"
            oden:loading_visible="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <TextView
        android:id="@+id/progreeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#c0000000"
        android:text="loading..." />

</LinearLayout>

預設相關屬性

public class CircleProgressDialog {
private Context mContext;
private Dialog mDialog;

//預設引數
private int dialogSize = 65;
private int progressColor = Color.WHITE;
private int progressWidth = 6;
private int shadowOffset = 2;
private int textColor = Color.parseColor("#c0000000");
private String text = "loading...";

private TextView progressTextView;
private boolean isShowing = false;

...
}

初始化配置

public CircleProgressDialog(Context context) {
    this.mContext = context;
    init();
}

private void init() {
//dialog的大小,轉化成dp
float scale = mContext.getResources().getDisplayMetrics().density;
dialogSize = (int) (dialogSize * scale + 0.5f);

mDialog = new AlertDialog.Builder(mContext).create();
mDialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
}

呼叫顯示對話方塊

載入剛才的佈局檔案，呼叫自定義view的顯示

 public void showDialog() {
        mDialog.show();
        mDialog.setContentView(R.layout.dialog_circle_progress);

        //獲取控制元件
        progressTextView = (TextView) mDialog.findViewById(R.id.progreeTextView);
        RotateLoading mRotateLoading = (RotateLoading) mDialog.findViewById(R.id.rotateloading);
        LinearLayout layout = (LinearLayout) mDialog.findViewById(R.id.llProgress);

        //配置相關屬性
        layout.setLayoutParams(new LinearLayout.LayoutParams(dialogSize, dialogSize));
        mRotateLoading.setWidth(progressWidth);
        mRotateLoading.setColor(progressColor);
        mRotateLoading.setShadowOffset(shadowOffset);
        progressTextView.setTextColor(textColor);
        progressTextView.setText(text);

        mRotateLoading.start();
        isShowing = true;
    }

提供給使用者的API

包括相關屬性的set方法及兩個改變文字屬性的方法

public void changeText(String str) {
        if (progressTextView != null)
        {
            progressTextView.setText(str);
        }
    }

    public void changeTextColor(int color) {
        if (progressTextView != null)
        {
            progressTextView.setTextColor(color);
        }
    }
...
 public void setCancelable(boolean isCancelable) {
        if (mDialog != null)
        {
            mDialog.setCancelable(isCancelable);
        }
    }
...

ok，至此，自定義dialog也完成了。

總結

本文介紹了CircleProgressDialog開源庫的使用及其實現方法，藉此也介紹了自定義view及自定義dialog的方法。