YCProgress自定義百分比進度條

楊充發表於2018-12-04

目錄介紹

1.本庫優勢亮點
2.使用介紹
- 2.1 圓環百分比進度條
- 2.2 直線百分比進度條
- 2.3 仿防毒型別百分比進度條
3.注意要點
4.效果展示
5.其他介紹

1.本庫優勢亮點

圓環百分比進度條
- 簡便且小巧，支援設定多種屬性。可以設定內圓和外圓的顏色，設定圓環的邊緣寬度。
- 支援設定倒數計時總時間，可以呼叫start開始倒數計時，也可以呼叫stop暫停倒數計時，也可以自定義設定進度
仿防毒型別百分比進度條
- 支援設定多種型別，比如設定百分比+單位型別，或者設定空型別【也就是不顯示中間百分比】
- 支援設定進度條的顏色，未更新的進度條顏色；設定百分比文字大小，顏色；支援設定單位等多種屬性
- 支援允許多執行緒訪問，對於設定setProgress，新增synchronized關鍵字修飾。設定進度progress，如果小於0或者大於100，則拋異常。避免開發者使用造成其他問題。
針對進度條，對於設定color顏色的方法，增加了註解@ColorInt，限制開發者呼叫color資源
使用註解代替了列舉，針對設定列舉的方法，使用註解限制開發者呼叫時傳入的型別。具體可見程式碼案例！
註釋十分詳細，作為開源的lib庫，我覺得要讓使用者一目瞭然。方便呼叫同時，知道每個方法的作用。
程式碼量少，如果想學習並深入自定義控制元件，可以從簡單開始。這個專案就很符合！
專案地址：github.com/yangchong21…

2.使用介紹

整合庫：compile 'cn.yc:YCProgressLib:1.2.6'

2.1 圓環百分比進度條

在佈局中

//也可以設定佈局中的attr屬性
<com.ns.yc.ycprogresslib.CircleProgressbar
    android:id="@+id/pb_1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:text="進度條" />

複製程式碼

使用方法

//設定型別
pb_1.setProgressType(ProgressBarUtils.ProgressType.COUNT);
//設定圓形的填充顏色
pb_1.setInCircleColor(getResources().getColor(R.color.redTab));
//設定外部輪廓的顏色
pb_1.setOutLineColor(getResources().getColor(R.color.grayLine));
//設定進度監聽
pb_1.setCountdownProgressListener(1, progressListener);
//設定外部輪廓的顏色
pb_1.setOutLineWidth(2);
//設定進度條線的寬度
pb_1.setProgressLineWidth(5);
//設定進度
pb_1.setProgress(60);
//設定倒數計時總時間
pb_1.setTimeMillis(3000);
//設定進度條顏色
pb_1.setProgressColor(getResources().getColor(R.color.colorPrimary));

//開始
pb_1.start();
//暫停
pb_1.stop();
//重新開始
pb_1.reStart();
複製程式碼

2.2 直線百分比進度條

在佈局中

<com.ns.yc.ycprogresslib.NumberProgressbar
    android:id="@+id/bar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<com.ns.yc.ycprogresslib.NumberProgressbar
    android:id="@+id/bar2"
    android:layout_marginTop="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:progress_max="100"
    app:progress_reached_bar_height="3dp"
    app:progress_unreached_bar_height="3dp"
    app:progress_reached_color="@color/colorPrimary"
    app:progress_unreached_color="@color/gray3"
    app:progress_text_size="14sp"
    app:progress_text_color="@color/colorAccent"
    app:progress_text_visibility="visible"/>
複製程式碼

程式碼呼叫

bar1 = (NumberProgressbar) findViewById(R.id.bar1);
//設定倒數計時總時間
bar1.setTimeMillis(10000);
//設定最大進度條的值
bar1.setMax(100);
//設定進度條文字的顏色
bar1.setProgressTextColor(this.getResources().getColor(R.color.colorAccent));
//設定進度條文字的大小
bar1.setProgressTextSize(ProgressBarUtils.sp2px(this,14));
//設定百分比文字內容是否可見
bar1.setNumberTextVisibility(ProgressBarUtils.NumberTextVisibility.Visible);
//設定百分比進度條的高度
bar1.setReachedBarHeight(10);
//設定未更新百分比進度條的高度
bar1.setUnreachedBarHeight(10);
//設定百分比進度條的顏色
bar1.setReachedBarColor(this.getResources().getColor(R.color.redTab));
//設定未更新百分比進度條的顏色
bar1.setUnreachedBarColor(this.getResources().getColor(R.color.blackText2));
//設定百分比進度條的監聽
bar1.setOnProgressBarListener(new OnNumberProgressListener() {
    @Override
    public void onProgressChange(int current, int max) {

    }
});

//開始
bar1.start();
//暫停
bar1.stop();
複製程式碼

2.3 仿防毒型別百分比進度條

佈局程式碼

<com.ns.yc.ycprogresslib.RingProgressBar
    android:id="@+id/bar_percent"
    android:layout_width="100dp"
    android:layout_height="100dp"/>
複製程式碼

如何呼叫

bar_percent = (RingProgressBar) findViewById(R.id.bar_percent);
//設定進度
bar_percent.setProgress(0);
//設定更新進度條顏色
bar_percent.setDotColor(this.getResources().getColor(R.color.colorAccent));
//設定未更新部分的進度條顏色
bar_percent.setDotBgColor(this.getResources().getColor(R.color.blackText));
//設定百分比文字顏色
bar_percent.setPercentTextColor(this.getResources().getColor(R.color.blackText1));
//設定百分比文字大小
bar_percent.setPercentTextSize(ProgressBarUtils.dp2px(this,16.0f));
//設定展示的型別
bar_percent.setShowMode(ProgressBarUtils.RingShowMode.SHOW_MODE_PERCENT);
//設定單位的文字內容
bar_percent.setUnitText("%");
//設定單位的文字大小
bar_percent.setUnitTextSize(ProgressBarUtils.dp2px(this,16.0f));
//設定單位的文字顏色
bar_percent.setUnitTextColor(this.getResources().getColor(R.color.blackText1));
複製程式碼

