项目中需要用到的效果,图示如下:
既一个显示电量槽的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图防止拉伸导致电池的图片模糊。
进度条采用了一点渐变处理,就能完美的实现了项目中所用到的效果了。
作者:qq_22770457 发表于2017/2/11 19:24:35 原文链接
阅读:119 评论:1 查看评论