前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android实现环形进度条

Android实现环形进度条

作者头像
砸漏
发布2020-11-05 10:17:04
1.2K0
发布2020-11-05 10:17:04
举报
文章被收录于专栏:恩蓝脚本

一个通俗易懂的环形进度条,可以定制颜色角度,监听进度。

定义一个attrs.xml

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"? 
<resources 
 <declare-styleable name="CircleProgressView" 
  <!--画笔宽度-- 
  <attr name="progress_width" format="dimension" / 
  <!--画笔颜色-- 
  <attr name="progress_color" format="color" / 
  <!--加载进度起始位置-- 
  <attr name="location_start" format="enum" 
   <enum name="left" value="1" / 
   <enum name="top" value="2" / 
   <enum name="right" value="3" / 
   <enum name="bottom" value="4" / 
  </attr 
 </declare-styleable 
</resources 

自定义CircleProgressView

代码语言:javascript
复制
package com.sample.circleprogressview.widget;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
import com.sample.circleprogressview.R;
/**
* 普通环形进度条
*/
public class CircleProgressView extends View {
private int mCurrent;//当前进度
private Paint mBgPaint;//背景弧线paint
private Paint mProgressPaint;//进度Paint
private float mProgressWidth;//进度条宽度
private int mProgressColor = Color.RED;//进度条颜色
private int locationStart;//起始位置
private float startAngle;//开始角度
private ValueAnimator mAnimator;
public CircleProgressView(Context context) {
this(context, null);
}
public CircleProgressView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView);
locationStart = typedArray.getInt(R.styleable.CircleProgressView_location_start, 1);
mProgressWidth = typedArray.getDimension(R.styleable.CircleProgressView_progress_width, dp2px(context, 4));
mProgressColor = typedArray.getColor(R.styleable.CircleProgressView_progress_color, mProgressColor);
typedArray.recycle();
//背景圆弧
mBgPaint = new Paint();
mBgPaint.setAntiAlias(true);
mBgPaint.setStrokeWidth(mProgressWidth);
mBgPaint.setStyle(Paint.Style.STROKE);
mBgPaint.setColor(Color.parseColor("#eaecf0"));
mBgPaint.setStrokeCap(Paint.Cap.ROUND);
//进度圆弧
mProgressPaint = new Paint();
mProgressPaint.setAntiAlias(true);
mProgressPaint.setStyle(Paint.Style.STROKE);
mProgressPaint.setStrokeWidth(mProgressWidth);
mProgressPaint.setColor(mProgressColor);
mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
//进度条起始角度
if (locationStart == 1) {//左
startAngle = -180;
} else if (locationStart == 2) {//上
startAngle = -90;
} else if (locationStart == 3) {//右
startAngle = 0;
} else if (locationStart == 4) {//下
startAngle = 90;
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int size = width < height ? width : height;
setMeasuredDimension(size, size);
}
/**
* oval // 绘制范围
* startAngle // 开始角度
* sweepAngle // 扫过角度
* useCenter // 是否使用中心
*/
@Override
protected void onDraw(Canvas canvas) {
//绘制背景圆弧
RectF rectF = new RectF(mProgressWidth / 2, mProgressWidth / 2, getWidth() - mProgressWidth / 2, getHeight() - mProgressWidth / 2);
canvas.drawArc(rectF, 0, 360, false, mBgPaint);
//绘制当前进度
float sweepAngle = 360 * mCurrent / 100;
canvas.drawArc(rectF, startAngle, sweepAngle, false, mProgressPaint);
}
public int getCurrent() {
return mCurrent;
}
/**
* 设置进度
*
* @param current
*/
public void setCurrent(int current) {
mCurrent = current;
invalidate();
}
private int tCurrent = -1;
/**
* 动画效果
*
* @param current 精度条进度:0-100
* @param duration 动画时间
*/
public void startAnimProgress(int current, int duration) {
mAnimator = ValueAnimator.ofInt(0, current);
mAnimator.setDuration(duration);
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int current = (int) animation.getAnimatedValue();
if (tCurrent != current) {
tCurrent = current;
setCurrent(current);
if (mOnAnimProgressListener != null)
mOnAnimProgressListener.valueUpdate(current);
}
}
});
mAnimator.start();
}
public interface OnAnimProgressListener {
void valueUpdate(int progress);
}
private OnAnimProgressListener mOnAnimProgressListener;
/**
* 监听进度条进度
*
* @param onAnimProgressListener
*/
public void setOnAnimProgressListener(OnAnimProgressListener onAnimProgressListener) {
mOnAnimProgressListener = onAnimProgressListener;
}
public void destroy() {
if (mAnimator != null) {
mAnimator.cancel();
}
}
public static int dp2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}

代码就这么些,接下来我们测算一下

代码语言:javascript
复制
package com.sample.circleprogressview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.sample.circleprogressview.widget.CircleProgressView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private CircleProgressView circle_progress;
private TextView tv_progress;
private Button btn_start;
private Button btn_reset;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn_start = (Button) findViewById(R.id.btn_start);
btn_reset = (Button) findViewById(R.id.btn_reset);
circle_progress = (CircleProgressView) findViewById(R.id.circle_progress);
tv_progress = (TextView) findViewById(R.id.tv_progress);
btn_start.setOnClickListener(this);
btn_reset.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_start:
//开锁执行动画效果
circle_progress.startAnimProgress(50, 1200);
//监听进度条进度
circle_progress.setOnAnimProgressListener(new CircleProgressView.OnAnimProgressListener() {
@Override
public void valueUpdate(int progress) {
tv_progress.setText(String.valueOf(progress));
}
});
break;
case R.id.btn_reset:
circle_progress.setCurrent(0);
tv_progress.setText("0");
break;
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (circle_progress != null) {
circle_progress.destroy();
}
}
}

源码:下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档