如何实现TextView随ProgressBar进度变化的位置动画？

嘿，这个需求我之前帮不少开发者实现过，给你两种实用的方案，你可以根据自己的项目情况选：

这种方式适合快速在现有布局上修改，不用额外封装View。

步骤说明： #

1. 先在布局里把TextView放在ProgressBar的上方，初始位置可以和ProgressBar左对齐；
2. 给ProgressBar设置进度变化监听器，每次进度更新时，计算TextView应该移动的X坐标；
3. 核心是根据ProgressBar的可绘制宽度（总宽度减去左右内边距）和当前进度比例，算出偏移量，再调整TextView的位置（建议让TextView的中心对齐进度点，体验更好）。

布局示例（用ConstraintLayout，Android开发现在最常用）： #

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="0"/>

    <TextView
        android:id="@+id/progressText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0%"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@id/progressBar"
        app:layout_constraintStart_toStartOf="@id/progressBar"/>
</androidx.constraintlayout.widget.ConstraintLayout>

代码逻辑（Kotlin）： #

val progressBar = findViewById<ProgressBar>(R.id.progressBar)
val progressText = findViewById<TextView>(R.id.progressText)

// 监听进度变化
progressBar.setOnProgressChangeListener { progress, fromUser ->
    // 计算ProgressBar的有效绘制宽度（去掉左右padding）
    val progressBarEffectiveWidth = progressBar.width - progressBar.paddingLeft - progressBar.paddingRight
    // 根据进度比例算出偏移量
    val offset = (progress.toFloat() / progressBar.max) * progressBarEffectiveWidth
    // 让TextView中心对齐进度点，所以要减去自身宽度的一半
    val targetX = progressBar.paddingLeft + offset - progressText.width / 2f
    // 更新TextView的X坐标
    progressText.x = targetX
    // 同步更新文本内容
    progressText.text = "$progress%"
}

// 处理初始布局未测量完成的问题（比如一开始要设置默认进度）
progressBar.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        // 移除监听，避免重复触发
        progressBar.viewTreeObserver.removeOnGlobalLayoutListener(this)
        // 设置初始进度
        progressBar.progress = 30
    }
})

如果你的项目用Java，逻辑是完全一样的，只是语法稍有不同，这里就不贴Java代码啦。

如果这个带跟随文本的进度条在项目里要多次使用，建议封装成自定义View，这样后续维护和复用都更方便。

实现思路： #

1. 创建一个自定义View，继承自ConstraintLayout（或者LinearLayout）；
2. 在自定义View内部初始化ProgressBar和TextView，封装进度监听和位置计算逻辑；
3. 对外暴露设置进度、最大进度等方法，方便外部调用。

自定义View代码（Kotlin）： #

class ProgressWithText @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : androidx.constraintlayout.widget.ConstraintLayout(context, attrs, defStyleAttr) {

    private val progressBar: ProgressBar
    private val progressText: TextView

    init {
        // 加载内部布局（就是方案一里的ConstraintLayout布局，命名为view_progress_with_text.xml）
        inflate(context, R.layout.view_progress_with_text, this)
        progressBar = findViewById(R.id.progressBar)
        progressText = findViewById(R.id.progressText)

        // 内部监听进度变化
        progressBar.setOnProgressChangeListener { progress, _ ->
            updateTextPosition(progress)
            progressText.text = "$progress%"
        }
    }

    private fun updateTextPosition(progress: Int) {
        val effectiveWidth = progressBar.width - progressBar.paddingLeft - progressBar.paddingRight
        val offset = (progress.toFloat() / progressBar.max) * effectiveWidth
        progressText.x = progressBar.paddingLeft + offset - progressText.width / 2f
    }

    // 对外暴露设置进度的方法
    fun setProgress(progress: Int) {
        progressBar.progress = progress
    }

    // 对外暴露设置最大进度的方法
    fun setMaxProgress(max: Int) {
        progressBar.max = max
    }
}

使用自定义View的布局示例： #

<com.yourpackage.ProgressWithText
    android:id="@+id/progressWithText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"/>

外部调用代码： #

val progressWithText = findViewById<ProgressWithText>(R.id.progressWithText)
progressWithText.setMaxProgress(100)
progressWithText.setProgress(50)

内容的提问来源于stack exchange，提问作者Afinas EM