如何在 Android 中获得虚线的水平进度条？

Question

我需要设计一个虚线进度条，如附件所示。

这是我到目前为止所做的，它显示一个带有两种不同颜色的普通进度条，一种用于进度，另一种用于其他颜色。

<ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:progressDrawable="@drawable/bg_progress_bar_green"
    />

bg_progress_bar_green 在这里

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <solid android:color="#E0E1EA" />
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <solid android:color="#66BA6B" />
        </shape>
    </clip>
</item>

这就是我更新进度条的方式：

 progressBar.setProgress(numOfHours);

如何获得如图所示的虚线？

Answer 1

您可以将此库用于您的工作Step Progress Bar。如果链接更改，我将提供代码。

Gradle

dependencies {
   ...
   compile 'com.marcok.stepprogressbar:stepprogressbar:1.0.1'
}

用法

 <com.marcok.stepprogressbar.StepProgressBar
    android:layout_centerVertical="true"
    android:layout_height="0dp"
    android:layout_width="wrap_content"
    android:id="@+id/stepProgressBar"
    app:cumulativeDots="false"
    app:activeDotIndex="0"
    app:activeDotColor="@color/material_deep_teal_500"
    app:inactiveDotColor="@color/material_blue_grey_800"
    app:activeDotIcon="@drawable/active_dot.png"
    app:inactiveDotIcon="@drawable/inactive_dot.png"
    app:numberDots="6"
    app:dotSize="20dp"
    app:spacing="20dp"/>

• 如果提供点图标，它们会覆盖点颜色
• 布局高度无关，由dotSize决定

Java 代码

• 移动到下一个点或上一个点：

  StepProgressBar mStepProgressBar =(StepProgressBar)findViewById(R.id.stepProgressBar); mStepProgressBar.next(); mStepProgressBar.previous();

  • 要将点设置为累积（所有点setCumulativeDots(true)

  • 调用setCurrentProgressDot(-1) 将阻止任何点显示为活动状态。任何较低的值都会抛出IndexOutOfBoundsExeption.

  • 其他方法：

  setCurrentProgressDot(); setNumDots(); setActiveColor(); setInactiveColor(); setActiveDrawable(); setInactiveDrawable();

绘制矩形进度

使用这两个drawbles..

inactive_dot.png

active_dot.png