基于项目ColorArcProgressBar自己改了点东西,去项目原地址
先看效果图:
圆弧线条可以设置渐变色。
下面上代码,需要什么需求自己改咯
首先是xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="gy.net.named.MainActivity"> <gy.net.named.view.ColorArcProgressBar android:id="@+id/myProgress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="150px" android:layout_marginTop="50px" app:is_need_content="true" app:front_color1="#FFC62C" app:front_color2="#FF2EAB" app:front_color3="#BB0839" app:back_width="2dp" app:front_width="10dp" app:max_value="100" app:total_engle="270" app:back_color="@android:color/darker_gray" /> <gy.net.named.RaiseNumberAnimTextView android:id="@+id/souce" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="230px" android:text="" android:textColor="#c24e4e" android:textSize="138px" android:textStyle="bold" /> </LinearLayout>
然后是自定义控件
public class ColorArcProgressBar extends View { private int mWidth; private int mHeight; private int diameter = 500; //直径 private float centerX; //圆心X坐标 private float centerY; //圆心Y坐标 private Paint allArcPaint; private Paint progressPaint; private Paint vTextPaint; private Paint hintPaint; private Paint degreePaint; private Paint curSpeedPaint; private RectF bgRect; private ValueAnimator progressAnimator; private PaintFlagsDrawFilter mDrawFilter; private SweepGradient sweepGradient; private Matrix rotateMatrix; private float startAngle = 135; private float sweepAngle = 270; private float currentAngle = 0; private float lastAngle; private int[] colors = new int[]{Color.GREEN, Color.YELLOW, Color.RED, Color.RED}; private float maxValues = 60; private float curValues = 0; private float bgArcWidth = dipToPx(2); private float progressWidth = dipToPx(10); private float textSize = dipToPx(60); private float hintSize = dipToPx(15); private float curSpeedSize = dipToPx(13); private int aniSpeed = 1000; private float longdegree = dipToPx(13); private float shortdegree = dipToPx(5); private final int DEGREE_PROGRESS_DISTANCE = dipToPx(8); private Path mPath; private String hintColor = "#676767"; private String longDegreeColor = "#111111"; private String shortDegreeColor = "#111111"; private String bgArcColor = "#111111"; private String titleString; private String hintString; private boolean isShowCurrentSpeed = true; private boolean isNeedTitle; private boolean isNeedUnit; private boolean isNeedDial; private boolean isNeedContent; // sweepAngle / maxValues 的值 private float k; private DashPathEffect dashPathEffect; private SweepGradient mColorShader; public ColorArcProgressBar(Context context) { super(context, null); initView(); } public ColorArcProgressBar(Context context, AttributeSet attrs) { super(context, attrs, 0); initCofig(context, attrs); initView(); } public ColorArcProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initCofig(context, attrs); initView(); } /** * 初始化布局配置 * @param context * @param attrs */ private void initCofig(Context context, AttributeSet attrs) { TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ColorArcProgressBar); int color1 = a.getColor(R.styleable.ColorArcProgressBar_front_color1, Color.GREEN); int color2 = a.getColor(R.styleable.ColorArcProgressBar_front_color2, color1); int color3 = a.getColor(R.styleable.ColorArcProgressBar_front_color3, color1); colors = new int[]{color1, color2, color3, color3}; sweepAngle = a.getInteger(R.styleable.ColorArcProgressBar_total_engle, 270); bgArcWidth = a.getDimension(R.styleable.ColorArcProgressBar_back_width, dipToPx(2)); progressWidth = a.getDimension(R.styleable.ColorArcProgressBar_front_width, dipToPx(10)); isNeedTitle = a.getBoolean(R.styleable.ColorArcProgressBar_is_need_title, false); isNeedContent = a.getBoolean(R.styleable.ColorArcProgressBar_is_need_content, false); isNeedUnit = a.getBoolean(R.styleable.ColorArcProgressBar_is_need_unit, false); isNeedDial = a.getBoolean(R.styleable.ColorArcProgressBar_is_need_dial, false); hintString = a.getString(R.styleable.ColorArcProgressBar_string_unit); titleString = a.getString(R.styleable.ColorArcProgressBar_string_title); curValues = a.getFloat(R.styleable.ColorArcProgressBar_current_value, 0); maxValues = a.getFloat(R.styleable.ColorArcProgressBar_max_value, 60); mPath = new Path(); setCurrentValues(curValues); setMaxValues(maxValues); a.recycle(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = (int) (2 * longdegree + progressWidth + diameter + 2 * DEGREE_PROGRESS_DISTANCE); int height= (int) (2 * longdegree + progressWidth + diameter + 2 * DEGREE_PROGRESS_DISTANCE); setMeasuredDimension(width, height); } private void initView() { diameter = 2 * getScreenWidth() / 5 +getScreenWidth()/15; //弧形的矩阵区域 bgRect = new RectF(); bgRect.top = longdegree + progressWidth/2 + DEGREE_PROGRESS_DISTANCE; bgRect.left = longdegree + progressWidth/2 + DEGREE_PROGRESS_DISTANCE; bgRect.right = diameter + (longdegree + progressWidth/2 + DEGREE_PROGRESS_DISTANCE); bgRect.bottom = diameter + (longdegree + progressWidth/2 + DEGREE_PROGRESS_DISTANCE); //圆心 centerX = (2 * longdegree + progressWidth + diameter + 2 * DEGREE_PROGRESS_DISTANCE)/2; centerY = (2 * longdegree + progressWidth + diameter + 2 * DEGREE_PROGRESS_DISTANCE)/2; //外部刻度线 degreePaint = new Paint(); degreePaint.setColor(Color.parseColor(longDegreeColor)); //整个弧形 allArcPaint = new Paint(); allArcPaint.setAntiAlias(true); allArcPaint.setStyle(Paint.Style.STROKE); allArcPaint.setStrokeWidth(bgArcWidth); allArcPaint.setColor(Color.parseColor(bgArcColor)); allArcPaint.setStrokeCap(Paint.Cap.ROUND); //当前进度的弧形 progressPaint = new Paint(); progressPaint.setAntiAlias(true); progressPaint.setStyle(Paint.Style.STROKE); progressPaint.setStrokeWidth(progressWidth); progressPaint.setColor(Color.GREEN); //内容显示文字 vTextPaint = new Paint(); vTextPaint.setTextSize(textSize); vTextPaint.setColor(Color.BLACK); vTextPaint.setTextAlign(Paint.Align.CENTER); //显示单位文字 hintPaint = new Paint(); hintPaint.setTextSize(hintSize); hintPaint.setColor(Color.parseColor(hintColor)); hintPaint.setTextAlign(Paint.Align.CENTER); //显示标题文字 curSpeedPaint = new Paint(); curSpeedPaint.setTextSize(curSpeedSize); curSpeedPaint.setColor(Color.parseColor(hintColor)); curSpeedPaint.setTextAlign(Paint.Align.CENTER); mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); sweepGradient = new SweepGradient(centerX, centerY, colors, null); rotateMatrix = new Matrix(); } @Override protected void onDraw(Canvas canvas) { //抗锯齿 canvas.setDrawFilter(mDrawFilter); if (isNeedDial) { //画刻度线 for (int i = 0; i < 40; i++) { if (i > 15 && i < 25) { canvas.rotate(9, centerX, centerY); continue; } if (i % 5 == 0) { degreePaint.setStrokeWidth(dipToPx(2)); degreePaint.setColor(Color.parseColor(longDegreeColor)); canvas.drawLine(centerX, centerY - diameter / 2 - progressWidth / 2 - DEGREE_PROGRESS_DISTANCE, centerX, centerY - diameter / 2 - progressWidth / 2 - DEGREE_PROGRESS_DISTANCE - longdegree, degreePaint); } else { degreePaint.setStrokeWidth(dipToPx(1.4f)); degreePaint.setColor(Color.parseColor(shortDegreeColor)); canvas.drawLine(centerX, centerY - diameter / 2 - progressWidth / 2 - DEGREE_PROGRESS_DISTANCE - (longdegree - shortdegree) / 2, centerX, centerY - diameter / 2 - progressWidth / 2 - DEGREE_PROGRESS_DISTANCE - (longdegree - shortdegree) / 2 - shortdegree, degreePaint); } canvas.rotate(9, centerX, centerY); } } //整个弧 // canvas.drawArc(bgRect, startAngle, sweepAngle, false, allArcPaint); //设置渐变色 rotateMatrix.setRotate(130, centerX, centerY); sweepGradient.setLocalMatrix(rotateMatrix); progressPaint.setShader(sweepGradient); progressPaint.setPathEffect(new DashPathEffect(new float[] {5,15}, 0)); //当前进度 canvas.drawArc(bgRect, startAngle, currentAngle, false, progressPaint); invalidate(); } /** * 设置最大值 * @param maxValues */ public void setMaxValues(float maxValues) { this.maxValues = maxValues; k = sweepAngle/maxValues; } /** * 设置当前值 * @param currentValues */ public void setCurrentValues(float currentValues) { if (currentValues > maxValues) { currentValues = maxValues; } if (currentValues < 0) { currentValues = 0; } this.curValues = currentValues; lastAngle = currentAngle; setAnimation(lastAngle, currentValues * k, aniSpeed); } /** * 设置整个圆弧宽度 * @param bgArcWidth */ public void setBgArcWidth(int bgArcWidth) { this.bgArcWidth = bgArcWidth; } /** * 设置进度宽度 * @param progressWidth */ public void setProgressWidth(int progressWidth) { this.progressWidth = progressWidth; } /** * 设置速度文字大小 * @param textSize */ public void setTextSize(int textSize) { this.textSize = textSize; } /** * 设置单位文字大小 * @param hintSize */ public void setHintSize(int hintSize) { this.hintSize = hintSize; } /** * 设置单位文字 * @param hintString */ public void setUnit(String hintString) { this.hintString = hintString; invalidate(); } /** * 设置直径大小 * @param diameter */ public void setDiameter(int diameter) { this.diameter = dipToPx(diameter); } /** * 设置标题 * @param title */ private void setTitle(String title){ this.titleString = title; } /** * 设置是否显示标题 * @param isNeedTitle */ private void setIsNeedTitle(boolean isNeedTitle) { this.isNeedTitle = isNeedTitle; } /** * 设置是否显示单位文字 * @param isNeedUnit */ private void setIsNeedUnit(boolean isNeedUnit) { this.isNeedUnit = isNeedUnit; } /** * 设置是否显示外部刻度盘 * @param isNeedDial */ private void setIsNeedDial(boolean isNeedDial) { this.isNeedDial = isNeedDial; } /** * 为进度设置动画 * @param last * @param current */ private void setAnimation(float last, float current, int length) { progressAnimator = ValueAnimator.ofFloat(last, current); progressAnimator.setDuration(length); progressAnimator.setTarget(currentAngle); progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { currentAngle= (float) animation.getAnimatedValue(); curValues = currentAngle/k; } }); progressAnimator.start(); } /** * dip 转换成px * @param dip * @return */ private int dipToPx(float dip) { float density = getContext().getResources().getDisplayMetrics().density; return (int)(dip * density + 0.5f * (dip >= 0 ? 1 : -1)); } /** * 得到屏幕宽度 * @return */ private int getScreenWidth() { WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE); DisplayMetrics displayMetrics = new DisplayMetrics(); windowManager.getDefaultDisplay().getMetrics(displayMetrics); return displayMetrics.widthPixels; } }
然后一个数字变化的自定义控件,在网上找的
public class RaiseNumberAnimTextView extends TextView { private long mDuration = 1000; // 动画持续时间 ms,默认1s private ValueAnimator animator; private TimeInterpolator mTimeInterpolator = new LinearInterpolator(); // 动画速率 private AnimEndListener mEndListener; // 动画正常结束监听事件 public RaiseNumberAnimTextView(Context context) { super(context); } public RaiseNumberAnimTextView(Context context, AttributeSet attrs) { super(context, attrs); } public RaiseNumberAnimTextView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } /** * 设置动画持续时间,默认为1s。需要在setNumberWithAnim之前设置才有效 * @param duration */ public void setDuration(long duration) { if (duration > 0) { mDuration = duration; } } /** * 设置动画速率,默认为LinearInterpolator。需要在setNumberWithAnim之前设置才有效 * @param timeInterpolator */ public void setAnimInterpolator(TimeInterpolator timeInterpolator) { mTimeInterpolator = timeInterpolator; } /** * 设置要显示的float数字,带动画显示 * @param number */ public void setNumberWithAnim(float number) { clearAnimator(); // 设置动画,float值的起始值 animator = ValueAnimator.ofFloat(0.0f, number); startAnimator(); } /** * 设置要显示的int数字,带动画显示。 * @param number */ public void setNumberWithAnim(int number) { clearAnimator(); // 设置动画,int值的起始值 animator = ValueAnimator.ofInt(0, number); startAnimator(); } // 清除动画 public void clearAnimator() { if (null != animator) { if (animator.isRunning()) { animator.removeAllListeners(); animator.removeAllUpdateListeners(); animator.cancel(); } animator = null; } } // 暂停动画 public void onPause() { if (null != animator && animator.isRunning()) { animator.pause(); // API 不低于19 } } // 继续执行动画 public void onResume() { if (null != animator && animator.isRunning()) { animator.resume(); } } // 设置时常与过程处理,启动动画 private void startAnimator() { if (null != animator) { animator.setDuration(mDuration); animator.setInterpolator(mTimeInterpolator); // 动画过程中获取当前值,显示 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { setText(valueAnimator.getAnimatedValue().toString()); } }); animator.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animator) { } @Override public void onAnimationEnd(Animator animator) { if (null != mEndListener) { // 动画不是中途取消,而是正常结束 mEndListener.onAnimFinish(); } } @Override public void onAnimationCancel(Animator animator) { } @Override public void onAnimationRepeat(Animator animator) { } }); animator.start(); } } public void setAnimEndListener(AnimEndListener listener) { mEndListener = listener; } // 动画显示数字的结束监听,当动画结束显示正确的数字时,可能需要做些处理 public interface AnimEndListener { void onAnimFinish(); } }
最后MainActivity使用,很简单
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ColorArcProgressBar colorArcProgressBar = (ColorArcProgressBar) findViewById(R.id.myProgress); RaiseNumberAnimTextView souce = (RaiseNumberAnimTextView) findViewById(R.id.souce); //数字变化 souce.setNumberWithAnim(900); // double sub = Arith.sub(900, 500); // double num1 = Arith.div(sub, 400, 2); // int num = (int) (num1 * 100); //圆弧的进度条 colorArcProgressBar.setCurrentValues(900); }
记录一下工作之中学到的东西,怕忘记,写在博客中。