碼上快樂

相關內容    簡體    繁體

Android studio ProgressBar(進度條)實例

本文轉載自   查看原文   2021-04-12 16:20   296 

1.常用屬性講解與基礎實例

從官方文檔，我們看到了這樣一個類關系圖：

ProgressBar繼承與View類，直接子類有AbsSeekBar和ContentLoadingProgressBar， 其中AbsSeekBar的子類有SeekBar和RatingBar，可見這二者也是基於ProgressBar實現的

常用屬性詳解：

  • android:max：進度條的最大值
  • android:progress：進度條已完成進度值
  • android:progressDrawable：設置軌道對應的Drawable對象
  • android:indeterminate：如果設置成true，則進度條不精確顯示進度
  • android:indeterminateDrawable：設置不顯示進度的進度條的Drawable對象
  • android:indeterminateDuration：設置不精確顯示進度的持續時間
  • android:secondaryProgress：二級進度條，類似於視頻播放的一條是當前播放進度，一條是緩沖進度，前者通過progress屬性進行設置！

對應的再Java中我們可調用下述方法：

  • getMax()：返回這個進度條的范圍的上限
  • getProgress()：返回進度
  • getSecondaryProgress()：返回次要進度
  • incrementProgressBy(int diff)：指定增加的進度
  • isIndeterminate()：指示進度條是否在不確定模式下
  • setIndeterminate(boolean indeterminate)：設置不確定模式下

接下來來看看系統提供的默認的進度條的例子吧！

系統默認進度條使用實例：

運行效果圖：

實現布局代碼：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><!-- 系統提供的圓形進度條,依次是大中小 --><ProgressBarstyle="@android:style/Widget.ProgressBar.Small"android:layout_width="wrap_content"android:layout_height="wrap_content"/><ProgressBarandroid:layout_width="wrap_content"android:layout_height="wrap_content"/><ProgressBarstyle="@android:style/Widget.ProgressBar.Large"android:layout_width="wrap_content"android:layout_height="wrap_content"/><!--系統提供的水平進度條--><ProgressBarstyle="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:max="100"android:progress="18"/><ProgressBarstyle="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:indeterminate="true"/></LinearLayout>

好吧，除了第二個能看，其他的就算了...系統提供的肯定是滿足不了我們的需求的！ 下面我們就來講解下實際開發中我們對進度條的處理！

2.使用動畫來替代圓形進度條

第一個方案是，使用一套連續圖片，形成一個幀動畫，當需要進度圖的時候，讓動畫可見，不需要 的時候讓動畫不可見即可！而這個動畫，一般是使用AnimationDrawable來實現的！好的，我們來 定義一個AnimationDrawable文件：

PS:用到的圖片素材：進度條圖片素材打包.zip

運行效果圖：

現步驟：

 

在res目錄下新建一個:anim文件件，然后創建amin_pgbar.xml的資源文件：

<?xml version="1.0" encoding="utf-8"?><animation-listxmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false"><itemandroid:drawable="@drawable/loading_01"android:duration="200"/><itemandroid:drawable="@drawable/loading_02"android:duration="200"/><itemandroid:drawable="@drawable/loading_03"android:duration="200"/><itemandroid:drawable="@drawable/loading_04"android:duration="200"/><itemandroid:drawable="@drawable/loading_05"android:duration="200"/><itemandroid:drawable="@drawable/loading_06"android:duration="200"/><itemandroid:drawable="@drawable/loading_07"android:duration="200"/><itemandroid:drawable="@drawable/loading_08"android:duration="200"/><itemandroid:drawable="@drawable/loading_09"android:duration="200"/><itemandroid:drawable="@drawable/loading_10"android:duration="200"/><itemandroid:drawable="@drawable/loading_11"android:duration="200"/><itemandroid:drawable="@drawable/loading_12"android:duration="200"/></animation-list>

接着寫個布局文件，里面僅僅有一個ImageView即可，用於顯示進度條，把src設置為上述drawable資源即可！ 最后到MainActivity.java

publicclassMainActivityextendsAppCompatActivity{privateImageView img_pgbar;privateAnimationDrawable ad;@Overrideprotectedvoid onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_pgbar =(ImageView) findViewById(R.id.img_pgbar);
        ad =(AnimationDrawable) img_pgbar.getDrawable();
        img_pgbar.postDelayed(newRunnable(){@Overridepublicvoid run(){
                ad.start();}},100);}}

