Android Clip用法——自定义进度条
2017-07-19 10:59
1616 查看
网上纯色的渐变色的进度条已经很多了,近来UI需要一个类游戏的进度条,这个,
这个用纯色做实在难以实现,那就用裁剪图片实现吧,需要这么几步。
定义进度条样式:
indeterminateOnly表示进度值是否确定,true表示不确定(这时候是波浪的动画),false表示确定,对于我们的需求来说只是确定的所以是false;
indeterminateDrawable指定波浪动画的anim文件,如果上面一个属性值是false,那么这个的作用就不大了;
progressDrawable是展示确定值的进度条,这是我们想要的;
然后就是定义我们的drawable文件,res/drawable/progressbar_layer:
最后是使用,
另外:
ClipDrawable,这个Drawable类的用法可能更加直观一些。
定义res/drawable/clip_img.xml
drawable是裁剪的对象;
gravity表示裁剪那一部分,左、右、还是中间;
引用drawable
下面一个是原图,上面是被裁剪过的,显示左边40%。
这种办法也可以做进度条,只需要给布局文件加上一个合适的背景,再配上被裁剪的图片,那就是进度条;要是想让进度条有动效可以加个计时器在固定时间内匀速的设置增量,把设置后的值setLevel,这样就动起来了,有兴趣的可以试下。
这个用纯色做实在难以实现,那就用裁剪图片实现吧,需要这么几步。
定义进度条样式:
<style name="myprogressbar"> <item name="android:indeterminateOnly">false</item> <item name="android:progressDrawable">@drawable/progressbar_layer </item> <item name="android:indeterminateDrawable"> @android:drawable/progress_indeterminate_horizontal </item> <item name="android:minHeight">23dip</item> <item name="android:maxHeight">30dip</item> </style>
indeterminateOnly表示进度值是否确定,true表示不确定(这时候是波浪的动画),false表示确定,对于我们的需求来说只是确定的所以是false;
indeterminateDrawable指定波浪动画的anim文件,如果上面一个属性值是false,那么这个的作用就不大了;
progressDrawable是展示确定值的进度条,这是我们想要的;
然后就是定义我们的drawable文件,res/drawable/progressbar_layer:
<?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <bitmap android:src="@drawable/temp_empty" /> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="1dip" /> <gradient android:angle="270" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:startColor="#80ffd300" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <bitmap android:src="@drawable/temp_fill" /> </clip> </item> </layer-list>注意上面三组item的id的设定,要照上面定义,第一组item是定义进度条的背景色;第二组的item是用渐变色定义的二级进度条;第三组item是一级进度条,第一第二组item是我们需要的分别是两张图片,图片使用<clip>限制的。
最后是使用,
<ProgressBar android:id="@+id/progress_sound_correct" style="@style/mprogressbar" android:layout_width="283dp" android:layout_height="wrap_content" android:layout_marginLeft="11dp" android:max="100" android:progress="30"/>对应的效果
另外:
ClipDrawable,这个Drawable类的用法可能更加直观一些。
定义res/drawable/clip_img.xml
<?xml version="1.0" encoding="utf-8"?> <clip xmlns:android="http://schemas.android.com/apk/res/android" android:clipOrientation="horizontal" android:drawable="@drawable/ic_launcher" android:gravity="left"/>clipOrientation表示裁剪是横向的还是竖向的;
drawable是裁剪的对象;
gravity表示裁剪那一部分,左、右、还是中间;
引用drawable
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/iv_clip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/clip_img" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/iv_clip" android:layout_centerInParent="true" android:src="@drawable/ic_launcher" /> </RelativeLayout>设置裁剪比例
ImageView ivClip = (ImageView) findViewById(R.id.iv_clip); ClipDrawable clipDrawable = (ClipDrawable) ivClip.getDrawable(); clipDrawable.setLevel(40 * 100);setLevel的取值是0~10000,表示被裁剪出来的部分所占比例,如果值是10000那就是被裁剪对象完全展示
下面一个是原图,上面是被裁剪过的,显示左边40%。
这种办法也可以做进度条,只需要给布局文件加上一个合适的背景,再配上被裁剪的图片,那就是进度条;要是想让进度条有动效可以加个计时器在固定时间内匀速的设置增量,把设置后的值setLevel,这样就动起来了,有兴趣的可以试下。
相关文章推荐
- Android 利用ClipDrawable 自定义进度条
- Android中自定义SeekBar背景颜色,进度条颜色,滑块图片
- Android 自定义对话框,进度条,下拉刷新等
- Android--自定义标题栏之显示网页加载进度
- android之自定义进度条的背景和进度的颜色
- android自定义的圆弧进度条,更多功能,只需修改源码即可
- Android自定义进度条
- Android自定义进度条颜色
- Android自定义标题+画圆+进度条
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android自定义View的用法总结
- [Android开发]仿天天P图带气泡显示百分比进度的自定义SeekBar
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android Studio第十七期 - 自定义圆形进度条
- Android自定义进度条
- android自定义view之半圆形进度条
- android 自定义进度条
- android自定义view 模仿win10进度条
- Android 自定义View——带进度条按钮
- Android自定义进度条