您的位置: 首页  >  文章  >  Android自定义view绘制圆环占比动画

Android自定义view绘制圆环占比动画

分类: 文章 • 2023-11-12 10:50:22

http://www.jb51.net/article/104068.htm

这篇文章主要为大家详细介绍了Android自定义view绘制圆环占比动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

一、实现效果图

Android自定义view绘制圆环占比动画

二、核心代码

1.自定义MyProgressView.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
package com.czhappy.effectdemo.view;
 
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
 
import com.czhappy.effectdemo.R;
import com.czhappy.effectdemo.utils.ScreenUtil;
 
 
public class MyProgressView extends View {
 
 // 画实心圆的画笔
 private Paint mCirclePaint;
 // 画圆环的画笔
 private Paint mRingDefaultPaint;
 // 已用环的画笔
 private Paint mUsePaint;
 // 画圆环的画笔
 private Paint mRingPaint;
 // 画白线的画笔
 private Paint mLinePaint;
 // 画字体的画笔
 private Paint mTextPaint;
 // 圆形颜色
 private int mCircleColor;
 // 圆环颜色
 private int mRingColor;
 // 半径
 private float mRadius;
 // 圆环半径
 private float mRingRadius;
 // 圆环宽度
 private float mStrokeWidth;
 // 圆心x坐标
 private int mXCenter;
 // 圆心y坐标
 private int mYCenter;
 // 字的长度
 private float mTxtWidth;
 // 字的高度
 private float mTxtHeight;
 // 总进度
 private int mTotalProgress = 100;
 // 当前进度
 private int mProgress;
 // 实际展示总进度
 private int mShowProgress;
 // 已用流量
 private String usedFlow;
 
 private Context mContext;
 
 private Handler circleHandler = new Handler(){
 
  public void handleMessage(Message msg) {
   super.handleMessage(msg);
   if(msg.what == 1){
    int temp = (Integer)msg.obj;
    setProgress(temp);
   }
  };
 };
 
 public MyProgressView(Context context, AttributeSet attrs) {
  super(context, attrs);
  mContext = context;
  // 获取自定义的属性
  initAttrs(context, attrs);
  initVariable();
 }
 
