在这里，总结一下loading进度条的使用简单总结一下。

一、说起进度条，必须说说条形进度条，经常都会使用到嘛，特别是下载文件进度等等，还有像腾讯QQ安装进度条一样，有个进度总给人良好的用户体验。

先来找图看看，做这个图完成不用图片就可以做到了。

看下xml布局文件，其实就是直接用xml写的在加两个属性设置一下就好了，一个style,另一个是background。

  1.     <ProgressBar
  2.         android:id="@+id/pb_progressbar"
  3.         style="@style/StyleProgressBarMini"
  4.         android:layout_width="fill_parent"
  5.         android:layout_height="wrap_content"
  6.         android:layout_margin="30dp"
  7.         android:background="@drawable/shape_progressbar_bg"
  8.         android:max="100"
  9.         android:progress="50" />

先看style吧

  1.     <style name="StyleProgressBarMini" parent="@android:style/Widget.ProgressBar.Horizontal">
  2.        <item name="android:maxHeight">50dip</item>
  3.        <item name="android:minHeight">10dip</item>
  4.        <item name="android:indeterminateOnly">false</item>
  5.        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
  6.        <item name="android:progressDrawable">@drawable/shape_progressbar_mini</item>
  7.    </style>

这里的progressDrawable又是引用一个自定义drawable，不是图片哦。

shape_progressbar_mini.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  3. 	<!-- 背景 -->
  4.     <item android:id="@android:id/background">
  5.         <shape>
  6.             <corners android:radius="5dip" />
  7.             <gradient
  8.                 android:angle="270"
  9.                 android:centerY="0.75"
  10.                 android:endColor="#FFFFFF"
  11.                 android:startColor="#FFFFFF" />
  12.         </shape>
  13.     </item>
  14.     <item android:id="@android:id/secondaryProgress">
  15.         <clip>
  16.             <shape>
  17.                 <corners android:radius="0dip" />
  18.  
  19.                 <gradient
  20.                     android:angle="270"
  21.                     android:centerY="0.75"
  22.                     android:endColor="#df0024"
  23.                     android:startColor="#df0024" />
  24.             </shape>
  25.         </clip>
  26.     </item>
  27.     <item android:id="@android:id/progress">
  28.         <clip>
  29.             <shape>
  30.                 <corners android:radius="5dip" />
  31.                 <gradient
  32.                     android:angle="270"
  33.                     android:centerY="0.75"
  34.                     android:endColor="#de42ec"
  35.                     android:startColor="#de42ec" />
  36.             </shape>
  37.         </clip>
  38.     </item>
  39. </layer-list>

再来看看shape_progressbar_bg.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:shape="rectangle" >
  4.  
  5.     <!-- 边框填充的颜色 -->
  6.     <solid android:color="#cecece" />
  7.  
  8.     <!-- 设置进度条的四个角为弧形 -->
  9.     <!-- android:radius 弧形的半径 -->
  10.     <corners android:radius="90dp" />
  11.     <!--
  12.     padding：边界的间隔-->
  13.     <padding
  14.         android:bottom="1dp"
  15.         android:left="1dp"
  16.         android:right="1dp"
  17.         android:top="1dp" />
  18. </shape>

就这样把一个漂亮的条形进度条做好了，在shape_progressbar_bg.xml中，边框填充的颜色是一种挺好的方法，加了一个进度条的边框。另外为了进度条四个角都是圆形的，就用了这个属性<corners android:radius="90dp" /> 。

搞定，这个时候可以开心一下了，去喝杯水先。

二、圆形进度条。另一个比较常用的就是圆形进度条，表示正在进行中。。。

来看2张小图

 

