Android 上的倒角进度条

Question

是否可以在不编写我自己的进度条类的情况下对Android上的进度条进行倒角？

目前的样子：

想要的外观：

这就是我的drawable现在的样子：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/border">
        <shape android:shape="rectangle">
            <padding android:bottom="2dp"
                     android:left="2dp"
                     android:right="2dp"
                     android:top="2dp" />
            <corners android:radius="12dp" />
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <solid android:color="#e0e0e0" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="10dp" />
                <solid android:color="#b3e5fc" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="10dp" />
                <solid android:color="#7ed9f0" />
            </shape>
        </clip>
    </item>
</layer-list>

Answer 1

创建一个 VectorDrawable custom_progressbar_shape.xml 作为资源文件。使用android:pathData（查看此链接以了解更多关于VectorDrawable pathData 的信息）创建您想要的形状，就像我创建的与您提供的形状相似的三角形：

custom_progressbar_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/custom"
    android:height="100dp"
    android:width="100dp"
    android:viewportHeight="100"
    android:viewportWidth="60">
    <group
        android:name="triableGroup">
        <path
            android:name="triangle"
            android:fillColor="#7ed9f0"
            android:pathData="M 0,0 L 50,0 L 0,100 z" />
    </group>
</vector>

将此 VectorDrawable 添加到给定的 Drawable，例如 custom_progressbar_horizontal.xml，如下所示：

custom_progressbar_horizontal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:drawable="@drawable/custom_progressbar_shape"
        android:gravity="center_vertical|fill_horizontal">
    ...
    </item>
    ...
</layer-list>

在styles.xml 中使用这个Drawable 作为你的自定义ProgressBar 样式：

<style name="MyProgressBarStyle" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="colorControlActivated">#7ed9f0</item>
        <item name="colorControlHighlight">#b3e5fc</item>
        <item name="android:progressDrawable">@drawable/custom_progressbar_horizontal</item>
        <item name="android:minWidth">200dp</item>
</style>

然后将此样式设置为您在布局 XML 文件中的ProgressBar：

<ProgressBar
        android:id="@+id/MyProgressBar"
        android:padding="10dp"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/MyProgressBarStyle"
        android:progress="30"
        android:secondaryProgress="60"/>