Android自定义控件系列之应用篇——圆形进度条

来源：互联网发布：贸易企业运营数据分析编辑：程序博客网时间：2024/04/28 08:48

在上一篇博文中，我们给大家介绍了Android自定义控件系列的基础篇。链接：http://www.cnblogs.com/jerehedu/p/4360066.html

这一篇博文中，我们将在基础篇的基础上，再通过重写ondraw（）方法和自定义属性实现圆形进度条，效果如图所示：

二、实现步骤

1、编写自定义组件MyCircleProgress扩展View

?
1
2
3
publicclass MyCircleProgress extendsView {
…   
}

2、在MyCircleProgress类中，定制属性

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
publicint progress  = 0;//进度实际值,当前进度
  /**
   * 自定义控件属性，可灵活的设置圆形进度条的大小、颜色、类型等
   */
  privateint mR;//圆半径，决定圆大小
  privateint bgColor;//圆或弧的背景颜色
  privateint fgColor;//圆或弧的前景颜色，即绘制时的颜色
  privateint drawStyle; //绘制类型 FILL画圆形进度条，STROKE绘制弧形进度条
          privateint strokeWidth;//STROKE绘制弧形的弧线的宽度
  privateint max;//最大值，设置进度的最大值
/**
   * 设置进度，此为线程安全控件，由于考虑多线的问题，需要同步
   */ 
  publicsynchronized void setProgress(intprogress) {
      if(progress<0){
          progress=0;
      }elseif(progress>max){
          progress=max;
      }else{
          this.progress = progress;
      }       
  }
  publicint getMax() {
      returnmax;    }

3、为定制的属性编写attrs.xml资源，该资源文件放在res/values目录下，内容如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0"encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleProgressBar">
        <attr name="bgColor"format="color"/>
        <attr name="fgColor"format="color"/>
        <attr name="r"format="integer"/>
        <attr name="strokeWidth"format="integer"/>
        <attr name="drawStyle">
            <enumname="STROKE"value="0"></enum>
            <enumname="FILL"value="1"></enum>
        </attr>
        <attr name="max"format="integer"/>
    </declare-styleable>
</resources>

4、在MyCircleProgress类中定义构造函数，初始化属性

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    privatevoid initProperty(AttributeSet attrs){
    TypedArray tArray = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);
        mR=tArray.getInteger(R.styleable.CircleProgressBar_r,10);
        bgColor=tArray.getColor(R.styleable.CircleProgressBar_bgColor, Color.GRAY);
        fgColor=tArray.getColor(R.styleable.CircleProgressBar_fgColor, Color.RED);
        drawStyle=tArray.getInt(R.styleable.CircleProgressBar_drawStyle, 0);
        strokeWidth=tArray.getInteger(R.styleable.CircleProgressBar_strokeWidth, 10);
        max=tArray.getInteger(R.styleable.CircleProgressBar_max, 100);
    }   
publicMyCircleProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        this.paint = newPaint();
        this.paint.setAntiAlias(true); // 消除锯齿
        this.paint.setStyle(Style.STROKE); // 绘制空心圆或 空心矩形
        initProperty(attrs);   
    }

5、在MainActivity中布局文件中添加MyCircleProgress组件，如下所示

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.jereh.mydrawcircleprogress"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
     >  
 <com.jereh.views.MyCircleProgress
        android:id="@+id/MyCircleProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:r="45"
        app:strokeWidth="10"
        app:bgColor="#cccccc"
        app:fgColor="#ff0000"
        app:drawStyle="FILL"
        app:max="50"
        />
</RelativeLayout>

6、自定义组件MyCircleProgress中重写onDraw方法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    intcenter = getWidth() / 2; // 圆心位置
    this.paint.setColor(bgColor);
    this.paint.setStrokeWidth(strokeWidth);
    canvas.drawCircle(center, center, mR, this.paint);
    // 绘制圆环
    this.paint.setColor(fgColor);
    if(drawStyle==0){
        this.paint.setStyle(Style.STROKE);
        opt=false;
    }else{
        this.paint.setStyle(Style.FILL);
        opt=true;
    }
    inttop = (center - mR);
    intbottom = (center + mR);
    RectF oval = newRectF(top, top, bottom, bottom);
    canvas.drawArc(oval, 270, 360*progress/max, opt, paint);
 
}

7、编写MainActivity

public class MainActivity extends Activity {    private MyCircleProgress progressView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        progressView = (MyCircleProgress) findViewById(R.id.MyCircleProgress);        new ProgressAnimation().execute();    }    class ProgressAnimation extends AsyncTask<Void, Integer, Void> {        @Override        protected Void doInBackground(Void... params) {            //进度值不断的变化            for (int i = 0; i < progressView.getMax(); i++) {                try {                    publishProgress(i);                    Thread.sleep(100);                } catch (InterruptedException e) {                    e.printStackTrace();                }            }            return null;        }                @Override        protected void onProgressUpdate(Integer... values) {            //更新进度值            progressView.setProgress(values[0]);            progressView.invalidate();            super.onProgressUpdate(values);        }    }}

来自：http://blog.csdn.net/jerehedu/article/details/45195711

0 0