前几天因为一个产品的需求，需要实现类似一个文本跟着进度条走的功能，本来想在网上找一个的，但是找了挺久也没找到，无奈只能自己写一个。

在这里也记录一下，希望可以帮到一些人，先上个效果图。

实现这个进度条需要自己先新建一个textprogressbar.xml，在这个文件里面，你需要一个ProgressBar，然后在根据自己的需要，修改这个ProgressBar的样式，基础不好的小伙伴可以参考一个下面这篇博客
https://www.cnblogs.com/wxmdevelop/p/5623004.html

下面贴一下我的代码

<?xml version="1.0" encoding="utf-8"?><ProgressBar 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:id="@+id/progressbar1"style="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="match_parent"android:layout_height="10dp"android:indeterminate="false"android:max="100"android:paddingLeft="20sp"android:paddingRight="20dp"android:progressDrawable="@drawable/bg_progressbar"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"tools:ignore="MissingConstraints"tools:layout_editor_absoluteY="48dp"android:paddingStart="20sp"android:paddingEnd="20dp" />

还需要一个bg_progressbar.xml，放在res的drawable文件下，可以修改属性改变它的颜色，形状等

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><!--设置ProgressBar背景色--><item android:id="@android:id/background"><shape><!--设置ProgressBar进度条圆角半径--><corners android:radius="8dp" /><solid android:color="#f0f0f0" /></shape></item><!--设置ProgressBar进度条颜色--><item android:id="@android:id/progress"><clip android:clipOrientation="horizontal"><shape><corners android:radius="8dp" /><solid android:color="#FFB3CB" /></shape></clip></item>
</layer-list>

然后就是TextProgressBar.java了，东西也很简单，就是绘制了进度条下面的文本和背景。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.ProgressBar;public class TextProgressBar extends LinearLayout {private static final String TAG = "TextProgressBar";String text = "0";Paint mPaint;/*** 文本的rect*/private Rect textRect;/*** 文本背景的rect*/private RectF textBackRectF;private ProgressBar progressBar;/*** 进度条当前的进度*/int progress;/*** 进度条的宽度 高度*/int proWidth, proHeight;private Path path;/*** 文本的margin*/private int mTextMargin;/*** 文本的margintop*/private int mTextMarginTop;public TextProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initText(context);}public TextProgressBar(Context context) {super(context);initText(context);}public TextProgressBar(Context context, AttributeSet attrs) {super(context, attrs);initText(context);}@Overrideprotected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);progress = progressBar.getProgress();text = (int) (((double) progress / (double) progressBar.getMax()) * 100) + "%";this.mPaint.getTextBounds(this.text, 0, this.text.length(), textRect);proWidth = progressBar.getWidth() - progressBar.getPaddingLeft() - progressBar.getPaddingRight();proHeight = progressBar.getHeight();//获取textview需要显示的x坐标int tvx = (int) (progressBar.getLeft() + progressBar.getPaddingLeft() + proWidth * ((progress * 1f) / progressBar.getMax())) - textRect.centerX();//获取textview需要显示的y坐标int tvy = progressBar.getBottom() + textRect.height() + mTextMarginTop;if (tvx < 0) {//限制最小宽度tvx = progressBar.getLeft() + progressBar.getPaddingLeft();}//限制最大宽度if (tvx >= progressBar.getRight() - textRect.width()) {tvx = progressBar.getRight() - textRect.width() - progressBar.getPaddingRight();}if (textBackRectF == null) {textBackRectF = new RectF();}mPaint.setColor(Color.parseColor("#FFB3CB"));textBackRectF.set(tvx - mTextMargin, tvy + mTextMargin, tvx + textRect.width() + mTextMargin, textRect.height() + mTextMarginTop);canvas.drawRoundRect(textBackRectF, 10, 10, mPaint);//以下是绘制文本的那个箭头if (path == null) {path = new Path();}//重置path.reset();// 三角形顶点path.moveTo(textBackRectF.centerX(), textBackRectF.bottom - 5);//三角形左边的点path.lineTo(textBackRectF.centerX() - 8, textBackRectF.bottom);//三角形右边的点path.lineTo(textBackRectF.centerX() + 8, textBackRectF.bottom);path.close();//将整个三角形绘制出来canvas.drawPath(path, mPaint);//设置文本颜色mPaint.setColor(Color.WHITE);canvas.drawText(this.text, tvx, tvy, this.mPaint);}/*** 初始化，画笔** @param context 上下文*/private void initText(Context context) {View inflate = View.inflate(context, R.layout.textprogressbar, this);progressBar = inflate.findViewById(R.id.progressbar1);mTextMargin = dp2Px(5);mTextMarginTop = dp2Px(8);//ViewGroup默认情况下，出于性能考虑，会被设置成WILL_NOT_DROW，这样，ondraw就不会被执行了，需要设置为falsesetWillNotDraw(false);mPaint = new Paint();//去除锯齿mPaint.setAntiAlias(true);mPaint.setColor(Color.parseColor("#FFB3CB"));mPaint.setTextSize(25);textRect = new Rect();}public void setProgress(int progress) {progressBar.setProgress(progress);invalidate();}public int getProgress() {return progress;}public void setMax(int totalTime) {progressBar.setMax(totalTime);}public int dp2Px(float dp) {final float scale = getResources().getDisplayMetrics().density;return (int) (dp * scale + 0.5f);}}

最后就是用法了

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;import android.annotation.SuppressLint;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.Button;public class MainActivity extends AppCompatActivity {private TextProgressBar textProgressBar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button btStart = findViewById(R.id.btStart);textProgressBar = findViewById(R.id.textProgressBar);btStart.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {//开始进度条textProgressBar.setMax(1000);textProgressBar.setProgress(0);myHandler.sendEmptyMessage(0x2121);}});}public Handler myHandler = new Handler() {@SuppressLint("HandlerLeak")@Overridepublic void handleMessage(@NonNull Message msg) {super.handleMessage(msg);if (msg.what == 0x2121) {if (textProgressBar.getProgress() < 1000) {textProgressBar.setProgress(textProgressBar.getProgress() + 3);sendEmptyMessageDelayed(0x2121, 10);}}}};

今天的分享就到这里，如果有觉得不完善或者有问题的，可以私信我