Android——个性化Progress电池显示视图

Posted 2022-07-31 化作孤岛的瓜

项目中需要用到的效果，图示如下：

既一个显示电量槽的ProgressBar。

一开始没想到可以通过ProgressBar直接实现，想的是通过一个电池图的遮盖，然后再用canvas画内部的红色长方形实现的。

后面知道了居然可以直接用ProgressBar写。。。下面讲一下具体怎么实现的，这个也可以收藏起来以后参考用。

实现步骤：

1.首先实现ProgressBar的布局，这里需要设置style为水平进度条：progressBarStyleHorizontal

  <ProgressBar
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:id="@+id/pgb_battery"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/layer_qidong"
        style="?android:attr/progressBarStyleHorizontal" />

2.关键的部分。实现Progressbar自定义的 layer-list：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 背景  gradient是渐变,corners定义的是圆角 -->
    <item android:id="@android:id/background">
        <nine-patch

            android:dither="true"
            android:src="@drawable/ic_dianchi" />
    </item>
    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <scale
            android:scaleWidth="98%">
            <shape>
                <corners android:radius="5dp" />
                <gradient
                    android:angle="90"
                    android:endColor="#e3304d"
                    android:startColor="#aa243a" />

            </shape>
        </scale>
    </item>

</layer-list>

其中背景用的是.9图防止拉伸导致电池的图片模糊。

进度条采用了一点渐变处理，就能完美的实现了项目中所用到的效果了。