多的不说，少的不唠，上图
![]()
Screenshot_1601345389.png
Screenshot_1601345389.png
自定义view的流程又不多说了，网上一大堆，直接上代码，咦，我为什么说了个又字？好吧，不管了，上代码。
1，自定义style
<declare-styleable name="GradualChangeProgess">
<!-- 目标进度-->
<attr name="currentProgess" format="float" />
<!-- 进度条文字-->
<attr name="progessText" format="string" />
<!-- 进度条宽度-->
<attr name="progessWidth" format="dimension" />
<!-- 进度条高度-->
<attr name="progessHeight" format="dimension" />
</declare-styleable>
2，自定义view
package com.rsw.rswtestdemo.views;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;
import com.rsw.rswtestdemo.R;
public class GradualChangeProgess extends View implements Runnable {
private Handler handler = new Handler(); // 用于延时更新，实现动画
private float animprogress; // 进度条动画高度
/**
* 控件的宽和高
*/
private int view_width;
private int view_height;
private Paint linePaint;
/**
* 默认都是20
*/
private float margin_left = 20;//进度条左边的间距
private float margin_right = 20;//进度条右边的间距
/**
* 游标刻度值
*/
private float max_Value = 100;//最大值
private String progessText;
private float currentProgess = (float) 0.0;//当前值
private float progessHeight = 20;//线的高度
private float progessWidth;//线的宽度
private int defaultSize = 100;
private int width = 0;
private int height = 0;
private Context context;
public GradualChangeProgess(Context context) {
this(context, null);
}
public GradualChangeProgess(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public GradualChangeProgess(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.GradualChangeProgess);
progessText = ta.getString(R.styleable.GradualChangeProgess_progessText);
currentProgess = ta.getFloat(R.styleable.GradualChangeProgess_currentProgess, 0.0f);
progessWidth = ta.getDimensionPixelSize(R.styleable.GradualChangeProgess_progessWidth, 100);
progessHeight = ta.getDimensionPixelSize(R.styleable.GradualChangeProgess_progessHeight, 10);
ta.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getSize(widthMeasureSpec);
height = getSize(heightMeasureSpec);
setMeasuredDimension(width, height);
}
private int getSize(int measureSpec) {
int mySize = defaultSize;
int mode = MeasureSpec.getMode(measureSpec);
int size = MeasureSpec.getSize(measureSpec);
switch (mode) {
case MeasureSpec.UNSPECIFIED: {//如果没有指定大小，就设置为默认大小
mySize = defaultSize;
break;
}
case MeasureSpec.AT_MOST: {//如果测量模式是最大取值为size
//我们将大小取最大值,你也可以取其他值
mySize = size;
break;
}
case MeasureSpec.EXACTLY: {//如果是固定的大小，那就不要去改变它
mySize = size;
break;
}
}
return mySize;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
initView(canvas);
}
private void initView(Canvas canvas) {
view_width = getWidth();
view_height = getHeight();
/**进度条的画笔*/
if (linePaint == null) {
linePaint = new Paint();
Shader mShader = new LinearGradient(0, 0, canvas.getWidth(), canvas.getHeight(), new int[]{Color.parseColor("#ffc40d"), Color.parseColor("#3fdbd6"), Color.parseColor("#039dea")}, null, Shader.TileMode.CLAMP);
linePaint.setColor(Color.parseColor("#039dea"));
linePaint.setAntiAlias(true);
linePaint.setShader(mShader);
}
/**居中显示进度条*/
RectF rf = new RectF(margin_left, view_height - 2 * progessHeight, view_width - margin_right, view_height - progessHeight);
progessWidth = rf.width();
/*绘制圆角进度条，背景色为画笔颜色*/
canvas.drawRoundRect(rf, rf.height() / 2, rf.height() / 2, linePaint);//开始绘制
/**绘制游标顶部的文字*/
Paint tv_piant = new Paint(Paint.ANTI_ALIAS_FLAG);
tv_piant.setTextSize(30);
tv_piant.setColor(Color.WHITE);
tv_piant.setTextAlign(Paint.Align.LEFT);
Rect tv_Rect = new Rect();
if (null == progessText) {
return;
}
tv_piant.getTextBounds(progessText, 0, progessText.length(), tv_Rect);
//游标的宽度
int width = tv_Rect.width();
/**计算游标显示完整的位置*/
if (margin_left < width) {
margin_left = width / 2;
}
if (margin_right < width) {
margin_right = width / 2;
}
/*游标在进度条上显示的位置*/
if (currentProgess > max_Value) {
currentProgess = max_Value;
}
float leftd = (margin_left - width / 2) + (animprogress * progessWidth / max_Value) - tv_Rect.height() / 2;
RectF mDestRect = new RectF(leftd, (view_height - 5 * progessHeight), leftd + width + tv_Rect.width() / 2, view_height - 3 * progessHeight);//图片所在区域
canvas.drawRoundRect(mDestRect, 10, 10, linePaint);//开始绘制
handler.postDelayed(this, 1);
Path path = new Path();
path.moveTo(leftd + width / 3.0f + margin_left / 2, view_height - 3 * progessHeight);// 此点为多边形的起点
path.lineTo(leftd + width / 3.0f * 2 + margin_left / 2, view_height - 3 * progessHeight);
path.lineTo(leftd + width / 2.0f + margin_left / 2, (float) (Math.cbrt(3) / 2 * 1 / 6 * dip2px(context,35) + view_height - 3 * progessHeight));
path.close(); // 使这些点构成封闭的多边形
canvas.drawPath(path, linePaint);
canvas.drawText(progessText, leftd + width / 2.0f - tv_Rect.width() / 4, (view_height - 3 * progessHeight - progessHeight / 2), tv_piant);
}
public void settitle(String title) {
this.progessText = title;
invalidate();
}
public void setCurr_Value(float curr_Value) {
this.currentProgess = curr_Value;
invalidate();
}
// 根据手机的分辨率将dp的单位转成px(像素)
public int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
@Override
public void run() {
animprogress += 1;
if (animprogress >= currentProgess) {
return;
} else {
invalidate();
}
}
}
3，xml布局引用
<com.rsw.rswtestdemo.views.GradualChangeProgess
android:id="@+id/jianbianProgess"
android:layout_width="match_parent"
android:layout_height="200dp"
app:currentProgess="50"
app:progessHeight="10dp"
app:progessText="50%"
app:progessWidth="100dp">
</com.rsw.rswtestdemo.views.GradualChangeProgess>