這里只是寫了如何啟動動畫，剩下的就你自己來了哦~在需要顯示進度條的時候，讓ImageView可見； 在不需要的時候讓他隱藏即可！另外其實Progressbar本身有一個indeterminateDrawable，只需把 這個參數設置成上述的動畫資源即可，但是進度條條的圖案大小是不能直接修改的，需要Java代碼中 修改，如果你設置了寬高，而且這個寬高過大的時候，你會看到有多個進度條...自己權衡下吧~

3.自定義圓形進度條

相信你看完2會吐槽，卧槽，這么坑爹，拿個動畫來坑人，哈哈，實際開發中都這樣，當然上述 這種情況只適用於不用顯示進度的場合，如果要顯示進度的場合就沒用處了，好吧，接下來看下 網上一個簡單的自定義圓形進度條！代碼還是比較簡單，容易理解，又興趣可以看看，或者進行相關擴展~

運行效果圖：

實現代碼：

自定義View類：

/**
 * Created by Jay on 2015/8/5 0005.
 */publicclassCirclePgBarextendsView{privatePaint mBackPaint;privatePaint mFrontPaint;privatePaint mTextPaint;privatefloat mStrokeWidth =50;privatefloat mHalfStrokeWidth = mStrokeWidth /2;privatefloat mRadius =200;privateRectF mRect;privateint mProgress =0;//目標值，想改多少就改多少privateint mTargetProgress =90;privateint mMax =100;privateint mWidth;privateint mHeight;publicCirclePgBar(Context context){super(context);
        init();}publicCirclePgBar(Context context,AttributeSet attrs){super(context, attrs);
        init();}publicCirclePgBar(Context context,AttributeSet attrs,int defStyleAttr){super(context, attrs, defStyleAttr);
        init();}//完成相關參數初始化privatevoid init(){
        mBackPaint =newPaint();
        mBackPaint.setColor(Color.WHITE);
        mBackPaint.setAntiAlias(true);
        mBackPaint.setStyle(Paint.Style.STROKE);
        mBackPaint.setStrokeWidth(mStrokeWidth);

        mFrontPaint =newPaint();
        mFrontPaint.setColor(Color.GREEN);
        mFrontPaint.setAntiAlias(true);
        mFrontPaint.setStyle(Paint.Style.STROKE);
        mFrontPaint.setStrokeWidth(mStrokeWidth);


        mTextPaint =newPaint();
        mTextPaint.setColor(Color.GREEN);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(80);
        mTextPaint.setTextAlign(Paint.Align.CENTER);}//重寫測量大小的onMeasure方法和繪制View的核心方法onDraw()@Overrideprotectedvoid onMeasure(int widthMeasureSpec,int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getRealSize(widthMeasureSpec);
        mHeight = getRealSize(heightMeasureSpec);
        setMeasuredDimension(mWidth, mHeight);}@Overrideprotectedvoid onDraw(Canvas canvas){
        initRect();float angle = mProgress /(float) mMax *360;
        canvas.drawCircle(mWidth /2, mHeight /2, mRadius, mBackPaint);
        canvas.drawArc(mRect,-90, angle,false, mFrontPaint);
        canvas.drawText(mProgress +"%", mWidth /2+ mHalfStrokeWidth, mHeight /2+ mHalfStrokeWidth, mTextPaint);if(mProgress < mTargetProgress){
            mProgress +=1;
            invalidate();}}publicint getRealSize(int measureSpec){int result =1;int mode =MeasureSpec.getMode(measureSpec);int size =MeasureSpec.getSize(measureSpec);if(mode ==MeasureSpec.AT_MOST || mode ==MeasureSpec.UNSPECIFIED){//自己計算
            result =(int)(mRadius *2+ mStrokeWidth);}else{
            result = size;}return result;}privatevoid initRect(){if(mRect ==null){
            mRect =newRectF();int viewSize =(int)(mRadius *2);int left =(mWidth - viewSize)/2;int top =(mHeight - viewSize)/2;int right = left + viewSize;int bottom = top + viewSize;
            mRect.set(left, top, right, bottom);}}}

然后在布局文件中加上：

<com.jay.progressbardemo.CirclePgBarandroid:layout_width="match_parent"android:layout_height="match_parent"/>

1.常用屬性講解與基礎實例

從官方文檔，我們看到了這樣一個類關系圖：

