zoukankan      html  css  js  c++  java
  • 自定义圆环progressbar

    RoundProgressBar.java
    1. /**
    2. * RoundProgressBar.java [v1.0.0]
    3. * classes: com.example.audiorecordingtest.RoundProgressBar
    4. * Amanda Create at 2014年10月10日 下午4:16:45
    5. * Copyright 阳光健康信息技术有限公司
    6. */
    7. package com.example.audiorecordingtest.view;
    8. /**
    9. * com.example.audiorecordingtest.RoundProgressBar
    10. * @author Amanda
    11. * create at 2014年10月10日 下午4:16:45
    12. */
    13. import com.example.audiorecordingtest.R;
    14. import com.example.audiorecordingtest.R.styleable;
    15. import android.content.Context;
    16. import android.content.res.TypedArray;
    17. import android.graphics.Canvas;
    18. import android.graphics.Color;
    19. import android.graphics.Paint;
    20. import android.graphics.RectF;
    21. import android.graphics.Typeface;
    22. import android.util.AttributeSet;
    23. import android.view.View;
    24. /**
    25. * 仿iphone带进度的进度条,线程安全的View,可直接在线程中更新进度
    26. *
    27. */
    28. public class RoundProgressBar extends View {
    29. /**
    30. * 画笔对象的引用
    31. */
    32. private Paint paint;
    33. /**
    34. * 圆环的颜色
    35. */
    36. private int roundColor;
    37. /**
    38. * 圆环进度的颜色
    39. */
    40. private int roundProgressColor;
    41. /**
    42. * 中间进度百分比的字符串的颜色
    43. */
    44. private int textColor;
    45. /**
    46. * 中间进度百分比的字符串的字体
    47. */
    48. private float textSize;
    49. /**
    50. * 圆环的宽度
    51. */
    52. private float roundWidth;
    53. /**
    54. * 最大进度
    55. */
    56. private int max;
    57. /**
    58. * 当前进度
    59. */
    60. private int progress;
    61. /**
    62. * 是否显示中间的进度
    63. */
    64. private boolean textIsDisplayable;
    65. /**
    66. * 进度的风格,实心或者空心
    67. */
    68. private int style;
    69. public static final int STROKE = 0;
    70. public static final int FILL = 1;
    71. public RoundProgressBar(Context context) {
    72. this(context, null);
    73. }
    74. public RoundProgressBar(Context context, AttributeSet attrs) {
    75. this(context, attrs, 0);
    76. }
    77. public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
    78. super(context, attrs, defStyle);
    79. paint = new Paint();
    80. TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
    81. R.styleable.RoundProgressBar);
    82. //获取自定义属性和默认值
    83. roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.rgb(245, 252, 248));
    84. roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.rgb(62, 187, 102));
    85. textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.BLACK);
    86. textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);
    87. roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);
    88. max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);
    89. textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);
    90. style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 0);
    91. mTypedArray.recycle();
    92. }
    93. @Override
    94. protected void onDraw(Canvas canvas) {
    95. super.onDraw(canvas);
    96. /**
    97. * 画最外层的大圆环
    98. */
    99. int centerX = getWidth()/2;
    100. int centerY = getHeight()/2;
    101. int centre = centerX>centerY?centerY:centerX;
    102. int radius = (int) (centre - roundWidth/2); //圆环的半径
    103. paint.setColor(roundColor); //设置圆环的颜色
    104. paint.setStyle(Paint.Style.STROKE); //设置空心
    105. paint.setStrokeWidth(roundWidth); //设置圆环的宽度
    106. paint.setAntiAlias(true); //消除锯齿
    107. canvas.drawCircle(centerX, centerY, radius, paint); //画出圆环
    108. // Log.e("log", centre + "");
    109. /**
    110. * 画进度百分比
    111. */
    112. paint.setStrokeWidth(0);
    113. paint.setColor(textColor);
    114. paint.setTextSize(textSize);
    115. paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
    116. int percent = (int)(((float)progress / (float)max) * 100); //中间的进度百分比,先转换成float在进行除法运算,不然都为0
    117. float textWidth = paint.measureText(percent + "%"); //测量字体宽度,我们需要根据字体的宽度设置在圆环中间
    118. if(textIsDisplayable && percent != 0 && style == STROKE){
    119. canvas.drawText(percent + "%", centerX - textWidth / 2, centerY + textSize/2, paint); //画出进度百分比
    120. }
    121. /**
    122. * 画圆弧 ,画圆环的进度
    123. */
    124. //设置进度是实心还是空心
    125. paint.setStrokeWidth(roundWidth); //设置圆环的宽度
    126. paint.setColor(roundProgressColor); //设置进度的颜色
    127. RectF oval = new RectF(centerX - radius, centerY - radius, centerX
    128. + radius, centerY + radius); //用于定义的圆弧的形状和大小的界限
    129. switch (style) {
    130. case STROKE:{
    131. paint.setStyle(Paint.Style.STROKE);
    132. canvas.drawArc(oval, 90, 360 * progress / max, false, paint); //根据进度画圆弧
    133. break;
    134. }
    135. case FILL:{
    136. paint.setStyle(Paint.Style.FILL_AND_STROKE);
    137. if(progress !=0){
    138. canvas.drawArc(oval, 90, 360 * progress / max, true, paint); //根据进度画圆弧
    139. }
    140. break;
    141. }
    142. }
    143. }
    144. public synchronized int getMax() {
    145. return max;
    146. }
    147. /**
    148. * 设置进度的最大值
    149. * @param max
    150. */
    151. public synchronized void setMax(int max) {
    152. if(max < 0){
    153. throw new IllegalArgumentException("max not less than 0");
    154. }
    155. this.max = max;
    156. }
    157. /**
    158. * 获取进度.需要同步
    159. * @return
    160. */
    161. public synchronized int getProgress() {
    162. return progress;
    163. }
    164. /**
    165. * 设置进度,此为线程安全控件,由于考虑多线的问题,需要同步
    166. * 刷新界面调用postInvalidate()能在非UI线程刷新
    167. * @param progress
    168. */
    169. public synchronized void setProgress(int progress) {
    170. if(progress < 0){
    171. throw new IllegalArgumentException("progress not less than 0");
    172. }
    173. if(progress > max){
    174. progress = max;
    175. }
    176. if(progress <= max){
    177. this.progress = progress;
    178. postInvalidate();
    179. }
    180. }
    181. public int getCricleColor() {
    182. return roundColor;
    183. }
    184. public void setCricleColor(int cricleColor) {
    185. this.roundColor = cricleColor;
    186. }
    187. public int getCricleProgressColor() {
    188. return roundProgressColor;
    189. }
    190. public void setCricleProgressColor(int cricleProgressColor) {
    191. this.roundProgressColor = cricleProgressColor;
    192. }
    193. public int getTextColor() {
    194. return textColor;
    195. }
    196. public void setTextColor(int textColor) {
    197. this.textColor = textColor;
    198. }
    199. public float getTextSize() {
    200. return textSize;
    201. }
    202. public void setTextSize(float textSize) {
    203. this.textSize = textSize;
    204. }
    205. public float getRoundWidth() {
    206. return roundWidth;
    207. }
    208. public void setRoundWidth(float roundWidth) {
    209. this.roundWidth = roundWidth;
    210. }
    211. }

    values/attrs.xml
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <resources>
    3. <declare-styleable name="RoundProgressBar">
    4. <attr name="roundColor" format="color"/>
    5. <attr name="roundProgressColor" format="color"/>
    6. <attr name="roundWidth" format="dimension"></attr>
    7. <attr name="textColor" format="color" />
    8. <attr name="textSize" format="dimension" />
    9. <attr name="max" format="integer"></attr>
    10. <attr name="textIsDisplayable" format="boolean"></attr>
    11. <attr name="style">
    12. <enum name="STROKE" value="0"></enum>
    13. <enum name="FILL" value="1"></enum>
    14. </attr>
    15. </declare-styleable>
    16. </resources>



    layout/audiorecord.xml
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. xmlns:android_custom="http://schemas.android.com/apk/res/com.example.audiorecordingtest"
    4. android:layout_width="match_parent"
    5. android:layout_height="match_parent"
    6. android:orientation="vertical"
    7. android:gravity="center">
    8. <FrameLayout
    9. android:layout_width="match_parent"
    10. android:layout_height="0dp"
    11. android:layout_weight="2">
    12. <ImageView
    13. android:id="@+id/img_microfan"
    14. android:layout_width="wrap_content"
    15. android:layout_height="wrap_content"
    16. android:layout_gravity="center"
    17. android:src="@drawable/microfan"
    18. android:scaleType="centerInside"/>
    19. <com.example.audiorecordingtest.view.RoundProgressBar
    20. android:id="@+id/roundProgressBar"
    21. android:layout_width="match_parent"
    22. android:layout_height="match_parent"
    23. android_custom:roundColor="#f6fcf8"
    24. android_custom:roundProgressColor="#41c36b"
    25. android_custom:textIsDisplayable="false"
    26. android_custom:roundWidth="5dp"/>
    27. </FrameLayout>
    28. <TextView
    29. android:id="@+id/txt_microfan"
    30. android:layout_width="match_parent"
    31. android:layout_height="0dp"
    32. android:layout_weight="1"
    33. android:gravity="center"
    34. android:text="正在录音……"
    35. android:textColor="#3c3c3c"
    36. android:textSize="30px"/>
    37. </LinearLayout>





  • 相关阅读:
    微信小程序 select 下拉框组件
    git 常用操作汇总
    VUE组件 之 Drawer 抽屉
    三、VUE项目BaseCms系列文章:axios 的封装
    C#数据采集用到的几个方法
    Mac环境安装非APP STORE中下载的软件,运行报错:“XXX” is damaged and can’t be opened. You should move it to the Trash. 解决办法
    Mac环境下执行npm install报权限错误解决办法
    VUE组件 之 高德地图地址选择
    Vue-Cli 3.0 中配置高德地图
    二、VUE项目BaseCms系列文章:项目目录结构介绍
  • 原文地址:https://www.cnblogs.com/Amandaliu/p/5098457.html
Copyright © 2011-2022 走看看