
在这里,总结一下loading进度条的使用简单总结一下。
一、说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验。
先来找图看看,做这个图完成不用图片就可以做到了。
看下xml布局文件,其实就是直接用xml写的在加两个属性设置一下就好了,一个style,另一个是background。
<Progressbar androID:ID="@+ID/pb_progressbar" 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"?><@R_353_3419@ 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></@R_353_3419@>
再来看看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,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); 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,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,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_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(); } }}
本文链接:http://www.cnblogs.com/liqw/p/3995794.HTML
下载地址:http://download.csdn.net/detail/lqw770737185/8002967
谁要项目的请留下邮箱吧,还没上传好源文件呢,有什么问题留言哦,大家晚安吧。
总结以上是内存溢出为你收集整理的Android loading进度条使用简单总结全部内容,希望文章能够帮你解决Android loading进度条使用简单总结所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)