Android 进度条使用详解及示例代码
在这里,总结一下loading进度条的使用简单总结一下。
一、说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯qq安装进度条一样,有个进度总给人良好的用户体验。
先来找图看看,做这个图完成不用图片就可以做到了。
看下xml布局文件,其实就是直接用xml写的在加两个属性设置一下就好了,一个style,另一个是background。
<progressbar android:id=”@+id/pb_progressbar” style=”@style/styleprogressbarmini” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:layout_margin=”30dp” android:background=”@drawable/shape_progressbar_bg” android:max=”100″ android:progress=”50″ />
先看style吧
<style name=”styleprogressbarmini” parent=”@android:style/widget.progressbar.horizontal”> <item name=”android:maxheight”>50dip</item> <item name=”android:minheight”>10dip</item> <item name=”android:indeterminateonly”>false</item> <item name=”android:indeterminatedrawable”>@android:drawable/progress_indeterminate_horizontal</item> <item name=”android:progressdrawable”>@drawable/shape_progressbar_mini</item> </style>
这里的progressdrawable又是引用一个自定义drawable,不是图片哦。
shape_progressbar_mini.xml
<?xml version=”1.0″ encoding=”utf-8″?> <layer-list xmlns:android=”http://schemas.android.com/apk/res/android” > <!– 背景 –> <item android:id=”@android:id/background”> <shape> <corners android:radius=”5dip” /> <gradient android:angle=”270″ android:centery=”0.75″ android:endcolor=”#ffffff” android:startcolor=”#ffffff” /> </shape> </item> <item android:id=”@android:id/secondaryprogress”> <clip> <shape> <corners android:radius=”0dip” /> <gradient android:angle=”270″ android:centery=”0.75″ android:endcolor=”#df0024″ android:startcolor=”#df0024″ /> </shape> </clip> </item> <item android:id=”@android:id/progress”> <clip> <shape> <corners android:radius=”5dip” /> <gradient android:angle=”270″ android:centery=”0.75″ android:endcolor=”#de42ec” android:startcolor=”#de42ec” /> </shape> </clip> </item> </layer-list>
再来看看shape_progressbar_bg.xml
<?xml version=”1.0″ encoding=”utf-8″?> <shape xmlns:android=”http://schemas.android.com/apk/res/android” android:shape=”rectangle” > <!– 边框填充的颜色 –> <solid android:color=”#cecece” /> <!– 设置进度条的四个角为弧形 –> <!– android:radius 弧形的半径 –> <corners android:radius=”90dp” /> <!– padding:边界的间隔–> <padding android:bottom=”1dp” android:left=”1dp” android:right=”1dp” android:top=”1dp” /> </shape>
就这样把一个漂亮的条形进度条做好了,在shape_progressbar_bg.xml中,边框填充的颜色是一种挺好的方法,加了一个进度条的边框。另外为了进度条四个角都是圆形的,就用了这个属性<corners android:radius=”90dp” /> 。
搞定,这个时候可以开心一下了,去喝杯水先。
二、圆形进度条。另一个比较常用的就是圆形进度条,表示正在进行中。。。
来看2张小图
先看第一张,分析下代码,用自定义的view,用pop来做的哦。loadingdialog.java
public class loadingdialog { private context context; private popupwindow popupdialog; private layoutinflater layoutinflater; private relativelayout layout; private relativelayout layout_bg; private view circleview; private rotateanimation rotateanim; private alphaanimation alphaanim_in; private alphaanimation alphaanim_out; public loadingdialog(context context) { layoutinflater = layoutinflater.from(context); this.context = context; } private void initanim() { rotateanim = new rotateanimation(0, 360, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f); rotateanim.setduration(2000); rotateanim.setrepeatmode(animation.restart); rotateanim.setrepeatcount(-1); rotateanim.setinterpolator(new linearinterpolator()); alphaanim_in = new alphaanimation(0f, 1f); alphaanim_in.setfillafter(true); alphaanim_in.setduration(200); alphaanim_in.setinterpolator(new linearinterpolator()); alphaanim_out = new alphaanimation(1f, 0f); alphaanim_out.setfillafter(true); alphaanim_out.setduration(100); alphaanim_out.setinterpolator(new linearinterpolator()); alphaanim_out.setanimationlistener(new animationlistener() { @override public void onanimationstart(animation arg0) { } @override public void onanimationrepeat(animation arg0) { } @override public void onanimationend(animation arg0) { dismiss(); } }); } /** * 判断是否显示 * @return */ public boolean isshowing() { if (popupdialog != null && popupdialog.isshowing()) { return true; } return false; } /** * 显示 */ public void show() { dismiss(); initanim(); layout = (relativelayout) layoutinflater.inflate(r.layout.view_loadingdialog, null); circleview = (view) layout.findviewbyid(r.id.loading_dialog); layout_bg = (relativelayout) layout.findviewbyid(r.id.bglayout); popupdialog = new popupwindow(layout, layoutparams.fill_parent, layoutparams.fill_parent); view parentview = ((activity) context).getwindow().findviewbyid(window.id_android_content); popupdialog.showatlocation(parentview, gravity.center, 0, 0); layout_bg.startanimation(alphaanim_in); circleview.startanimation(rotateanim); } /** * 隐藏 */ public void dismiss() { if (popupdialog != null && popupdialog.isshowing()) { layout_bg.clearanimation(); circleview.clearanimation(); popupdialog.dismiss(); } } }
这里呢引用了view_loadingdialog.xml,已作整个页面的背景和loading框。
view_loadingdialog.xml
<?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” > <relativelayout android:id=”@+id/bglayout” android:layout_width=”match_parent” android:layout_height=”match_parent” android:background=”#66000000″ > <view android:id=”@+id/loading_dialog” android:layout_width=”48dp” android:layout_height=”48dp” android:layout_centerinparent=”true” android:background=”@drawable/shape_loading_dialog” /> </relativelayout> </relativelayout>
再看看这个shape_loading_dialog.xml,绘制转动的圆形性状,又不用图片挺好的。
<?xml version=”1.0″ encoding=”utf-8″?> <shape xmlns:android=”http://schemas.android.com/apk/res/android” android:shape=”oval” > <stroke android:width=”3dp” android:dashwidth=”2dp” android:dashgap=”3dp” android:color=”#fff”/> <gradient android:startcolor=”#00ffffff” android:endcolor=”#00ffffff” android:angle=”180″/> </shape>
就是这样子,实现了第一个圆形进度条。
可是如果做有颜色的圆形进度条呢,或者彩色的,后来想想不如加个图片来实现好了。
loadingimgdialog.java
public class loadingimgdialog { private context context; private popupwindow popupdialog; private layoutinflater layoutinflater; private relativelayout layout; private relativelayout layout_bg; private int residbg; private view loading_dialog; /** 背景添加旋转动画效果,实现了转动动作 **/ private rotateanimation rotateanim; /** 透明度动画效果 **/ private alphaanimation alphaanim_in; private alphaanimation alphaanim_out; public loadingimgdialog(context context, int residbg) { layoutinflater = layoutinflater.from(context); this.residbg = residbg; this.context = context; } private void initanim() { rotateanim = new rotateanimation(0, 360, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f); rotateanim.setduration(2000); rotateanim.setrepeatmode(animation.restart); rotateanim.setrepeatcount(-1); rotateanim.setinterpolator(new linearinterpolator()); alphaanim_in = new alphaanimation(0f, 1f); alphaanim_in.setfillafter(true); alphaanim_in.setduration(200); alphaanim_in.setinterpolator(new linearinterpolator()); alphaanim_out = new alphaanimation(1f, 0f); alphaanim_out.setfillafter(true); alphaanim_out.setduration(100); alphaanim_out.setinterpolator(new linearinterpolator()); /** 监听动作,动画结束时,隐藏loadingcolordialog **/ alphaanim_out.setanimationlistener(new animationlistener() { @override public void onanimationstart(animation arg0) { } @override public void onanimationrepeat(animation arg0) { } @override public void onanimationend(animation arg0) { dismiss(); } }); } /** * 判断是否显示 * @return */ public boolean isshowing() { if (popupdialog != null && popupdialog.isshowing()) { return true; } return false; } /** * 显示 */ public void show() { dismiss(); initanim(); layout = (relativelayout) layoutinflater.inflate(r.layout.view_loadingcolordialog, null); loading_dialog = (view) layout.findviewbyid(r.id.loading_dialog); loading_dialog.setbackgroundresource(residbg); layout_bg = (relativelayout) layout.findviewbyid(r.id.bglayout); popupdialog = new popupwindow(layout, layoutparams.fill_parent, layoutparams.fill_parent); view parentview = ((activity) context).getwindow().findviewbyid(window.id_android_content); popupdialog.showatlocation(parentview, gravity.center, 0, 0); layout_bg.startanimation(alphaanim_in); loading_dialog.startanimation(rotateanim); } /** * 隐藏 */ public void dismiss() { if (popupdialog != null && popupdialog.isshowing()) { layout_bg.clearanimation(); loading_dialog.clearanimation(); popupdialog.dismiss(); } } }
其实就是修改了一个地方,加入residbg,用图片资源设置圆形进度条那一小部分的背景。
稍稍修改一句代码换一张图片,就变成了另一个圆形进度条了,好玩吧。
loadingcolordialog = new loadingimgdialog(this, r.drawable.img_loading);
loadingcolordialog2 = new loadingimgdialog(this, r.drawable.img_loading2);
给看看全屏效果图吧,就稍稍修改一句代码换一张图片哦。
最后给mainactivity.java看看
public class mainactivity extends activity implements onclicklistener { button bt_loading_dialog; button bt_color_loading_dialog; button bt_color_loading_dialog2; loadingdialog loadingdialog; loadingimgdialog loadingcolordialog; loadingimgdialog loadingcolordialog2; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); initview(); } private void initview() { bt_loading_dialog = (button) findviewbyid(r.id.bt_loading_dialog); bt_loading_dialog.setonclicklistener(this); bt_color_loading_dialog = (button) findviewbyid(r.id.bt_loading_img_dialog); bt_color_loading_dialog.setonclicklistener(this); bt_color_loading_dialog2 = (button) findviewbyid(r.id.bt_loading_img_dialog2); bt_color_loading_dialog2.setonclicklistener(this); loadingdialog = new loadingdialog(this); loadingcolordialog = new loadingimgdialog(this, r.drawable.img_loading); loadingcolordialog2 = new loadingimgdialog(this, r.drawable.img_loading2); } @override public void onclick(view view) { switch (view.getid()) { case r.id.bt_loading_dialog: loadingdialog.show(); break; case r.id.bt_loading_img_dialog: loadingcolordialog.show(); break; case r.id.bt_loading_img_dialog2: loadingcolordialog2.show(); break; default: break; } } @override protected void ondestroy() { super.ondestroy(); loadingcolordialog.dismiss(); } @override public void onbackpressed() { if (loadingdialog.isshowing()) { loadingdialog.dismiss(); } else if (loadingcolordialog.isshowing()){ loadingcolordialog.dismiss(); } else if (loadingcolordialog2.isshowing()){ loadingcolordialog2.dismiss(); } else { finish(); } } }
以上就是对android 进度条资料整理,后续继续补充相关资料,谢谢大家对本站的支持!
上一篇: Android蓝牙通信编程
下一篇: 数据库--多表查询