热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

Android实现图片加载进度提示

这篇文章主要为大家详细介绍了Android实现图片加载进度提示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android实现图片加载进度提示的具体代码,供大家参考,具体内容如下

先上图:

实现原理:

第一个控件的实现原理是重写ImageView的onDraw()方法,利用Canvas的clipRect()方法控制图片的显示区域,主键扩大图片的显示区域,从而实现逐渐增加的效果

关键代码:

public class LoadingImageView extends ImageView {
 /*** 背景图片 */
 private Drawable bgDrawable;
 /**前景图片*/
 private Drawable fgDrawable;
 /**是否显示加载进度条*/
 private boolean isShowProgress;
 
 private Resources rsc;
 private int progress;
 private int progressHeight;
 private int progressLeft;
 private int progressTop;
 private int progressRight;
 private int progressBottom;
 
 
 public LoadingImageView(Context context) {
 this(context,null);
 }
 
 public LoadingImageView(Context context, AttributeSet attrs) {
 this(context, attrs,0);
 }
 
 public LoadingImageView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 rsc = getResources();
 }
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 if(bgDrawable==null){
  return;
 }
 progressLeft = getMeasuredWidth()/2-(fgDrawable.getIntrinsicWidth()/2);
 progressTop = getMeasuredHeight()/2-(fgDrawable.getIntrinsicHeight()/2);
 progressRight = getMeasuredWidth()/2+(fgDrawable.getIntrinsicWidth()/2);
 progressBottom = getMeasuredHeight()/2+(fgDrawable.getIntrinsicHeight()/2);
 }
 
 
 @Override
 public boolean onTouchEvent(MotionEvent event) {
 return super.onTouchEvent(event);
 }
 
 /**
 * 设置背景图片
 * @param drawableRes
 */
 public void setBgDrawableRes(int drawableRes){
 bgDrawable = rsc.getDrawable(drawableRes);
 invalidate();
 }
 
 public void setFgDrawableRes(int drawableRes){
 fgDrawable = rsc.getDrawable(drawableRes);
 invalidate();
 }

 
 public void setProgress(int progress,boolean flag) {
 isShowProgress = flag;
 if(progress>=0&progress<=100){
  this.progress = progress;
  invalidate();
 }
 }
 
 
 @Override
 protected void onDraw(Canvas canvas) {
 if(bgDrawable!=null){
  bgDrawable.setBounds(progressLeft, progressTop, progressRight, progressBottom);
  bgDrawable.draw(canvas);
 }
 super.onDraw(canvas);
 if(bgDrawable!=null&&isShowProgress){
  bgDrawable.setBounds(progressLeft, progressTop, progressRight, progressBottom);
  bgDrawable.draw(canvas);
 }
 if(fgDrawable!=null&&isShowProgress){
  //根据进度计算图片显示的高的比
  progressHeight = fgDrawable.getIntrinsicHeight()*progress/100;
  //关键代码,设置图片的显示区域
  canvas.clipRect(progressLeft,progressBottom-progressHeight,progressRight,progressBottom);
  fgDrawable.setBounds(progressLeft, progressTop, progressRight, progressBottom);
  fgDrawable.draw(canvas);
 }
 }
 
 
}

第二个圆形加载进度的原理其实也很简单,就是画弧线,不断增加弧线的角度,实现改变进度的功能

关键代码:

public class LoadingCircleView extends View {
 
 private final Paint paint; 
  private final Context context; 
  private Resources res;
  private int progress;
  private int ringWidth;
  //圆环的颜色
  private int ringColor;
 //进度条颜色
  private int progressColor;
  //字体颜色
  private int textColor;
  //字的大小
  private int textSize;
  
  private String textProgress;
  
 public LoadingCircleView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 this.cOntext= context; 
 this.paint = new Paint(); 
 this.res = context.getResources();
    this.paint.setAntiAlias(true); //消除锯齿 
    this.ringWidth = dip2px(context, 10); //设置圆环宽度 
    this.ringColor = Color.rgb(233, 233, 233);
    this.progressColor = Color.rgb(146, 206, 108);
    this.textColor = Color.rgb(203, 203, 203);
    this.textSize = 30;
 }
 
 public LoadingCircleView(Context context, AttributeSet attrs) {
 this(context, attrs,0);
 }
 
 public LoadingCircleView(Context context) {
 this(context,null);
 }
 /**
 * 设置加载进度,取值范围在0~100之间
 * @param progress
 */
 public void setProgress(int progress) {
 if(progress>=0&&progress<=100){
 this.progress = progress;
 invalidate();
 }
 }
 /**
 * 设置圆环背景色
 * @param ringColor
 */
 public void setRingColor(int ringColor) {
 this.ringColor = res.getColor(ringColor);
 }
 /**
 * 设置进度条颜色
 * @param progressColor
 */
 public void setProgressColor(int progressColor) {
 this.progressColor = res.getColor(progressColor);
 }
 /**
 * 设置字体颜色
 * @param textColor
 */
 public void setTextColor(int textColor) {
 this.textColor = res.getColor(textColor);
 }
 /**
 * 设置字体大小
 * @param textSize
 */
 public void setTextSize(int textSize) {
 this.textSize = textSize;
 }
 /**
 * 设置圆环半径
 * @param ringWidth
 */
 public void setRingWidthDip(int ringWidth) {
 this.ringWidth = dip2px(context, ringWidth);
 }
 /**
 * 通过不断画弧的方式更新界面,实现进度增加
 */
 @Override
 protected void onDraw(Canvas canvas) {
 int center = getWidth()/2; 
    int radios = center-ringWidth/2;
     
     
    //绘制圆环 
    this.paint.setStyle(Paint.Style.STROKE); //绘制空心圆  
    this.paint.setColor(ringColor);
    this.paint.setStrokeWidth(ringWidth); 
    canvas.drawCircle(center,center, radios, this.paint); 
    RectF oval = new RectF(center-radios, center-radios, center+radios, center+radios);
    this.paint.setColor(progressColor);
    canvas.drawArc(oval, 90, 360*progress/100, false, paint);
    this.paint.setStyle(Paint.Style.FILL);
    this.paint.setColor(textColor);
    this.paint.setStrokeWidth(0);
    this.paint.setTextSize(textSize);
    this.paint.setTypeface(Typeface.DEFAULT_BOLD);
    textProgress = progress+"%";
    float textWidth = paint.measureText(textProgress);
    canvas.drawText(textProgress, center-textWidth/2, center+textSize/2, paint);
     
     
    super.onDraw(canvas); 
 }
 
  /** 
   * 根据手机的分辨率从 dp 的单位 转成为 px(像素) 
   */ 
  public static int dip2px(Context context, float dpValue) { 
    final float scale = context.getResources().getDisplayMetrics().density; 
    return (int) (dpValue * scale + 0.5f); 
  } }