 private void initAttrs(Context context, AttributeSet attrs) {
  TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
    R.styleable.TasksCompletedView, 0, 0);
  mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
  mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
  mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF);
  mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
 
  mRingRadius = mRadius + mStrokeWidth / 2;
 }
 
 private void initVariable() {
  //画圆画笔设置
  mCirclePaint = new Paint();
  mCirclePaint.setAntiAlias(true);//防锯齿
  mCirclePaint.setColor(mCircleColor);
  mCirclePaint.setStyle(Paint.Style.FILL);
 
  //“使用”字画笔设置
  mUsePaint = new Paint();
  mUsePaint.setAntiAlias(true);
  mUsePaint.setStyle(Paint.Style.FILL);
  mUsePaint.setColor(getResources().getColor(R.color.ticket_color));
  mUsePaint.setTextSize(ScreenUtil.sp2px(mContext, 10));
 
  //圆环画笔设置
  mRingDefaultPaint = new Paint();
  mRingDefaultPaint.setAntiAlias(true);
  mRingDefaultPaint.setColor(getResources().getColor(R.color.default_ring_color));
  mRingDefaultPaint.setStyle(Paint.Style.STROKE);
  mRingDefaultPaint.setStrokeWidth(mStrokeWidth);
 
  //已使用多少圆环画笔设置
  mRingPaint = new Paint();
  mRingPaint.setAntiAlias(true);
  mRingPaint.setColor(mRingColor);
  mRingPaint.setStyle(Paint.Style.STROKE);
  mRingPaint.setStrokeWidth(mStrokeWidth);
 
  mTextPaint = new Paint();
  mTextPaint.setAntiAlias(true);
  mTextPaint.setStyle(Paint.Style.FILL);
  mTextPaint.setColor(Color.BLACK);
  mTextPaint.setTextSize(ScreenUtil.sp2px(mContext, 22));
 
  mLinePaint = new Paint();
  mLinePaint.setColor(Color.WHITE);
 
 
  //获取字体高度
  FontMetrics fm = mTextPaint.getFontMetrics();
  mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
 
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 
  mXCenter = getWidth() / 2;
  mYCenter = getHeight() / 2;
 
  //画圆
  canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);
 
  RectF oval = new RectF();
  oval.left = (mXCenter - mRingRadius);
  oval.top = (mYCenter - mRingRadius);
  oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
  oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
  //画整圆弧
  canvas.drawArc(oval, -90, 360, false, mRingDefaultPaint);
  //已使用多少圆弧
  canvas.drawArc(oval, -90, ((float) mProgress / mTotalProgress) * 360, false, mRingPaint);
  //文字绘制
  String txt = mProgress + "%";
  //文字的长度
  mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());
  canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 9, mTextPaint);
 
  Rect _pb = new Rect();
  String sup = "已用";
  mUsePaint.getTextBounds(sup, 0, sup.length(), _pb);
  int perX = mXCenter - _pb.width() / 2;
  canvas.drawText(sup, perX, mYCenter / 2, mUsePaint);
 
  if (!TextUtils.isEmpty(usedFlow)) {
   mUsePaint.getTextBounds(usedFlow, 0, usedFlow.length(), _pb);
   perX = mXCenter - _pb.width() / 2;
   canvas.drawText(usedFlow, perX, (float) (mYCenter + mYCenter / 1.7), mUsePaint);
  }
 
  //画横线图片
  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.circle_bottom_bg);
  perX = mXCenter - bitmap.getWidth() / 2;
  canvas.drawBitmap(bitmap, perX, (float) (mYCenter + mYCenter / 5), mLinePaint);
 }
 
 /**
  * 设置当前进度
  * @param progress
  */
 public void setProgress(int progress) {
  mProgress = progress;
  postInvalidate();
 }
 
 /**
  * 实际展示总进度
  * @param progress
  */
 public void setmShowProgress(int progress) {
  mShowProgress = progress;
  new Thread(new CircleThread()).start();
 }
 
 public void setUsedFlow(String usedFlow) {
  this.usedFlow = usedFlow;
 }
 
 
 private class CircleThread implements Runnable{
 
  int m=0;
  int i=0;
 
  @Override
  public void run() {
   // TODO Auto-generated method stub
   while(!Thread.currentThread().isInterrupted()){
    try {
     Thread.sleep(50);
     m++;
     Message msg = new Message();
     msg.what = 1;
     if(i < mShowProgress){
      i += m;
     }else{
      i = mShowProgress;
      return;
     }
     msg.obj = i;
     circleHandler.sendMessage(msg);
    } catch (InterruptedException e) {
     // TODO Auto-generated catch block
     e.printStackTrace();
    }
   }
  }
 
 }
}

2.FlowActivity.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package com.czhappy.effectdemo.activity;
 
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
 
import com.czhappy.effectdemo.R;
import com.czhappy.effectdemo.view.MyProgressView;
 
/**
 * Description:
 * User: chenzheng
 * Date: 2017/1/21 0021
 * Time: 17:17
 */
public class FlowActivity extends AppCompatActivity {
 
 private MyProgressView mTasksView;
 
 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_flow);
 
  initView();
 }
 
 private void initView() {
  mTasksView = (MyProgressView) findViewById(R.id.flow_prgress_view);
 }
 
 public void beginAnim(View view){
  mTasksView.setUsedFlow("200.0M");
  mTasksView.setmShowProgress(60);
 }
}

3.activity_flow.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tc="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="10dp"
 android:background="#fff"
 android:gravity="center_horizontal"
 android:orientation="vertical">
 
 <Button
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:onClick="beginAnim"
  android:text="开始动画"/>
 
 <com.czhappy.effectdemo.view.MyProgressView
  android:id="@+id/flow_prgress_view"
  android:layout_width="100dp"
  android:layout_height="100dp"
  tc:circleColor="@color/circle_color"
  tc:radius="44dp"
  tc:ringColor="@color/ring_color"
  tc:strokeWidth="6dp"
  android:layout_marginTop="10dp"/>
 
</LinearLayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。


相关推荐