先看第一张，分析下代码，用自定义的view,用pop来做的哦。LoadingDialog.java

  1. public class LoadingDialog {
  2. 	private Context context;
  3. 	private PopupWindow popupDialog;
  4. 	private LayoutInflater layoutInflater;
  5. 	private RelativeLayout layout;
  6. 	private RelativeLayout layout_bg;
  7. 	private View circleView;
  8. 	private RotateAnimation rotateAnim;
  9. 	private AlphaAnimation alphaAnim_in;
  10. 	private AlphaAnimation alphaAnim_out;
  11. 	public LoadingDialog(Context context) {
  12. 		layoutInflater = LayoutInflater.from(context);
  13. 		this.context = context;
  14. 	}
  15. 	private void initAnim() {
  16. 		rotateAnim = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  17. 		rotateAnim.setDuration(2000);
  18. 		rotateAnim.setRepeatMode(Animation.RESTART);
  19. 		rotateAnim.setRepeatCount(-1);
  20. 		rotateAnim.setInterpolator(new LinearInterpolator());
  21. 		alphaAnim_in = new AlphaAnimation(0f, 1f);
  22. 		alphaAnim_in.setFillAfter(true);
  23. 		alphaAnim_in.setDuration(200);
  24. 		alphaAnim_in.setInterpolator(new LinearInterpolator());
  25. 		alphaAnim_out = new AlphaAnimation(1f, 0f);
  26. 		alphaAnim_out.setFillAfter(true);
  27. 		alphaAnim_out.setDuration(100);
  28. 		alphaAnim_out.setInterpolator(new LinearInterpolator());
  29. 		alphaAnim_out.setAnimationListener(new AnimationListener() {
  30. 			@Override
  31. 			public void onAnimationStart(Animation arg0) {
  32. 			}
  33. 			@Override
  34. 			public void onAnimationRepeat(Animation arg0) {
  35. 			}
  36. 			@Override
  37. 			public void onAnimationEnd(Animation arg0) {
  38. 				dismiss();
  39. 			}
  40. 		});
  41. 	}
  42.  
  43. 	/**
  44. 	 * 判断是否显示
  45. 	 * @return
  46. 	 */
  47. 	public boolean isShowing() {
  48. 		if (popupDialog != null && popupDialog.isShowing()) {
  49. 			return true;
  50. 		}
  51. 		return false;
  52. 	}
  53.  
  54. 	/**
  55. 	 * 显示
  56. 	 */
  57. 	public void show() {
  58. 		dismiss();
  59. 		initAnim();
  60. 		layout = (RelativeLayout) layoutInflater.inflate(R.layout.view_loadingdialog, null);
  61. 		circleView = (View) layout.findViewById(R.id.loading_dialog);
  62. 		layout_bg = (RelativeLayout) layout.findViewById(R.id.bgLayout);
  63. 		popupDialog = new PopupWindow(layout, LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
  64. 		View parentView = ((Activity) context).getWindow().findViewById(Window.ID_ANDROID_CONTENT);
  65. 		popupDialog.showAtLocation(parentView, Gravity.CENTER, 0, 0);
  66.  
  67. 		layout_bg.startAnimation(alphaAnim_in);
  68. 		circleView.startAnimation(rotateAnim);
  69. 	}
  70.  
  71. 	/**
  72. 	 * 隐藏
  73. 	 */
  74. 	public void dismiss() {
  75. 		if (popupDialog != null && popupDialog.isShowing()) {
  76. 			layout_bg.clearAnimation();
  77. 			circleView.clearAnimation();
  78. 			popupDialog.dismiss();
  79. 		}
  80. 	}
  81. }

这里呢引用了view_loadingdialog.xml，已作整个页面的背景和loading框。

view_loadingdialog.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent" >
  5. <RelativeLayout
  6.     android:id="@+id/bgLayout"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent"
  9.     android:background="#66000000" >
  10.     <View
  11.         android:id="@+id/loading_dialog"
  12.         android:layout_width="48dp"
  13.         android:layout_height="48dp"
  14.         android:layout_centerInParent="true"
  15.         android:background="@drawable/shape_loading_dialog" />
  16. </RelativeLayout>
  17. </RelativeLayout>

再看看这个shape_loading_dialog.xml，绘制转动的圆形性状，又不用图片挺好的。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:shape="oval" >
  4.     <stroke
  5.         android:width="3dp"
  6.         android:dashWidth="2dp"
  7.         android:dashGap="3dp"
  8.         android:color="#fff"/>
  9.     <gradient
  10.         android:startColor="#00ffffff"
  11.         android:endColor="#00ffffff"
  12.         android:angle="180"/>
  13. </shape>

就是这样子，实现了第一个圆形进度条。

可是如果做有颜色的圆形进度条呢，或者彩色的，后来想想不如加个图片来实现好了。

LoadingImgDialog.java

  1. public class LoadingImgDialog {
  2. 	private Context context;
  3. 	private PopupWindow popupDialog;
  4. 	private LayoutInflater layoutInflater;
  5. 	private RelativeLayout layout;
  6. 	private RelativeLayout layout_bg;
  7. 	private int residBg;
  8. 	private View loading_dialog;
  9. 	/** 背景添加旋转动画效果，实现了转动动作   **/
  10. 	private RotateAnimation rotateAnim;
  11. 	/** 透明度动画效果  **/
  12. 	private AlphaAnimation alphaAnim_in;
  13. 	private AlphaAnimation alphaAnim_out;
  14.  
  15. 	public LoadingImgDialog(Context context, int residBg) {
  16. 		layoutInflater = LayoutInflater.from(context);
  17. 		this.residBg = residBg;
  18. 		this.context = context;
  19. 	}
  20. 	private void initAnim() {
  21. 		rotateAnim = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  22. 		rotateAnim.setDuration(2000);
  23. 		rotateAnim.setRepeatMode(Animation.RESTART);
  24. 		rotateAnim.setRepeatCount(-1);
  25. 		rotateAnim.setInterpolator(new LinearInterpolator());
  26. 		alphaAnim_in = new AlphaAnimation(0f, 1f);
  27. 		alphaAnim_in.setFillAfter(true);
  28. 		alphaAnim_in.setDuration(200);
  29. 		alphaAnim_in.setInterpolator(new LinearInterpolator());
  30. 		alphaAnim_out = new AlphaAnimation(1f, 0f);
  31. 		alphaAnim_out.setFillAfter(true);
  32. 		alphaAnim_out.setDuration(100);
  33. 		alphaAnim_out.setInterpolator(new LinearInterpolator());
  34.  
  35. 		/** 监听动作，动画结束时，隐藏LoadingColorDialog **/
  36. 		alphaAnim_out.setAnimationListener(new AnimationListener() {
  37. 			@Override
  38. 			public void onAnimationStart(Animation arg0) {
  39. 			}
  40. 			@Override
  41. 			public void onAnimationRepeat(Animation arg0) {
  42. 			}
  43. 			@Override
  44. 			public void onAnimationEnd(Animation arg0) {
  45. 				dismiss();
  46. 			}
  47. 		});
  48. 	}
  49.  
  50. 	/**
  51. 	 * 判断是否显示
  52. 	 * @return
  53. 	 */
  54. 	public boolean isShowing() {
  55. 		if (popupDialog != null && popupDialog.isShowing()) {
  56. 			return true;
  57. 		}
  58. 		return false;
  59. 	}
  60.  
  61. 	/**
  62. 	 * 显示
  63. 	 */
  64. 	public void show() {
  65. 		dismiss();
  66.  
  67. 		initAnim();
  68.  
  69. 		layout = (RelativeLayout) layoutInflater.inflate(R.layout.view_loadingcolordialog, null);
  70. 		loading_dialog = (View) layout.findViewById(R.id.loading_dialog);
  71. 		loading_dialog.setBackgroundResource(residBg);
  72.  
  73. 		layout_bg = (RelativeLayout) layout.findViewById(R.id.bgLayout);
  74. 		popupDialog = new PopupWindow(layout, LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
  75. 		View parentView = ((Activity) context).getWindow().findViewById(Window.ID_ANDROID_CONTENT);
  76. 		popupDialog.showAtLocation(parentView, Gravity.CENTER, 0, 0);
  77.  
  78. 		layout_bg.startAnimation(alphaAnim_in);
  79. 		loading_dialog.startAnimation(rotateAnim);
  80. 	}
  81.  
  82. 	/**
  83. 	 * 隐藏
  84. 	 */
  85. 	public void dismiss() {
  86. 		if (popupDialog != null && popupDialog.isShowing()) {
  87. 			layout_bg.clearAnimation();
  88. 			loading_dialog.clearAnimation();
  89. 			popupDialog.dismiss();
  90. 		}
  91. 	}
  92. }

其实就是修改了一个地方，加入residBg，用图片资源设置圆形进度条那一小部分的背景。

稍稍修改一句代码换一张图片，就变成了另一个圆形进度条了，好玩吧。

  1. 		loadingColorDialog = new LoadingImgDialog(this, R.drawable.img_loading);
  2. 		loadingColorDialog2 = new LoadingImgDialog(this, R.drawable.img_loading2);

给看看全屏效果图吧，就稍稍修改一句代码换一张图片哦。

最后给MainActivity.java看看

  1. public class MainActivity extends Activity implements OnClickListener {
  2. 	Button bt_loading_dialog;
  3. 	Button bt_color_loading_dialog;
  4. 	Button bt_color_loading_dialog2;
  5.  
  6. 	LoadingDialog loadingDialog;
  7. 	LoadingImgDialog loadingColorDialog;
  8. 	LoadingImgDialog loadingColorDialog2;
  9. 	@Override
  10. 	protected void onCreate(Bundle savedInstanceState) {
  11. 		super.onCreate(savedInstanceState);
  12. 		setContentView(R.layout.activity_main);
  13.  
  14. 		initView();
  15. 	}
  16.  
  17. 	private void initView() {
  18. 		bt_loading_dialog = (Button) findViewById(R.id.bt_loading_dialog);
  19. 		bt_loading_dialog.setOnClickListener(this);
  20. 		bt_color_loading_dialog = (Button) findViewById(R.id.bt_loading_img_dialog);
  21. 		bt_color_loading_dialog.setOnClickListener(this);
  22.  
  23. 		bt_color_loading_dialog2 = (Button) findViewById(R.id.bt_loading_img_dialog2);
  24. 		bt_color_loading_dialog2.setOnClickListener(this);
  25.  
  26. 		loadingDialog = new LoadingDialog(this);
  27. 		loadingColorDialog = new LoadingImgDialog(this, R.drawable.img_loading);
  28. 		loadingColorDialog2 = new LoadingImgDialog(this, R.drawable.img_loading2);
  29. 	}
  30.  
  31. 	@Override
  32. 	public void onClick(View view) {
  33. 		switch (view.getId()) {
  34. 		case R.id.bt_loading_dialog:
  35. 			loadingDialog.show();
  36. 			break;
  37. 		case R.id.bt_loading_img_dialog:
  38. 			loadingColorDialog.show();
  39. 			break;
  40. 		case R.id.bt_loading_img_dialog2:
  41. 			loadingColorDialog2.show();
  42. 			break;
  43. 		default:
  44. 			break;
  45. 		}
  46. 	}
  47.  
  48. 	@Override
  49. 	protected void onDestroy() {
  50. 		super.onDestroy();
  51. 		loadingColorDialog.dismiss();
  52. 	}
  53.  
  54. 	@Override
  55. 	public void onBackPressed() {
  56. 		if (loadingDialog.isShowing()) {
  57. 			loadingDialog.dismiss();
  58. 		} else if (loadingColorDialog.isShowing()){
  59. 			loadingColorDialog.dismiss();
  60. 		} else if (loadingColorDialog2.isShowing()){
  61. 			loadingColorDialog2.dismiss();
  62. 		} else {
  63. 			finish();
  64. 		}
  65. 	}
  66.  
  67. }

本文链接：http://www.cnblogs.com/liqw/p/3995794.html

下载地址：http://download.csdn.net/detail/lqw770737185/8002967

谁要项目的请留下邮箱吧，还没上传好源文件呢，有什么问题留言哦，大家晚安吧。

Android loading进度条使用简单总结的更多相关文章

  1. Android多种进度条使用详解

    在这里,总结一下loading进度条的使用简单总结一下. 一.说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验. 先 ...

  2. android 自定义进度条颜色

    android 自定义进度条颜色 先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对Android自定义进度条的学习过程!   这个没法了只能看源码了,还好下载了源码, sources\b ...

  3. Android 设置进度条背景

    Android 设置进度条背景 直接上代码 <ProgressBar android:id="@+id/progressBar" android:layout_width=& ...

  4. JavaScript之Loading进度条

    一个loading进度条,定义一个fakeProgress方法,定位一个URL,然后setTimeout设置跳转时间我们就能看到我们要打开的URL网址了. 这个链接我就直接链接到我的新浪博客去了,算是 ...

  5. Android之进度条2

    我之前有写过一篇“Android之进度条1”,那个是条形的进度条(显示数字进度),这次实现圆形进度条. 点击查看Android之进度条1:http://www.cnblogs.com/caidupin ...

  6. android的进度条使用

    android的进度条 1.实现的效果 2.布局代码 先写一个my_browser.xml文件 存放WebView <?xml version="1.0" encoding= ...

  7. ASP.NET 给Web中的网页添加Loading进度条形式

    前段时间客户提了一个需求,要求给网站中某些功能添加进度条形式,因为某些功能查询的数据量太大,经常会出现点击Search按钮,但是没有任何反应的情况,会让用户以为网站挂掉了,导致投诉的事情发生,所以客户 ...

  8. android多线程进度条

    多线程实现更新android进度条. 实例教程,详细信息我已经注释   android多线程进度条   01package com.shougao.hello; 02 03import android ...

  9. 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件

    模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...

随机推荐

  1. Window 常用命令

    Window 常用命令   Ctrl +alt +delete 切换用户 Ctrl +shift+esc 启动任务管理

  2. java笔记--使用事件分配线程更新Swing控件

    使用事件分配线程更新Swing控件: Swing并不是线程安全的,如果在多个线程中更新Swing控件,则很可能造成程序崩溃. 为了避免这种问题,可以使用时间分配线程来更新Swing控件. EventQ ...

  3. [codeforces 241]A. Old Peykan

    [codeforces 241]A. Old Peykan 试题描述 There are n cities in the country where the Old Peykan lives. The ...

  4. Correlation Filter in Visual Tracking

    涉及两篇论文:Visual Object Tracking using Adaptive Correlation Filters 和Fast Visual Tracking via Dense Spa ...

  5. MYSQL随机抽取查询 MySQL Order By Rand()效率问题

    MYSQL随机抽取查询:MySQL Order By Rand()效率问题一直是开发人员的常见问题,俺们不是DBA,没有那么牛B,所只能慢慢研究咯,最近由于项目问题,需要大概研究了一下MYSQL的随机 ...

  6. 新浪网易淘宝等IP地区信息查询开放API接口调用方法

    通过IP地址获取对应的地区信息通常有两种方法:1)自己写程序,解析IP对应的地区信息,需要数据库.2)根据第三方提供的API查询获取地区信息. 第一种方法,参见文本<通过纯真IP数据库获取IP地 ...

  7. js 函数定义三种方式

    <p>Js 函数定义的三种方式:</p> <br> <p>方式一:function</p> <script type="te ...

  8. Android简易数据存储之SharedPreferences

    Andorid提供了多种数据存储的方式,例如前面说到的“Android数据存储之SQLite的操作”是用于较复杂的数据存储.然而,如果有些简单的数据存储如果采用SQLite的方式的话会显得比较笨重.例 ...

  9. Android 和iOS中 View的滚动

    在最近的程序中用到了Android中的View的滚动,记录一下,待总结.

  10. Deeplink做不出效果，那是你不会玩！

    最近魔Sir听一些有些同学说之前用过Deeplink,但效果并没有想象中的那么好,在了解了小伙伴的使用场景后,魔Sir觉得有必要出这么篇东西告诉大家,Deeplink效果差,那是因为你不会玩! 对于已 ...