You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Android中如何为LinearProgressIndicator设置双向进度值

实现双向填充的双值LinearProgressIndicator效果

最简洁的实现方式是通过叠加两个LinearProgressIndicator来模拟双向填充效果,无需引入第三方库,直接基于原生组件改造:

步骤1:编写布局代码

用ConstraintLayout(或FrameLayout)将两个进度条重叠放置,分别控制左右两侧的填充进度:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="@dimen/_10mdp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/rightSectionLay"
    app:layout_constraintStart_toEndOf="@+id/arrowImg"
    app:layout_constraintTop_toTopOf="parent">

    <!-- 左侧进度条:从左向右填充 -->
    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:id="@+id/progress_left"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:max="150"
        app:indicatorColor="@color/mystic"
        app:trackColor="@color/whileSmoke"
        app:trackCornerRadius="@dimen/_10mdp"
        app:trackThickness="@dimen/_3mdp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- 右侧进度条:从右向左填充(通过旋转180度实现) -->
    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:id="@+id/progress_right"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:max="150"
        android:rotation="180"
        app:indicatorColor="@color/mystic"
        <!-- 右侧进度条的轨道设为透明,避免与左侧轨道重复 -->
        app:trackColor="@android:color/transparent"
        app:trackCornerRadius="@dimen/_10mdp"
        app:trackThickness="@dimen/_3mdp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

步骤2:代码中控制双进度值

在Activity/Fragment中分别设置两个进度条的进度值,即可实现从中间向两侧填充的效果:

// 示例:设置左侧进度为60,右侧进度为80
progress_left.progress = 60
progress_right.progress = 80

关键细节说明

  • 两个进度条的trackThickness和trackCornerRadius必须保持一致,确保视觉上是一个统一的进度轨道
  • 右侧进度条通过android:rotation="180"反转填充方向,同时将trackColor设为透明,避免轨道重复显示
  • 若需要不同的左右填充颜色,只需修改两个进度条的app:indicatorColor为不同值即可

内容的提问来源于stack exchange,提问作者Dr.KeyOk

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.07 08:45:16