ProgressBar繼承與View類，直接子類有AbsSeekBar和ContentLoadingProgressBar， 其中AbsSeekBar的子類有SeekBar和RatingBar，可見這二者也是基於ProgressBar實現的

常用屬性詳解：

  • android:max：進度條的最大值
  • android:progress：進度條已完成進度值
  • android:progressDrawable：設置軌道對應的Drawable對象
  • android:indeterminate：如果設置成true，則進度條不精確顯示進度
  • android:indeterminateDrawable：設置不顯示進度的進度條的Drawable對象
  • android:indeterminateDuration：設置不精確顯示進度的持續時間
  • android:secondaryProgress：二級進度條，類似於視頻播放的一條是當前播放進度，一條是緩沖進度，前者通過progress屬性進行設置！

對應的再Java中我們可調用下述方法：

  • getMax()：返回這個進度條的范圍的上限
  • getProgress()：返回進度
  • getSecondaryProgress()：返回次要進度
  • incrementProgressBy(int diff)：指定增加的進度
  • isIndeterminate()：指示進度條是否在不確定模式下
  • setIndeterminate(boolean indeterminate)：設置不確定模式下

接下來來看看系統提供的默認的進度條的例子吧！

系統默認進度條使用實例：

運行效果圖：

實現布局代碼：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><!-- 系統提供的圓形進度條,依次是大中小 --><ProgressBarstyle="@android:style/Widget.ProgressBar.Small"android:layout_width="wrap_content"android:layout_height="wrap_content"/><ProgressBarandroid:layout_width="wrap_content"android:layout_height="wrap_content"/><ProgressBarstyle="@android:style/Widget.ProgressBar.Large"android:layout_width="wrap_content"android:layout_height="wrap_content"/><!--系統提供的水平進度條--><ProgressBarstyle="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:max="100"android:progress="18"/><ProgressBarstyle="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:indeterminate="true"/></LinearLayout>

好吧，除了第二個能看，其他的就算了...系統提供的肯定是滿足不了我們的需求的！ 下面我們就來講解下實際開發中我們對進度條的處理！

2.使用動畫來替代圓形進度條

第一個方案是，使用一套連續圖片，形成一個幀動畫，當需要進度圖的時候，讓動畫可見，不需要 的時候讓動畫不可見即可！而這個動畫，一般是使用AnimationDrawable來實現的！好的，我們來 定義一個AnimationDrawable文件：

PS:用到的圖片素材：進度條圖片素材打包.zip

運行效果圖：

 <p實現步驟：

 

在res目錄下新建一個:anim文件件，然后創建amin_pgbar.xml的資源文件：

<?xml version="1.0" encoding="utf-8"?><animation-listxmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false"><itemandroid:drawable="@drawable/loading_01"android:duration="200"/><itemandroid:drawable="@drawable/loading_02"android:duration="200"/><itemandroid:drawable="@drawable/loading_03"android:duration="200"/><itemandroid:drawable="@drawable/loading_04"android:duration="200"/><itemandroid:drawable="@drawable/loading_05"android:duration="200"/><itemandroid:drawable="@drawable/loading_06"android:duration="200"/><itemandroid:drawable="@drawable/loading_07"android:duration="200"/><itemandroid:drawable="@drawable/loading_08"android:duration="200"/><itemandroid:drawable="@drawable/loading_09"android:duration="200"/><itemandroid:drawable="@drawable/loading_10"android:duration="200"/><itemandroid:drawable="@drawable/loading_11"android:duration="200"/><itemandroid:drawable="@drawable/loading_12"android:duration="200"/></animation-list>

接着寫個布局文件，里面僅僅有一個ImageView即可，用於顯示進度條，把src設置為上述drawable資源即可！ 最后到MainActivity.java

publicclassMainActivityextendsAppCompatActivity{privateImageView img_pgbar;privateAnimationDrawable ad;@Overrideprotectedvoid onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_pgbar =(ImageView) findViewById(R.id.img_pgbar);
        ad =(AnimationDrawable) img_pgbar.getDrawable();
        img_pgbar.postDelayed(newRunnable(){@Overridepublicvoid run(){
                ad.start();}},100);}}

這里只是寫了如何啟動動畫，剩下的就你自己來了哦~在需要顯示進度條的時候，讓ImageView可見； 在不需要的時候讓他隱藏即可！另外其實Progressbar本身有一個indeterminateDrawable，只需把 這個參數設置成上述的動畫資源即可，但是進度條條的圖案大小是不能直接修改的，需要Java代碼中 修改，如果你設置了寬高，而且這個寬高過大的時候，你會看到有多個進度條...自己權衡下吧~

