TShopping

 找回密碼
 註冊
搜索
查看: 1342|回復: 0

[教學] Ring progressBar在context裡如何使用?

[複製鏈接]
發表於 2019-12-31 17:25:06 | 顯示全部樓層 |閱讀模式
 
Push to Facebook
前篇 如何使用 ProgressBar 進度條(測試成功)
在MainActivity.java下測試是沒有問題的
但是多數會用到這,都不知道寫到第幾層了
這時就都會用context代替Activity了Google翻了許文章,也測試了不少
終於找到解法

Ring determinate ProgressBar
環型準確進度條完成圖

ProgressBar

ProgressBar

layout/progress_ring.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:background="@android:color/white"
  6.     android:orientation="vertical">
  7.     <TextView
  8.         android:id="@+id/progress_notice"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:textSize="30dp"
  12.         android:layout_marginTop="20dp"
  13.         android:textStyle="bold"
  14.         android:textColor="@color/colorPrimaryBlue"
  15.         />
  16.     <ProgressBar
  17.         android:id="@+id/progressBar"
  18.         android:indeterminate="false"
  19.         android:layout_width="250dp"
  20.         android:layout_height="250dp"
  21.         android:layout_centerInParent="true"
  22.         android:progressDrawable="@drawable/progress_ring"
  23.         style="@android:style/Widget.ProgressBar.Horizontal"/>
  24.     <TextView
  25.         android:id="@+id/txtprogress"
  26.         android:layout_width="wrap_content"
  27.         android:layout_height="wrap_content"
  28.         android:layout_gravity="center"
  29.         android:layout_centerInParent="true"
  30.         android:textSize="30dp"
  31.         android:textStyle="bold"
  32.          />
  33. </RelativeLayout>
複製代碼

res/drawable/progress_ring.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:id="@android:id/secondaryProgress">
  4.         <shape
  5.             android:shape="ring"
  6.             android:useLevel="true"
  7.             android:innerRadiusRatio="3.5"
  8.             android:thickness ="20dp">
  9.             <corners android:radius="3dp"/>
  10.             <solid android:color="#FA5858"/>
  11.         </shape>
  12.     </item>

  13.     <item android:id="@android:id/progress">
  14.         <shape
  15.             android:shape="ring"
  16.             android:useLevel="true"
  17.             android:innerRadiusRatio="3.5"
  18.             android:thickness ="20dp">
  19.             <corners android:radius="3dp"/>
  20.             <solid android:color="#0099CC"/>
  21.         </shape>
  22.     </item>
  23. </layer-list>
複製代碼


context下用進度條

  1.         processingtitle      = (String) context.getText(R.string.processingtitle);
  2.         processingcontext   = (String) context.getText(R.string.processingcontext);
  3.       
  4.         copytime =60000;
  5.         pStatus = 0;
  6.         handler = new Handler();
  7.         /* set Activity progressBar into context */
  8.         Activity a = (Activity) context;
  9.         a.setContentView(R.layout.progress_ring);
  10.         txtProgress = (TextView) ((Activity)context).findViewById(R.id.txtprogress);
  11.         progressNotice = (TextView) ((Activity)context).findViewById(R.id.progress_notice);
  12.         progressBar = (ProgressBar) ((Activity)context).findViewById(R.id.progressBar);

  13.         /* progressBar count copytime transfer to percentage  */
  14.         new Thread(new Runnable() {
  15.             @Override
  16.             public void run() {
  17.                     progressBar.setVisibility(View.VISIBLE);
  18.                     progressBar.setSecondaryProgress(100);
  19.                     progressBar.setProgress(pStatus);
  20.                     progressBar.setMax(100);
  21.                     progressNotice.setText( processingtitle +" "+ processingcontext);
  22.                     while (pStatus <= 100) {
  23.                         handler.post(new Runnable() {
  24.                             @Override
  25.                             public void run() {
  26.                                 progressBar.setProgress(pStatus);
  27.                                 //Log.d("testpathi", "i="+pStatus + "  copytime:"+(copytime/100)*pStatus);
  28.                                 txtProgress.setText(pStatus + " %");
  29.                             }
  30.                         });
  31.                         try {
  32.                             Thread.sleep(copytime/100);
  33.                         } catch (InterruptedException e) {
  34.                             e.printStackTrace();
  35.                         }
  36.                         pStatus++;
  37.                     }
  38.             }
  39.         }).start();
複製代碼

這裡一定要用Handler,不用會無法更新


在這說明如何利用Shape畫出漸層的ProgressBar
以下為parameter說明:
Android 提供五種shape:rectangle(矩形)、oval(橢圓)、line(直線)、ring(圓環)。
而ProgressBar須選擇ring(圓環)。而當你使用ring後,會有以下五個parameter可使用
可參考以下這篇的解釋:[Shape Drawable的學習]


以下為此篇五個參數對五個參數的說明:
- innerRadiusRatio : 該值是以比例的形式來指定內圓半徑。內圓半徑等於該shape的寬除以該值。或者說該值的倒數代表了內圓半徑佔整個shape寬的比例。默認值是9。當該值等於2的時候,內圓就將佔滿整個shape,從而我們將看不到圓環。
- thicknessRatio : 以比例的形式來指定圓環的寬窄。其算法與innerRadiusRatio相同。
- useLevel : 值為true意味著這是一個levelListDrawable(關於levelListDrawable又是另一個話題了)。當我們要畫一個圓環是,應當而且必須將該值設為false,否則會看不到畫面。

這邊我是使用innerRadiusRatio與thicknessRatio此兩個參數來設定內環與外環的比率。當然亦可以全部使用。
最後一個參數android:useLevel,一定要設為false才可以看到畫面

gradient
- android:angle - 必須為45的倍數,0表示從左到右,90表示從上到下。
- android:endColor - 漸變結束的顏色
- android:startColor - 漸變開始的顏色
- android:centerColor - 漸變中間的顏色
- android:type - ["linear" | "radial" | "sweep"] 共有3種漸變類型,線性(default)、放射漸變、掃描式漸變,這邊我使用sweep

[color=rgba(0, 0, 0, 0.84)]Android 提供的Shape真的可以用在很多地方,尤其是對custom view的部分,可以節省很多時間喔!



[color=rgba(0, 0, 0, 0.84)]

[color=rgba(0, 0, 0, 0.84)]參考文章
https://segmentfault.com/a/1190000006700118
https://www.jianshu.com/p/38bd13e0ded8
https://stackoverflow.com/questions/10782344/displaying-progressbar-using-threading
https://segmentfault.com/a/1190000006700118
https://medium.com/@hsiangyu69/android-%E5%88%A9%E7%94%A8shape%E7%95%AB%E5%87%BA%E6%BC%B8%E5%B1%A4%E7%9A%84progressbar-a39fe0030569
https://blog.csdn.net/pingchuanyang/article/details/9230349
https://demonuts.com/circular-progress-bar/


 

臉書網友討論
*滑块验证:
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-3-28 18:06 , Processed in 0.078618 second(s), 26 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表