自定义ProgressBar(一)
ProgressBar是一个非常重要组件。通常用于向用户显示耗时操作完成的百分比。主要包括水平和圆形两种类型。讲解之前首先来讲一下样式属性设置,这个在自定义里面是核心部分。
本文主要介绍ProgressBar的属性里面的 progressDrawable 和 indeterminateDrawable
一、常用属性
(一)关于style属性设置:安卓支持几种风格的进度条,通过style属性可以为ProgressBar设置指定风格,该属性可支持如下几个属性值:
- 安卓styles.xml里面的 8个,这8个兼容不同系统版本,一般都用这些style样式用的多
属性值 | 属性的含义 |
---|---|
style="@android:style/Widget.ProgressBar" | |
style="@android:style/Widget.ProgressBar.Large" | 大环形进度条 |
style="@android:style/Widget.ProgressBar.Small" | 小环形进度条 |
style="@android:style/Widget.ProgressBar.Inverse" | 普通大小的环形进度条 |
style="@android:style/Widget.ProgressBar.Large.Inverse" | 大环形进度条 |
style="@android:style/Widget.ProgressBar.Small.Inverse" | 小环形进度条 |
style="@android:style/Widget.ProgressBar.Small.Title" | 标题栏环形进度条 |
style="@android:style/Widget.ProgressBar.Horizontal" | 水平进度条 |
<style name="Widget.ProgressBar"> <item name="indeterminateOnly">true</item> <item name="indeterminateDrawable">@drawable/progress_medium_white</item> <item name="indeterminateBehavior">repeat</item> <item name="indeterminateDuration">3500</item> <item name="minWidth">48dip</item> <item name="maxWidth">48dip</item> <item name="minHeight">48dip</item> <item name="maxHeight">48dip</item> <item name="mirrorForRtl">false</item> </style> <style name="Widget.ProgressBar.Large"> <item name="indeterminateDrawable">@drawable/progress_large_white</item> <item name="minWidth">76dip</item> <item name="maxWidth">76dip</item> <item name="minHeight">76dip</item> <item name="maxHeight">76dip</item> </style> <style name="Widget.ProgressBar.Small"> <item name="indeterminateDrawable">@drawable/progress_small_white</item> <item name="minWidth">16dip</item> <item name="maxWidth">16dip</item> <item name="minHeight">16dip</item> <item name="maxHeight">16dip</item> </style> <style name="Widget.ProgressBar.Inverse"> <item name="indeterminateDrawable">@drawable/progress_medium</item> </style> <style name="Widget.ProgressBar.Large.Inverse"> <item name="indeterminateDrawable">@drawable/progress_large</item> </style> <style name="Widget.ProgressBar.Small.Inverse"> <item name="indeterminateDrawable">@drawable/progress_small</item> </style> <style name="Widget.ProgressBar.Small.Title"> <item name="indeterminateDrawable">@drawable/progress_small_titlebar</item> </style> <style name="Widget.ProgressBar.Horizontal"> <item name="indeterminateOnly">false</item> <item name="progressDrawable">@drawable/progress_horizontal</item> <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item> <item name="minHeight">20dip</item> <item name="maxHeight">20dip</item> <item name="mirrorForRtl">true</item> </style>
2.styles_holo.xml里面的 16个,其中Widget.Holo.开头的有8个,Widget.Holo.Light.开头的有8个
----------------------------------------------- Widget.Holo.开头的 ------------------------------------------------------
<style name="Widget.Holo.ProgressBar" parent="Widget.ProgressBar"> <item name="indeterminateDrawable">@drawable/progress_medium_holo</item> </style> <style name="Widget.Holo.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal"> <item name="progressDrawable">@drawable/progress_horizontal_holo_dark</item> <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_holo</item> <item name="minHeight">16dip</item> <item name="maxHeight">16dip</item> </style> <style name="Widget.Holo.ProgressBar.Small" parent="Widget.ProgressBar.Small"> <item name="indeterminateDrawable">@drawable/progress_small_holo</item> </style> <style name="Widget.Holo.ProgressBar.Small.Title" /> <style name="Widget.Holo.ProgressBar.Large" parent="Widget.ProgressBar.Large"> <item name="indeterminateDrawable">@drawable/progress_large_holo</item> </style> <style name="Widget.Holo.ProgressBar.Inverse" /> <style name="Widget.Holo.ProgressBar.Small.Inverse" /> <style name="Widget.Holo.ProgressBar.Large.Inverse" />
--------------------------------------------- Widget.Holo.Light.开头的 ----------------------------------------------------
<style name="Widget.Holo.Light.ProgressBar" parent="Widget.Holo.ProgressBar" /> <style name="Widget.Holo.Light.ProgressBar.Horizontal" parent="Widget.Holo.ProgressBar.Horizontal"> <item name="progressDrawable">@drawable/progress_horizontal_holo_light</item> </style> <style name="Widget.Holo.Light.ProgressBar.Small" parent="Widget.Holo.ProgressBar.Small" /> <style name="Widget.Holo.Light.ProgressBar.Small.Title" parent="Widget.Holo.ProgressBar.Small.Title" /> <style name="Widget.Holo.Light.ProgressBar.Large" parent="Widget.Holo.ProgressBar.Large" /> <style name="Widget.Holo.Light.ProgressBar.Inverse" parent="Widget.Holo.ProgressBar.Inverse" /> <style name="Widget.Holo.Light.ProgressBar.Small.Inverse" parent="Widget.Holo.ProgressBar.Small.Inverse" /> <style name="Widget.Holo.Light.ProgressBar.Large.Inverse" parent="Widget.Holo.ProgressBar.Large.Inverse" />
3.styles_material.xml里面的 16个,其中Widget.Material.开头的有8个,Widget.Material.Light.开头的有8个
----------------------------------------------- Widget.Material.开头的 ------------------------------------------------------
<style name="Widget.Material.ProgressBar" parent="Widget.ProgressBar"> <item name="indeterminateDrawable">@drawable/progress_medium_material</item> </style> <style name="Widget.Material.ProgressBar.Inverse"/> <style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal"> <item name="progressDrawable">@drawable/progress_horizontal_material</item> <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item> <item name="minHeight">16dip</item> <item name="maxHeight">16dip</item> </style> <style name="Widget.Material.ProgressBar.Small" parent="Widget.ProgressBar.Small"> <item name="indeterminateDrawable">@drawable/progress_small_material</item> </style> <style name="Widget.Material.ProgressBar.Small.Inverse"/> <style name="Widget.Material.ProgressBar.Small.Title"/> <style name="Widget.Material.ProgressBar.Large" parent="Widget.ProgressBar.Large"> <item name="indeterminateDrawable">@drawable/progress_large_material</item> </style> <style name="Widget.Material.ProgressBar.Large.Inverse"/>
-------------------------------------------- Widget.Material.Light.开头的 ---------------------------------------------------
<style name="Widget.Material.Light.ProgressBar" parent="Widget.Material.ProgressBar"/> <style name="Widget.Material.Light.ProgressBar.Horizontal" parent="Widget.Material.ProgressBar.Horizontal"/> <style name="Widget.Material.Light.ProgressBar.Small" parent="Widget.Material.ProgressBar.Small"/> <style name="Widget.Material.Light.ProgressBar.Small.Title" parent="Widget.Material.ProgressBar.Small.Title"/> <style name="Widget.Material.Light.ProgressBar.Large" parent="Widget.Material.ProgressBar.Large"/> <style name="Widget.Material.Light.ProgressBar.Inverse" parent="Widget.Material.ProgressBar.Inverse"/> <style name="Widget.Material.Light.ProgressBar.Small.Inverse" parent="Widget.Material.ProgressBar.Small.Inverse"/> <style name="Widget.Material.Light.ProgressBar.Large.Inverse" parent="Widget.Material.ProgressBar.Large.Inverse"/>
4.styles_device_default.xml里面的13个,其中Widget.DeviceDefault.开头的有5个,
Widget.DeviceDefault.Light.开头的有8个。
------------------------------------------- Widget.DeviceDefault..开头的 --------------------------------------------------
<style name="Widget.DeviceDefault.ProgressBar" parent="Widget.Material.ProgressBar"/> <style name="Widget.DeviceDefault.ProgressBar.Horizontal" parent="Widget.Material.ProgressBar.Horizontal"/> <style name="Widget.DeviceDefault.ProgressBar.Small" parent="Widget.Material.ProgressBar.Small"/> <style name="Widget.DeviceDefault.ProgressBar.Small.Title" parent="Widget.Material.ProgressBar.Small.Title"/> <style name="Widget.DeviceDefault.ProgressBar.Large" parent="Widget.Material.ProgressBar.Large"/>
---------------------------------------- Widget.DeviceDefault.Light.开头的 -----------------------------------------------
<style name="Widget.DeviceDefault.Light.ProgressBar" parent="Widget.Material.Light.ProgressBar"/> <style name="Widget.DeviceDefault.Light.ProgressBar.Horizontal" parent="Widget.Material.Light.ProgressBar.Horizontal"/> <style name="Widget.DeviceDefault.Light.ProgressBar.Small" parent="Widget.Material.Light.ProgressBar.Small"/> <style name="Widget.DeviceDefault.Light.ProgressBar.Small.Title" parent="Widget.Material.Light.ProgressBar.Small.Title"/> <style name="Widget.DeviceDefault.Light.ProgressBar.Large" parent="Widget.Material.Light.ProgressBar.Large"/> <style name="Widget.DeviceDefault.Light.ProgressBar.Inverse" parent="Widget.Material.Light.ProgressBar.Inverse"/> <style name="Widget.DeviceDefault.Light.ProgressBar.Small.Inverse" parent="Widget.Material.Light.ProgressBar.Small.Inverse"/> <style name="Widget.DeviceDefault.Light.ProgressBar.Large.Inverse" parent="Widget.Material.Light.ProgressBar.Large.Inverse"/>
(二)其他属性
属性值 | 描述 |
---|---|
android:max="" | 进度条最大值 |
android:progress="" | 进度条已完成值 |
android:secondaryProgress="" | 二级进度值,值介于0到max。该进度在主进度和背景之间。比如用于网络播放视频时,二级进度用于表示缓冲进度,主进度用于表示播放进度。 |
android:animationResolution | 超时的动画帧之间的毫秒 ;必须是一个整数值,如“100”。(已经被舍弃了,现在都不用了。) |
android:progressDrawable="" | 设置进度条轨道对应的drawable对象 |
android:indeterminate="" | 是否允许使用不确定模式,该属性设置为true,表示设置进度条不精确显示进度,在不确定模式下,进度条动画无限循环 |
android:indeterminateDrawable="" | 定义不确定模式是否可拉 |
android:indeterminateDuration="" | 时间不定的动画 |
android:indeterminateBehavior="" | 定义当进度达到最大时,不确定模式的表现;该值必须为repeat或者cycle,repeat表示进度从0重新开始;cycle表示进度保持当前值,并且回到0 |
android:indeterminateOnly="" | 限制为不定模式 |
android:indeterminateTint="" | |
android:indeterminateTintMode="" |
二、水平的ProgressBar
1.首先是布局代码:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#3C7793" android:orientation="vertical"> <ProgressBar android:id="@+id/progressBar1" style="?android:attr/progressBarStyleHorizontal" android:layout_margin="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:progress="0" android:secondaryProgress="100" android:progressDrawable="@drawable/progressbar_line" /> </LinearLayout>
2.再看drawable目录下的progressbar_line.xml是怎么定义的:(第一个item是背景,第二个item是二级进度值,一般用于视频的缓冲,最后一个是显示的进度)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#ff9d9e9d" android:centerColor="#ff5a5d5a" android:centerY="0.75" android:endColor="#ff747674" android:angle="0" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#80ffd300" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:angle="0" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#80ff0000" android:endColor="#8000ff00" android:angle="0" /> </shape> </clip> </item> </layer-list>
3.代码里面控制进度的显示,新建一个线程,重写runnable,在run方法里面去模拟执行耗时操作,通过handler发消息给主线程,主线程拿到消息之后更新UI.
import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.widget.ProgressBar; public class MainActivity extends AppCompatActivity { private ProgressBar progressBar1; //在这里处理更新进度条 private Handler mHandler = new Handler(){ @Override public void handleMessage(Message msg) { super.handleMessage(msg); switch (msg.what) { case 0x0001: progressBar1.setProgress(msg.arg1); //如果进度小于100,则延迟100毫秒之后重复执行runnable if(msg.arg1<100){ mHandler.postDelayed(r, 100); }else{ //否则,都置零,线程重新执行 progressBar1.setProgress(0); mHandler.post(r); } break; } } }; Runnable r = new Runnable() { int currentProgress = 0; @Override public void run() { Message msg = new Message(); msg.what = 0x0001; currentProgress = progressBar1.getProgress()+1; progressBar1.setProgress(currentProgress); msg.arg1 = currentProgress; mHandler.sendMessage(msg); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2); progressBar1 = (ProgressBar) findViewById(R.id.progressBar1); progressBar1.setProgressDrawable(getResources().getDrawable(R.drawable.progressbar_line)); if(progressBar1.getProgress() < progressBar1.getMax()){ // 把r加入到线程队列,然后线程队列里就开始执行runnable对象中的run() mHandler.post(r); }else{//不用的时候,就把r从线程队列移除,这是一个小的性能优化 mHandler.removeCallbacks(r); } } }
三、圆形的ProgressBar
1.先来看看布局:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#3C7793" android:orientation="vertical"> <ProgressBar android:id="@+id/loadProgressBar" style="@android:style/Widget.ProgressBar" android:layout_margin="10dp" android:indeterminateDrawable="@drawable/progressbar_round" android:layout_width="100dp" android:layout_height="100dp" /> </LinearLayout>
2.再看看drawable目录下的progressbar_round.xml
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360"> <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="10" android:useLevel="false"> <gradient android:centerColor="#FFFFFF" android:centerY="0.50" android:endColor="#FFFF00" android:startColor="#00FFFF" android:type="sweep" android:useLevel="false" /> </shape> </rotate>
效果图如下:
下一篇我们重点讲解如何写一个View继承ProgressBar,实现各种吊炸天的效果。
相关文章阅读:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Android网络类型判断(2g、3g、wifi)
判断网络类型是wifi,还是3G,还是2G网络,对不同 的网络进行不同的处理,现将判断方法整理给大家,以供参考 说明:下面用到的数据移动2G,联通2G,联通3G,wifi我都已经测试过,暂时手上 没有电信的卡,所以没有验证,有电信手机的同事,可以验证一下,验证后将结果 发送给大家。 ConnectivityManagerconnectMgr=(ConnectivityManager)this .getSystemService(Context.CONNECTIVITY_SERVICE); NetworkInfoinfo=connectMgr.getActiveNetworkInfo(); 一、判断网络是否是wifi,在判断之前一定要进行的非空判断,如果没有任何网络 连接info==null info.getType()==ConnectivityManager.TYPE_WIFI 二、判断是否是手机网络 info!=null&&info.getType()==ConnectivityManager.TYPE_MOBILE 手机网络进行详细区分: info....
- 下一篇
LinearLayout控件
LinearLayout是线性布局控件,它包含的子控件将以横向或竖向的方式排列,按照相对位置来排列所有的widgets或者其他的containers,超过边界时,某些控件将缺失或消失。因此一个垂直列表的每一行只会有一个widget或者是container,而不管他们有多宽,而一个水平列表将会只有一个行高(高度为最高子控件的高度加上边框高度)。LinearLayout保持其所包含的widget或者是container之间的间隔以及互相对齐(相对一个控件的右对齐、中间对齐或者左对齐)。 LinearLayout布局方式: android:orientation="horizontal" .//这里是水平布局方式 以下是水平布局方式和垂直布局方式的效果图 本文转自陈哈哈博客园博客,原文链接http://www.cnblogs.com/kissazi2/archive/2012/07/04/2575626.html如需转载请自行联系原作者 kissazi2
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- 设置Eclipse缩进为4个空格,增强代码规范
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Hadoop3单机部署,实现最简伪集群
- CentOS8安装Docker,最新的服务器搭配容器使用
- Docker快速安装Oracle11G,搭建oracle11g学习环境