自定义多色搜索框 [英] custom seekbar with multi color
问题描述
我正在尝试在Android中使用多色创建自定义搜索栏.我尝试了以下代码
I am trying to create custom seek bar in android with multicolor. I tried below code
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
中使用了此方法.它给我的结果如下所示.我引用了此链接
I used this method in MainMenuActivity
. It gives me result something like below. I referred this link https://azzits.wordpress.com/2013/11/17/customseekbar/
但是我期望下面的内容类似
But I am expecting something like below
有什么办法画这条垂直的空白线?如何绘制垂直线?
Is there any way to draw this vertical gapped lines? How can I draw this vertical lines?
推荐答案
带有分隔线的进度条是@Nilesh Rathod提到的一个看起来不错的地方.除了使用canvas.drawRect()之外,还可以使用canvas.drawRoundRect();.简短示例:
Progress bar with divider is a good place to look as mentioned by @Nilesh Rathod. Rather than using canvas.drawRect() you can use canvas.drawRoundRect(); Short example:
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);
}
我将上述代码完全归功于上述链接的创建者,并且并没有将其中的任何代码声明为我的,因为我只是在说明为实现所需效果而应进行的更改.如果您遇到其他问题,请告诉我.
I give full credit to the code above to the creator of the aforementioned link and don't claim any of it as mine as I am just illustrating the change that should be made to reach the desired effect. Please let me know if you run into further issues.
这篇关于自定义多色搜索框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!