可以在自定义进度条progressDrawable中做圆角吗?

发布于 2024-11-01 01:52:01 字数 2302 浏览 5 评论 0原文

我有一个进度条,应该看起来像附图所示:在此处输入图像描述

我已将其设为很长一段路。我非常接近唯一不起作用的部分是 ProgressDrawable 的圆角。这是我的样子。 (请注意,红色圆圈内的白色轮廓内的填充没有圆角):

> ,当进度条用形状、渐变或颜色着色时,我发现了几种方法可以实现此目的。但是,我无法使用图像作为 ProgressDrawable 来获取它。

这是我扩展 ProgressBar 的类

public class RoundedProgressBar extends ProgressBar{
private Paint paint;

public RoundedProgressBar(Context context) {
    super(context);
    setup();
}

public RoundedProgressBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    setup();
}

public RoundedProgressBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setup();    ;
}

protected void setup()
{
    paint = new Paint();
}

@Override
protected synchronized void onDraw(Canvas canvas) {
    // First draw the regular progress bar, then custom draw our text
    super.onDraw(canvas);
    paint.setColor(Color.WHITE);
    paint.setStyle(Paint.Style.STROKE);
    RectF r = new RectF(0,0,getWidth()-1,getHeight()-1);
    canvas.drawRoundRect(r,getHeight()/2,getHeight()/2, paint);
}
 }

这是我的选择器:

<layer-list
 xmlns:android="http://schemas.android.com/apk/res/android"
 >
 <item
 android:id="@android:id/background"
 android:drawable="@drawable/slider_track" />
 <item
 android:id="@android:id/secondaryProgress"
 android:drawable="@drawable/slider_track" />
 <item
 android:id="@android:id/progress"
 android:drawable="@drawable/slider_track_progress" />
 </layer-list>

这是选择器中使用的图像:

slider_track->输入图像描述这里
slider_track_progress->在此处输入图像描述

这是我在活动布局中嵌入进度条的地方

<com.android.component.RoundedProgressBar
    android:id="@+id/player_hp_bar"
    android:layout_width="fill_parent"
    android:layout_height="36dip"
    android:layout_marginLeft="30dip"
    android:layout_marginRight="30dip"
    android:max="100"
    style="?android:attr/progressBarStyleHorizontal"
    android:progressDrawable="@drawable/slider_layer_list"
    android:progress="20"
    android:maxHeight="12dip"
    android:minHeight="12dip"
/>

任何人都知道如何制作这个工作?

I have a progress bar that is supposed to look like the attached image:enter image description here

And I've made it a long way. I'm very close the only part that isn't working is the rounded corners for the progressDrawable. Here is what mine looks like. (Notice, circled in red, that the fill inside the white outline does not have rounded corners):enter image description here

So, I've found a couple of ways to make this work when the progress bar is colored in with a shape, gradient, or color. BUT, I can't get it with an image as the progressDrawable.

Here is my class that extends ProgressBar

public class RoundedProgressBar extends ProgressBar{
private Paint paint;

public RoundedProgressBar(Context context) {
    super(context);
    setup();
}

public RoundedProgressBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    setup();
}

public RoundedProgressBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setup();    ;
}

protected void setup()
{
    paint = new Paint();
}

@Override
protected synchronized void onDraw(Canvas canvas) {
    // First draw the regular progress bar, then custom draw our text
    super.onDraw(canvas);
    paint.setColor(Color.WHITE);
    paint.setStyle(Paint.Style.STROKE);
    RectF r = new RectF(0,0,getWidth()-1,getHeight()-1);
    canvas.drawRoundRect(r,getHeight()/2,getHeight()/2, paint);
}
 }

Here is my selector:

<layer-list
 xmlns:android="http://schemas.android.com/apk/res/android"
 >
 <item
 android:id="@android:id/background"
 android:drawable="@drawable/slider_track" />
 <item
 android:id="@android:id/secondaryProgress"
 android:drawable="@drawable/slider_track" />
 <item
 android:id="@android:id/progress"
 android:drawable="@drawable/slider_track_progress" />
 </layer-list>

Here are the images used in the selector:

slider_track->enter image description here
slider_track_progress->enter image description here

Here is where I embed my progressbar in the layout for my activity

