自定义多色SeekBar

Question

我想在安卓中创建一个自定义多色进度条。我尝试了以下代码：

customseekbar.java

int proBarWidth = getWidth();
int proBarHeight = getHeight();
int thumboffset = getThumbOffset();
int lastproX = 0;
int proItemWidth, proItemRight;
for (int i = 0; i < mproItemsList.size(); i++) {
proItem proItem = mproItemsList.get(i);
Paint proPaint = new Paint();
proPaint.setColor(getResources().getColor(proItem.color));

proItemWidth = (int) (proItem.proItemPercentage
        * proBarWidth / 100);

proItemRight = lastproX + proItemWidth;

// for last item give right of the pro item to width of the
// pro bar
if (i == mproItemsList.size() - 1
        && proItemRight != proBarWidth) {
    proItemRight = proBarWidth;
}
Rect proRect = new Rect();
proRect.set(lastproX, thumboffset / 2, proItemRight,
        proBarHeight - thumboffset / 2);
canvas.drawRect(proRect, proPaint);
lastproX = proItemRight;
}
super.onDraw(canvas);

视图

<mypackage.customseekbar
android:id="@+id/customseekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="0"
android:progressDrawable="@android:color/transparent"
android:thumb="@drawable/seek_thumb_normal"
android:thumbOffset="12dp" />

我在MainMenuActivity中使用了此方法。它给出了类似下面的结果。我参考了这个链接https://azzits.wordpress.com/2013/11/17/customseekbar/ 但是我期望得到类似于下面的结果 有没有办法画出这些垂直间隔的线？如何绘制这些垂直线？

- Ajay

---

我认为你可以使用这个库，它更容易使用，而且你有更多的自定义SeekBar可供选择！！ - R. García

@R.Garcia 感谢您的回复。我会查看这个库。 - Ajay

@AjayPunekar 请查看此链接 https://dev59.com/xozda4cB1Zd3GeqPhAZk - AskNilesh

@AjayPunekar 也可以看看这个 https://github.com/castorflex/SmoothProgressBar - AskNilesh

通过将 SeekBar 背景设置为透明，并使用 RelativeLayout 显示自定义可绘制对象作为背景，我已经做过类似的事情。此外，拇指可以具有自己的自定义 Drawable 实现，并根据进度更改颜色。 - ahasbini

Answer 1

进度条带分隔线是一个不错的参考，正如@Nilesh Rathod所提到的那样。与使用canvas.drawRect()不同，您可以使用canvas.drawRoundRect()；以下是简短的示例：

for (int i = 0; i < NUM_SEGMENTS; i++) {
        float loLevel = i / (float) NUM_SEGMENTS;
        float hiLevel = (i + 1) / (float) NUM_SEGMENTS;
        if (loLevel <= level && level <= hiLevel) {
            float middle = mSegment.left + NUM_SEGMENTS * segmentWidth * (level - loLevel);
            canvas.drawRoundRect(mSegment.left, mSegment.top, middle, mSegment.bottom, mPaint);
            mPaint.setColor(mBackground);
            canvas.drawRoundRect(middle, mSegment.top, mSegment.right, mSegment.bottom, mPaint);
        } else {
            canvas.drawRoundRect(mSegment, mPaint);
        }
        mSegment.offset(mSegment.width() + gapWidth, 0);
    }

我完全归功于上述链接的创建者，不会将其中任何内容视为自己的，因为我只是在说明应该进行的更改以达到所需的效果。如果您遇到进一步的问题，请告诉我。

- Kwright02