Android loading进度条使用简单总结

在这里，总结一下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();
		}
	}

}

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

下载地址：

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

时间： 2024-10-19 19:13:29

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

Android中进度条类型的控件定义和妙用技巧

Android中进度条控件有3个(不算ProgressDialog),分别是ProgressBar,SeekBar和RatingBar,对于自定义样式来说又得按照需求分为2中情况,第一种是刻度型,第二种是循环类型. 第一种是"刻度型",也就是他有起点和终点,起点值小于终点值 这种样式的修改,要修改三个属性即可 分别是:背景(主要是进度的轨道样式),第一级别滚动条progressDrawable,第二级别progressDrawable 遗憾的是Android提供的api很难设置,不过可

Android多种进度条使用详解

在这里,总结一下loading进度条的使用简单总结一下. 一.说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验. 先来找图看看,做这个图完成不用图片就可以做到了. 看下xml布局文件,其实就是直接用xml写的在加两个属性设置一下就好了,一个style,另一个是background. <ProgressBarandroid:id=”@+id/pb_progressbar”style=”@style/StylePro

[Android]组件-进度条1

多式样ProgressBar 普通圆形ProgressBar 该类型进度条也就是一个表示运转的过程,例如发送短信,连接网络等等,表示一个过程正在执行中. 一般只要在XML布局中定义就可以了. <progressBar android:id="@+id/widget43" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layou

android 自定义进度条颜色

先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对Android自定义进度条的学习过程!   这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\  下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到 [html] view plaincopyprint? <span style="font-size: 18px;">    <style name

Android自定义进度条样式

最近在做一个widget,上面需要一个progressbar,产品经理和设计师给出来的东西是要实现一个圆角的progress和自定义的颜色,研究一小下,分享出来给大家哦. 测试于:Android4.0+ 操作步骤: 1.创建你的layout文件引用progressbar如下,标红处引用你自定的样式: <ProgressBar android:id="@+id/progressDownload" style="?android:attr/progressBarStyleH

Android自定义进度条-带文本(文字进度)的水平进度条(ProgressBar)

/** * 带文本提示的进度条 */ public class TextProgressBar extends ProgressBar { private String text; private Paint mPaint; public TextProgressBar(Context context) { super(context); initText(); } public TextProgressBar(Context context, AttributeSet attrs, int d

Android之进度条2

我之前有写过一篇“Android之进度条1”,那个是条形的进度条(显示数字进度),这次实现圆形进度条. 点击查看Android之进度条1:http://www.cnblogs.com/caidupingblogs/p/5102745.html> MainActivity继承Activity实现Runnable接口: package com.cdp.progressbar; import android.app.Activity; import android.os.Bundle; import

android的进度条使用

android的进度条 1.实现的效果 2.布局代码 先写一个my_browser.xml文件 存放WebView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" a

模态框的理解 ,jQ: loading,进度条, 省级联动 ,富文本编辑器 表单验证 插件

模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: 开始     $('#box').ajaxStart() 多个ajax共享一个Start 发送 .ajaxSend() 成功 .ajaxSuccess() 完成 . ajaxComplete() 完成后有错误 .ajaxError() 停止 .ajaxStop()多个ajax共享一个Stop Nprogress:进度条引入 c