控件定义好后就可以再Xml里面调用了:


   
   
   
   

 

最后就可以使用了,在主线程里面模拟加载进度,起一个线程,模仿加载进度逐渐增加:

public class MainActivity extends Activity {
 
 ListView listview;
 private LoadingImageView loadingImageView;
 private LoadingCircleView loadingCircleView;
 
 private Handler handler = new Handler(){
 public void handleMessage(android.os.Message msg) {
  loadingImageView.setProgress(msg.what,true);
  loadingCircleView.setProgress(msg.what);
 };
 };
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 loadingImageView = (LoadingImageView) findViewById(R.id.loading_image_view);
 loadingImageView.setFgDrawableRes(R.drawable.bg_click_load_img);
 loadingImageView.setBgDrawableRes(R.drawable.ic_launcher);
 loadingImageView.setOnClickListener(new OnClickListener() {
  
  @Override
  public void onClick(View v) {
  loading(); 
  }
 });
 loadingCircleView = (LoadingCircleView) findViewById(R.id.loading_cirle_view);
 loadingCircleView.setOnClickListener(new OnClickListener() {
  
  @Override
  public void onClick(View v) {
  loading();
  }
 });
// listview = (ListView) findViewById(R.id.listview);
// showImage();
 }
 
 private void loading(){
 Thread t = new Thread(){
  @Override
  public void run() {
  int i = 0;
  while(i<=100){
   try {
    i++;
    handler.sendEmptyMessage(i);
    this.sleep(10);
   } catch (InterruptedException e) {
    e.printStackTrace();
   }
  }
  super.run();
  }
 };
 t.start();
 }
 
 
 @Override
 protected void onResume() {
 super.onResume();
 }
 
 @Override
 protected void onPause() {
 super.onPause();
 }
 
 
 @Override
 protected void onDestroy() {
 super.onDestroy();
 }
 
 
}

好了,大工告成,可以运行了

资源地址:Android图片加载进度提示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文将详细介绍如何使用剪映应用中的镜像功能,帮助用户轻松实现视频的镜像效果。通过简单的步骤,您可以快速掌握这一实用技巧。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文介绍如何通过SQL查询从JDE(JD Edwards)系统中提取所有字典数据,涵盖关键表的关联和字段选择。具体包括F0004和F0005系列表的数据提取方法。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 本文详细介绍了如何通过命令行启动MySQL服务,包括打开命令提示符窗口、进入MySQL的bin目录、输入正确的连接命令以及注意事项。文中还提供了更多相关命令的资源链接。 ... [详细]
  • 本文介绍如何使用 NSTimer 实现倒计时功能,详细讲解了初始化方法、参数配置以及具体实现步骤。通过示例代码展示如何创建和管理定时器,确保在指定时间间隔内执行特定任务。 ... [详细]
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
  • 网络运维工程师负责确保企业IT基础设施的稳定运行,保障业务连续性和数据安全。他们需要具备多种技能,包括搭建和维护网络环境、监控系统性能、处理突发事件等。本文将探讨网络运维工程师的职业前景及其平均薪酬水平。 ... [详细]
  • 高效解决应用崩溃问题!友盟新版错误分析工具全面升级
    友盟推出的最新版错误分析工具,专为移动开发者设计,提供强大的Crash收集与分析功能。该工具能够实时监控App运行状态,快速发现并修复错误,显著提升应用的稳定性和用户体验。 ... [详细]
  • 并发编程:深入理解设计原理与优化
    本文探讨了并发编程中的关键设计原则,特别是Java内存模型(JMM)的happens-before规则及其对多线程编程的影响。文章详细介绍了DCL双重检查锁定模式的问题及解决方案,并总结了不同处理器和内存模型之间的关系,旨在为程序员提供更深入的理解和最佳实践。 ... [详细]
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
author-avatar
x-诗儿_683
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有