可以設定多種型別
- 第一種：百分比+單位【支援自己設定單位，比如設定%，或者設定毫秒s等】
- 第二種：空顯示模式【也就是不顯示中間的部分】

3.注意要點

3.1 不論是圓環進度條還是直線進度條，在呼叫setProgress設定進度時，增加了驗證進度的功能。因為如果設定值超過100或者小於0，該方法就起作用呢！

/**
 * 驗證進度。
 *
 * @param progress      你要驗證的進度值。
 * @return              返回真正的進度值。
 */
private int validateProgress(int progress) {
    if (progress > 100){
        progress = 100;
    } else if (progress < 0){
        progress = 0;
    }
    return progress;
}
複製程式碼

3.2 針對CircleProgressbar和NumberProgressbar自定義控制元件，如果呼叫start方法開始迴圈執行setProgress，程式意外銷燬，則注意：

/**
 * 當自定義控制元件銷燬時，則呼叫該方法
 */
@Override
protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    stop();
}
複製程式碼

專案地址：github.com/yangchong21…

4.效果展示

5.其他介紹

關於其他內容介紹

版本更新說明

v1.0.0 更新於2016/2/10 作用於投資界下載更新進度條，學習自定義控制元件
v1.1.1 更新於2016/8/12 針對圓環進度條，新增自定義attr屬性
v1.1.2 更新於2017/3/10 針對圓環進度條新增設定倒數計時總時間，start和stop方法
v1.1.3 更新於2017/5/27 針對設定進度的方法，增加校驗，不能小於0或者大於100
v1.2.5 更新於2018年8月24日新增了直線百分比進度條，針對部分方法新增註解
v1.2.6 更新於2018年11月30日新增了詳細的註釋
v1.2.7 更新於2018/12/3 更新targetSdkVersion版本是27
關於直線百分比進度條參考了程式碼家NumberProgressBar專案：github.com/daimajia/Nu…

關於部落格彙總連結

其他推薦

部落格筆記大彙總【15年10月到至今】，包括Java基礎及深入知識點，Android技術部落格，Python學習筆記等等，還包括平時開發中遇到的bug彙總，當然也在工作之餘收集了大量的面試題，長期更新維護並且修正，持續完善……開源的檔案是markdown格式的！同時也開源了生活部落格，從12年起，積累共計47篇[近20萬字]，轉載請註明出處，謝謝！
連結地址：github.com/yangchong21…
如果覺得好，可以star一下，謝謝！當然也歡迎提出建議，萬事起於忽微，量變引起質變！

關於LICENSE

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
複製程式碼

自定義進度條
2017-08-09
vue 自定義指令實現，滾動條百分比進度條。
2019-03-15
Vue
自定義view - 進度條
2017-09-21
View
自定義進度條列表
2017-09-03
iOS 自定義進度條
2018-01-08
iOS
短視訊商城系統，Android進度條，自定義進度條，顯示百分比
2022-06-21
Android
自定義圓形進度條
2017-09-03
ios自定義圓環進度條
2018-06-29
iOS
laravel自定義命令列印進度條
2020-09-25
Laravel命令列
carousel 輪播自定義進度條
2024-03-12
Android自定義View 百分比進度動畫
2017-12-23
AndroidView動畫
Artisan 進度條自定義輸出格式
2022-01-18
Android自定義圓形進度條
2019-01-18
Android
自定義SeekBar 實時顯示百分比進度
2018-01-23
【Android】自定義ProgressView-進度條動畫
2018-08-14
AndroidView動畫
android 自定義酷炫進度條動畫
2019-01-27
Android動畫
Js 百分比進度條
2018-08-26
JS
Android進階自定義View（三）圓形刻度進度條
2017-12-20
AndroidView
Android自定義圓形進度條原始碼解析
2017-04-26
Android原始碼
JavaScript百分比動態進度條
2018-07-08
JavaScript
svg環形百分比進度條
2017-02-01
SVG
Android自定義圓形進度條實現程式碼
2016-01-19
Android
canvas環形百分比進度條效果
2017-03-25
Canvas
js百分比載入進度條效果
2017-04-16
JS
打造可顯示上傳內容的自定義進度條
2017-12-26
自定義SeekBar顯示進度
2018-01-25
canvas百分比環形進度條程式碼
2018-07-17
Canvas
短視訊平臺搭建，Android自定義旋轉進度條
2021-12-24
Android
javascript百分比進度條效果程式碼例項
2017-04-14
JavaScript
【新特性速遞】進度條，進度條，進度條
2020-06-12
[-Flutter 自定義元件-] 圓形進度條
2019-08-02
Flutter元件
Android Paint應用之自定義View實現進度條控制元件
2017-12-26
AndroidAIView控制元件
3個自定義view佈局：矩形TextView，圓形進度條，圓環view
2017-11-03
TextView
Android自定義View——從零開始實現圓形進度條
2017-12-14
AndroidView
Android自定義控制元件系列之圓形進度條的實現
2015-03-31
Android控制元件
javascript實現的帶有百分比的進度條效果
2017-04-01
JavaScript
Android 自定義圓形旋轉進度條，仿微博頭像載入效果
2019-02-28
Android
element-ui 上傳元件自定義上傳沒有進度條解決方法
2020-10-18
UI元件