<com.android.component.RoundedProgressBar
    android:id="@+id/player_hp_bar"
    android:layout_width="fill_parent"
    android:layout_height="36dip"
    android:layout_marginLeft="30dip"
    android:layout_marginRight="30dip"
    android:max="100"
    style="?android:attr/progressBarStyleHorizontal"
    android:progressDrawable="@drawable/slider_layer_list"
    android:progress="20"
    android:maxHeight="12dip"
    android:minHeight="12dip"
/>

Anyone know how to make this work?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

感受沵的脚步 2024-11-08 01:52:01

不确定您是否真的可以通过 API 圆化边缘,但是您可以很容易地在白色轮廓和实际进度对象之间添加一个新层吗?该图层可以是白色轮廓的精确剪切,因此进度条不会显示在轮廓之外。

Not sure if you can actually round out the edges through API, but you could very easily add a new layer between your white outline, and your actual progress object? The layer could be an exact cutout of the white outline, and thus the progress bar would not show outside the outline.

牵强ㄟ 2024-11-08 01:52:01

试试这个,你也许可以通过修改xml中的thumb和seekbar的颜色和宽度和高度来完成你想要的事情。

您可以在此处查看图片

这是我能做到这一点的唯一方法。
希望这有帮助,

这是我的搜索栏:

         <SeekBar
            android:id="@+id/simpleProgressBar"
            android:layout_width="fill_parent"
            android:layout_height="12dp"
            android:max="100"
            android:progress="0"
            android:background="@null"
            android:shape="oval"
            android:splitTrack="false"
            android:progressDrawable="@drawable/progress_background"
            android:secondaryProgress="0"
            android:thumbOffset="10dp"
            android:thumb="@drawable/oval_seekbar_thumb" />

这是(progress_background.xml):

<item android:id="@android:id/background">
    <shape android:shape="rectangle">
        <corners android:radius="5dp" />

        <gradient
            android:angle="270"
            android:endColor="@color/grey_line"
            android:startColor="@color/grey_line" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape android:shape="oval">
            <corners android:radius="5dp" />
            <gradient
                android:angle="270"
                android:endColor="@color/blue"
                android:startColor="@color/blue" />
        </shape>
    </clip>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape android:shape="rectangle">
            <corners android:radius="90dp" />

            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryDark"
                android:startColor="@color/colorPrimary" />
        </shape>
    </clip>
</item>

这是拇指(oval_seekbar_thumb.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#ffffff" />
            <stroke android:color="@color/colorPrimaryDark" android:width="3dp"/>
            <size android:height="12dp" android:width="12dp"/>
        </shape>
    </item>
</selector>

拇指的高度应与搜索栏的高度相同才能正确显示。

Try this , you may be able to do what you want by modifying the color and width and height of the thumb and the seekbar in xml.

you can see the image here

This sulotion was the only way i could do this.
Hope this help

this is my seekbar :

         <SeekBar
            android:id="@+id/simpleProgressBar"
            android:layout_width="fill_parent"
            android:layout_height="12dp"
            android:max="100"
            android:progress="0"
            android:background="@null"
            android:shape="oval"
            android:splitTrack="false"
            android:progressDrawable="@drawable/progress_background"
            android:secondaryProgress="0"
            android:thumbOffset="10dp"
            android:thumb="@drawable/oval_seekbar_thumb" />

this is (progress_background.xml) :

<item android:id="@android:id/background">
    <shape android:shape="rectangle">
        <corners android:radius="5dp" />

        <gradient
            android:angle="270"
            android:endColor="@color/grey_line"
            android:startColor="@color/grey_line" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape android:shape="oval">
            <corners android:radius="5dp" />
            <gradient
                android:angle="270"
                android:endColor="@color/blue"
                android:startColor="@color/blue" />
        </shape>
    </clip>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape android:shape="rectangle">
            <corners android:radius="90dp" />

            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryDark"
                android:startColor="@color/colorPrimary" />
        </shape>
    </clip>
</item>

and this is the thumb (oval_seekbar_thumb.xml) :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#ffffff" />
            <stroke android:color="@color/colorPrimaryDark" android:width="3dp"/>
            <size android:height="12dp" android:width="12dp"/>
        </shape>
    </item>
</selector>

The height of the thumb should be same as the height of the seekbar to look properly.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文