1. 首页
  2. 编程与技术

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

发布于 2017-09-30 00:28:30 | 151 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

Android移动端操作系统

Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。

本文主要介绍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)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务