3.自定義圓形進度條

相信你看完2會吐槽，卧槽，這么坑爹，拿個動畫來坑人，哈哈，實際開發中都這樣，當然上述 這種情況只適用於不用顯示進度的場合，如果要顯示進度的場合就沒用處了，好吧，接下來看下 網上一個簡單的自定義圓形進度條！代碼還是比較簡單，容易理解，又興趣可以看看，或者進行相關擴展~

運行效果圖：

實現代碼：

自定義View類：

/**
 * Created by Jay on 2015/8/5 0005.
 */publicclassCirclePgBarextendsView{privatePaint mBackPaint;privatePaint mFrontPaint;privatePaint mTextPaint;privatefloat mStrokeWidth =50;privatefloat mHalfStrokeWidth = mStrokeWidth /2;privatefloat mRadius =200;privateRectF mRect;privateint mProgress =0;//目標值，想改多少就改多少privateint mTargetProgress =90;privateint mMax =100;privateint mWidth;privateint mHeight;publicCirclePgBar(Context context){super(context);
        init();}publicCirclePgBar(Context context,AttributeSet attrs){super(context, attrs);
        init();}publicCirclePgBar(Context context,AttributeSet attrs,int defStyleAttr){super(context, attrs, defStyleAttr);
        init();}//完成相關參數初始化privatevoid init(){
        mBackPaint =newPaint();
        mBackPaint.setColor(Color.WHITE);
        mBackPaint.setAntiAlias(true);
        mBackPaint.setStyle(Paint.Style.STROKE);
        mBackPaint.setStrokeWidth(mStrokeWidth);

        mFrontPaint =newPaint();
        mFrontPaint.setColor(Color.GREEN);
        mFrontPaint.setAntiAlias(true);
        mFrontPaint.setStyle(Paint.Style.STROKE);
        mFrontPaint.setStrokeWidth(mStrokeWidth);


        mTextPaint =newPaint();
        mTextPaint.setColor(Color.GREEN);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(80);
        mTextPaint.setTextAlign(Paint.Align.CENTER);}//重寫測量大小的onMeasure方法和繪制View的核心方法onDraw()@Overrideprotectedvoid onMeasure(int widthMeasureSpec,int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getRealSize(widthMeasureSpec);
        mHeight = getRealSize(heightMeasureSpec);
        setMeasuredDimension(mWidth, mHeight);}@Overrideprotectedvoid onDraw(Canvas canvas){
        initRect();float angle = mProgress /(float) mMax *360;
        canvas.drawCircle(mWidth /2, mHeight /2, mRadius, mBackPaint);
        canvas.drawArc(mRect,-90, angle,false, mFrontPaint);
        canvas.drawText(mProgress +"%", mWidth /2+ mHalfStrokeWidth, mHeight /2+ mHalfStrokeWidth, mTextPaint);if(mProgress < mTargetProgress){
            mProgress +=1;
            invalidate();}}publicint getRealSize(int measureSpec){int result =1;int mode =MeasureSpec.getMode(measureSpec);int size =MeasureSpec.getSize(measureSpec);if(mode ==MeasureSpec.AT_MOST || mode ==MeasureSpec.UNSPECIFIED){//自己計算
            result =(int)(mRadius *2+ mStrokeWidth);}else{
            result = size;}return result;}privatevoid initRect(){if(mRect ==null){
            mRect =newRectF();int viewSize =(int)(mRadius *2);int left =(mWidth - viewSize)/2;int top =(mHeight - viewSize)/2;int right = left + viewSize;int bottom = top + viewSize;
            mRect.set(left, top, right, bottom);}}}

然后在布局文件中加上：

<com.jay.progressbardemo.CirclePgBarandroid:layout_width="match_parent"android:layout_height="match_parent"/>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 android之進度條組件ProgressBar 進度條ProgressBar Android progressbar條形帶背景漸變進度風格進度條 WPF 進度條ProgressBar EasyUI Progressbar 進度條 Android學習筆記24：進度條ProgressBar的使用 Android ProgressBar 反向進度條/進度條從右到左走 WPF 進度條ProgressBar配文字 為ProgressBar進度條設置顏色1 進度條（ProgressBar）的功能與用法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM