Question

我想创建一个带有2种纯色绘图的圆形进度条。目前我有一个像这样的渐变进度条。

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="270" >

    <shape
        android:shape="ring"
        android:useLevel="false" >
        <gradient
            android:centerY="1"
            android:startColor="#0099CC"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

我如何实现这一目标？

Answer 1

我们可以使用这个xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Background -->
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/progress_bar_off"/>

    <!-- Secondary progress - this is optional -->
    <item android:id="@android:id/secondaryProgress">
        <clip android:drawable="@drawable/progress_bar_secondary" />
    </item>

    <!-- Progress -->
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/progress_bar_on" />
    </item>

</layer-list>

Answer 2

试试这个

<?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>
        <corners
            android:radius="5dip" />
        <gradient
            android:startColor="#ffdddddd"
            android:centerColor="#ffdddddd"
            android:centerY="0.50"
            android:endColor="#ffdddddd"
            android:angle="270" />
    </shape>
</item>
<item
    android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="#770e75af"
                android:endColor="#771997e1"
                android:angle="90" />
        </shape>
    </clip>
</item>
<item
    android:id="@android:id/progress">
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="#ff0e75af"
                android:endColor="#ff1997e1"
                android:angle="90" />
        </shape>
    </clip>
</item>

进度条有2种纯色

2 个答案: