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
相关产品推荐
相关产品推荐

