簡單好看的Android圓形進度條對話方塊開源庫
本文由碼農網 – 蘇耀東原創,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃!
簡介
本文介紹CircleProgressDialog開源庫的使用及實現的詳細過程,該開源庫主要實現以下幾個功能:
- 自定義一個好看的圓形進度條,可直接在佈局檔案中使用,可設定圓環寬度、圓環顏色、圓環陰影大小等屬性;
- 實現自定義的dialog,用於使用者等待時的顯示,通過簡單的程式碼即可直接呼叫顯示,同時提供api進行顏色、文字等設定
通過本文可瞭解到自定義view的相關知識及自定義dialog的方法
github連結如下,覺得還可以請幫忙點下star~
使用效果
首先看下使用效果:
有兩種使用方式
佈局檔案中使用
提供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的方法。
本文連結:http://www.codeceo.com/article/android-circle-progressbar.html
本文作者:碼農網 – 蘇耀東
[ 原創作品,轉載必須在正文中標註並保留原文連結和作者等資訊。]
相關文章
- canvas的簡單圓形進度條Canvas
- Android通知之進度條對話方塊通知Android
- Android自定義圓形進度條Android
- QT 等待對話方塊/進度QT
- Flutter 波浪圓形進度條Flutter
- 自定義圓形進度條
- SVG畫圓形進度條SVG
- Android自定義圓形進度條原始碼解析Android原始碼
- Android進階 自定義View(三)圓形刻度進度條AndroidView
- Android自定義圓形進度條實現程式碼Android
- Android自定義View——從零開始實現圓形進度條AndroidView
- [-Flutter 自定義元件-] 圓形進度條Flutter元件
- CSS3圓形進度條效果CSSS3
- 使用canvas繪製圓形進度條Canvas
- Android通知之單選對話方塊通知Android
- MFC3 基本對話方塊的使用(三) 滑塊與進度條(sdnu)(C++大作業)C++
- canvas圓形進度條註釋超全Canvas
- 自定義一個簡單的載入對話方塊
- android 多項對話方塊Android
- Android Dialog對話方塊Android
- Android自定義控制元件系列之圓形進度條的實現Android控制元件
- Android閃屏頁圓形倒數計時進度條實現Android
- android常用對話方塊封裝Android封裝
- 可拖拽圓形進度條元件(支援移動端)元件
- 常用元件 / 對話方塊及選單元件
- Unity資源Assetmport New Asset對話方塊Unity
- Android 自定義 View:包含多種狀態的下載用圓形進度條AndroidView
- android自帶ProgressBar圓形進度條修改顏色的技巧方法無bug探索Android
- Android對話方塊Dialog深度剖析Android
- Android 對話方塊 Dialog 深度剖析Android
- Android通知之普通對話方塊通知Android
- Android通知之列表對話方塊通知Android
- Android通知之多選對話方塊通知Android
- 編輯Android程式遊戲對話方塊Android遊戲
- Android UI系列-----Dialog對話方塊AndroidUI
- Android 自定義圓形旋轉進度條,仿微博頭像載入效果Android
- c#中的模態對話方塊和非模態對話方塊C#
- Android花樣loading進度條(三)-配文字環形進度條Android