Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android資訊 >> 簡單好看的Android圓形進度條對話框開源庫

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

編輯：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的方法。

  1. 上一頁:
  2. 下一頁:
Android資訊
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android圖片加載的框架Fresco使用詳解 Android事件總線還能怎麼玩？ Android 網絡框架 OKHttp 學習 Android UI控件系列：RelativeLayout(相對布局) 最全面的 Android 編碼規范指南 Ubuntu下Android源碼以及內核下載與編譯
捕獲Android文本中鏈接點擊事件

Android中的TTextView很強大，我們可以不僅可以設置
Android aidl Binder框架淺析

1、概述 Binder能干什麼？Binder可以提供系統中任何程
Android View 自定義 RangeSeekBar 范圍選擇器

前段時間群裡兄弟項目中有類似這樣的需求 我看到兄弟受苦受難，於
實戰解析Android架構設計原則

嘿！經過一段時間收集了大量反饋意見後，我認為應該來說說這個話題了
閱讀排行版
Copyright © Android教程網 All Rights Reserved