layer-list方式自定义progressbar

先上布局:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值