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 进度条资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

(0)

相关推荐

  • Android listview与adapter详解及实例代码

    一个ListView通常有两个职责. (1)将数据填充到布局. (2)处理用户的选择点击等操作. 第一点很好理解,ListView就是实现这个功能的.第二点也不难做到,在后面的学习中读者会发现,这非常简单. 一个ListView的创建需要3个元素. (1)ListView中的每一列的View. (2)填入View的数据或者图片等. (3)连接数据与ListView的适配器. 也就是说,要使用ListView,首先要了解什么是适配器.适配器是一个连接数据和AdapterView(ListView就

  • android 进度条组件ProgressBar

    首先是main.xml文件 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="fill_parent" androi

  • Android招聘面试题解答

    一般简单题1. Android dvm的进程和Linux的进程,应用程序的进程是否为同一个概念?DVM指dalivk的虚拟机.每一个Android应用程序都在它自己的进程中运行,都拥有一个独立的Dalvik虚拟机实例.而每一个DVM都是在Linux 中的一个进程,所以说可以认为是同一个概念.2. SIM卡的 EF 文件有何作用?sim卡的文件系统有自己规范,主要是为了和手机通讯,sim本身可以有自己的操作系统,EF就是作存储并和手机通讯用的.3. 嵌入式操作系统内存管理有哪几种,各有何特性?页式

  • Android 面试题汇总

        Android 70道面试题汇总不再愁面试 本文为开发者奉献了70道经典Android面试题加答案--重要知识点几乎都涉及到了,你还等啥,赶紧收藏吧!! 1. 下列哪些语句关于内存回收的说明是正确的? (b) A. 程序员必须创建一个线程来释放内存 B. 内存回收程序负责释放无用内存 C. 内存回收程序允许程序员直接释放内存 D. 内存回收程序可以在指定的时间释放内存对象 2. 下面异常是属于Runtime Exception 的是(abcd)(多选) A.ArithmeticExcep

  • Android工程师面试题大全

    下面对这段时间面试遇到的问题进行整理,分享给大家供大家参考,具体内容如下 Java基础: 1.内存泄露的原因 1).资源对象没关闭. 如Cursor.File等资源.他们会在finalize中关闭,但这样效率太低.容易造成内存泄露. SQLiteCursor,当数据量大的时候容易泄露 2).使用Adapter时,没有使用系统缓存的converview. 3).即时调用recycle()释放不再使用的Bitmap. 适当降低Bitmap的采样率,如: BitmapFactory.Options o

  • android中图片加载到内存的实例代码

    本文演示android中图片加载到内存 首先设计界面: 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="matc

  • Android仿微信图片点击浏览的效果

    本篇我们来做一个类似于微信的图片点击浏览的效果,点击小图图片后会放大至全屏显示,且中间有一个2D平滑过渡的效果. 思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好.所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画. 其次,一般缩略界面的ImageView的是正方形的,并且是CENTER_CROP缩放属性的.CENTER_CROP属性会

  • Android Fragment使用之实例演示

    Fragment是Android honeycomb 3.0新增的概念,在如何使用Android Fragment中做了关于Fragment的详细介绍.本文则主要是通过实例的方式让大家更直观的了解Fragment的使用方法. 首先贴上实例的运行效果截图: 效果图的左边是一个列表,右边是列表item的详情. 先看一下布局文件(layout): XML/HTML代码 <?xml version="1.0″ encoding="utf-8″?> <LinearLayout

  • Android 五大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(TableLayout):按照行列方式布局组件. 相对布局(RelativeLayout):相对其它组件的布局方式.  绝对布局(AbsoluteLayout):按照绝对坐标来布局组件.  1. 线性布局 线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过"androi

  • Android 进度条使用详解及示例代码

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

  • Android Fragment动态创建详解及示例代码

    Android Fragment 动态创建 Fragment是activity的界面中的一部分或一种行为.可以把多个Fragment组合到一个activity中来创建一个多界面并且可以在多个activity中重用一个Fragment.可以把Fragment任务模块化的一段activity,它具有自己的生命周期,接收它自己的事件,并可以在activity运行时被添加或删除. Fragment不能独立存在,它必须嵌入到activity中,而且Fragment的生命周期直接受所在的activity的影

  • Android Activity与Intent详解及示例代码

    Android有三个基础组件Activity,Service和BroadcastReceiver,他们都是依赖Intent来启动.本文介绍的是Activity的生命周期以及针对Activity的Intent使用. 之前的例子一直都是使用Activity,在一个Layout XML与一个Activity捆绑的情况下可以视为一个Form,多个Layout XML与一个Activity捆绑的话那就是个Application本身了.Intent可以分为显式Intent和隐式Intent:显式Intent

  • Android 的触摸事件详解及示例代码

    由于触摸(Touch)而触发的事件 Android的事件:onClick, onScroll,onFling等等,都是由许多个Touch组成的.其中Touch的第一个状态肯定是ACTION_DOWN,表示按下了屏幕.之后,touch将会有后续事件,可能是: ACTION_MOVE //表示为移动手势 ACTION_UP //表示为离开屏幕 ACTION_CANCEL //表示取消手势,不会由用户产生,而是由程序产生的 一个Action_DOWN, n个ACTION_MOVE, 1个ACTION_

  • Android 对话框(Dialog)大全详解及示例代码

    Activities提供了一种方便管理的创建.保存.回复的对话框机制,例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog(int), dismissDialog(int)等方法,如果使用这些方法的话,Activity将通过getOwnerActivity()方法返回该Activity管理的对话框(dialog). onCreateDialog(int):当你使用这个回调函数时,Android系统会有效的设置这个Acti

  • Android Webview添加网页加载进度条实例详解

    推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

  • Android WebView线性进度条实例详解

    推荐阅读:Android Webview添加网页加载进度条实例详解 先给大家展示下效果图:这个效果图大家一看就懂,在生活经常见到 1.wevbview_progressbar.xml <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 背景 --> <item android:id="@android:id/background"&g

  • Android自定义进度条的圆角横向进度条实例详解

    1.本文将向你介绍自定义进度条的写法,比较简单,但还是有些知识点是需要注意的: invalidate()方法 RectF方法的应用 onMeasure方法的应用 2.原理 画3层圆角矩形,底层为黑色,第二层为灰色,最上一层为进度条颜色,示例图如下: 3.效果图   实现圆角进度条还有很多其他方法,比如在Progress控件里填充圆角图片,通过拉伸图片来达到预想的效果,虽然听起来很简单,但实现起来还是有些麻烦的. 4.解说方法 (1)invalidate()方法 invalidate()是用来刷新

  • Android banner的使用详解与示例

    目录 效果图: 添加依赖 添加权限到你的 AndroidManifest.xml 布局文件 逻辑代码 常见的一些属性设置 方法 Attributes属性 Android----banner使用详解 昨天10.31 ,斗破苍穹的三年之约终于出来了,自己也等了很久很久,敬师长,敬家人,敬朋友,敬每一个前行路上正在奋战的自己,星光不问赶路人,时间不负有心人. 效果图: 添加依赖 implementation 'com.youth.banner:banner:2.1.0' 添加权限到你的 Android

  • AngularJs bootstrap详解及示例代码

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu

随机推荐