可以在自定义Progressbar progressDrawable中执行圆角吗?

时间:2011-04-14 21:03:14

标签: android layout progress-bar rounded-corners skinning

我有一个应该看起来像附加图像的进度条:enter image description here

我已经做了很长的路。我非常接近唯一不起作用的部分是progressDrawable的圆角。这是我的样子。 (注意,用红色圈出,白色轮廓内的填充没有圆角):enter image description here

所以,当进度条用形状,渐变或颜色着色时,我发现了一些方法可以使这个工作。但是,我不能用图像作为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-&GT; enter image description here
slider_track_progress-&GT; enter image description here

以下是我将进度条嵌入我的活动布局

的位置
<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"
/>

任何人都知道如何使这项工作?

2 个答案:

答案 0 :(得分:1)

不确定您是否可以通过API实际完善边缘,但是您可以非常轻松地在白色轮廓和实际进度对象之间添加新图层?该图层可以是白色轮廓的精确切口,因此进度条不会显示在轮廓之外。

答案 1 :(得分:1)

试试这个,你可以通过修改拇指的颜色,宽度和高度以及xml中的搜索条来做你想做的事。

you can see the image here

这种闷热是我能做到这一点的唯一方法。 希望这个帮助

这是我的搜索栏:

         <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>

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