layer-list方式自定义progressbar

最新推荐文章于 2021-06-02 23:06:24 发布

gufengpiaoyi

最新推荐文章于 2021-06-02 23:06:24 发布

阅读量955

点赞数

分类专栏： android技巧文章标签： progressbar 进度圆角

本文链接：https://blog.csdn.net/gufengpiaoyi/article/details/64906123

版权

android技巧专栏收录该内容

18 篇文章 0 订阅

订阅专栏

先上布局：

<ProgressBar
            android:id="@+id/pb"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:progressDrawable="@drawable/bg_progressbar"
            android:max="100"
            />

progressDrawable是重点，根标签是layer-list，看下代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

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

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <solid android:color="@color/color_e7e7e7"/>
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <solid android:color="@color/color_f04726"/>
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <solid android:color="@color/color_f04726"></solid>
            </shape>
        </clip>
    </item>

</layer-list>

这里介绍一下clip标签，<clip>标签使用了如下的3个属性来控制如何截取图像。

android:drawable：指定要剪切的原图像，这里用的不是图片，用的是shape。

android:clipOrientation：截取的方向。可取的值：horizontal和vertical。分别表示水平和垂直方向截取图像。

android:gravity：表示如何截取图像。例如，left表示从左侧截取图像，right表示从右侧截取图像。

这样出来的进度是直角的，如果想要进度也是圆角的，布局如下：

?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

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

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <solid android:color="@color/color_e7e7e7"/>
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <solid android:color="@color/color_f04726"/>
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <scale
            android:scaleWidth="100%" >
        <shape>
            <corners android:radius="5dip" />
            <solid android:color="@color/color_f04726"></solid>
        </shape>
        </scale>
    </item>

</layer-list>

关键点是将clip标签替换为scale标签，scaleWidth设置为100%。