Android上的倒角进度条

时间:2019-06-19 08:33:30

标签: android android-drawable android-progressbar

是否可以在Android上对进度条进行倒角而无需编写自己的进度条类?

当前外观:

所需外观:

这是我的当前绘图的外观:

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

1 个答案:

答案 0 :(得分:0)

创建一个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>

将此Drawable用作styles.xml中的自定义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>

然后在Layout 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"/>