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里面调用了:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
   >
   <com.example.imagetest.LoadingImageView
     android:id="@+id/loading_image_view"
     android:layout_width="258px"
     android:layout_height="257px"
     android:background="#330000"
     >
   </com.example.imagetest.LoadingImageView>
   <com.example.imagetest.LoadingCircleView
     android:id="@+id/loading_cirle_view"
     android:layout_width="100dp"
     android:layout_height="100dp"
     >
   </com.example.imagetest.LoadingCircleView>
<!--
  <ListView
    android:id="@+id/listview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    ></ListView> -->

</LinearLayout>

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

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图片加载进度提示

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

时间: 2020-06-17

Android实现圆形渐变加载进度条

最近设计要求要一个圆形进度条渐变的需求: 1.画圆形进度条 2.解决渐变 最终实现效果代码 package com.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graph

Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)

初识进度条ProgressBar 软件:Android Studio 实现: 1.点击按钮,进度条隐藏:再次点击,进度条出现.循环 2.点击按钮,水平进度条进度呈现并+10,此处进度条max为100.循环 1.圆形进度条 练习 <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/progress_b

Android仿微信公众号文章页面加载进度条

前言: 微信公众号文章详情页面加载的时候,WebView会在头部显示一个进度条,这样做的好处就是用户可以一边加载网页内容的同时也可浏览网页内容,不需要等完全加载完之后才全部显示出来.如何实现呢? 其实很简单,自定义一个WebView就可以实现了. 详细实现步骤如下 : 1.自定义一个ProgressWebView 继续 Webview @SuppressWarnings("deprecation") public class ProgressWebView extends WebVie

Android实现两圆点之间来回移动加载进度

本文实例为大家分享了Android实现两圆点之间来回移动加载进度的具体代码,供大家参考,具体内容如下 一.前言 最近喜欢上自定义控件,喜欢实现一些简约有趣的控件,也好巩固下以前学得知识和不断的学习新知识,程序员嘛,活到老学到老. 这篇文章接着上一篇文章:Android_自定义控件之水平圆点加载进度条,类似的实现方式,都是些比较简单的view绘制. 二.实现 先看下实现的效果吧: 说下实现思路:圆点x轴会有个位移变化量,当位移达到圆点直径+圆点间距之和就回改变方向(改变方向就是通过变化量值不断增加

Android Material加载进度条制作代码

最近看了几款APP的加载进度都是这种风格,感觉还不错,在网上找了一些资料,自己小练兵了一把: 主要运用的开源框架: /ViewPagerIndicator_library  主要就是tab页切换指示器 /ptr-lib 进度条 下载地址:https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh 一.使用方法 布局文件 <?xml version="1.0" encoding="utf-8"?>

Android自定义View仿华为圆形加载进度条

View仿华为圆形加载进度条效果图 实现思路 可以看出该View可分为三个部分来实现 最外围的圆,该部分需要区分进度圆和底部的刻度圆,进度部分的刻度需要和底色刻度区分开来 中间显示的文字进度,需要让文字在View中居中显示 旋转的小圆点,小圆点需要模拟小球下落运动时的加速度效果,开始下落的时候慢,到最底部时最快,上来时速度再逐渐减慢 具体实现 先具体细分讲解,博客最后面给出全部源码 (1)首先为View创建自定义的xml属性 在工程的values目录下新建attrs.xml文件 <resourc

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

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

Android自定义View实现加载进度条效果

上一篇文章总结了下自定义View的几个步骤,如果还有不清楚的同学可以先去看看Android自定义View(一),这篇文章和大家分享一下自定义加载进度条,效果如下 下面就以水平的进度条为列进行讲解: 1.首先还是在attrs.xml文件中自定义我们需要的属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="GradientP

Android自定义View基础开发之图片加载进度条

学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义View的实现: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.co

Android基于Glide v4.x的图片加载进度监听

Glide是一款优秀的图片加载框架,简单的配置便可以使用起来,为开发者省下了很多的功夫.不过,它没有提供其加载图片进度的api,对于这样的需求,实现起来还真颇费一番周折. 尝试 遇到这个需求,第一反应是网上肯定有人实现过,不妨借鉴一下别人的经验. Glide加载图片实现进度条效果 可惜,这个实现是基于3.7版本的,4.0版本以上的glide改动比较大,using函数已经被移除了 using() The using() API was removed in Glide 4 to encourage

微信小程序image图片加载完成监听

需求 在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调. 实现 1. 绑定回调 通过image标签的bindload属性绑定图片加载完成回调函数,src根据图片加载是否完成绑定是否显示缺省图: <image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad"/

Android基于ListView实现类似Market分页加载效果示例

本文实例讲述了Android基于ListView实现类似Market分页加载效果.分享给大家供大家参考,具体如下: 最近几天研究ListView实现分页加载和滚动加载,发现可以用listView的OnScroll方法来实现,直接上代码 ListViewScroll.java package zy.lucifer.ListViewScroll; import android.app.Activity; import android.os.Bundle; import android.util.Lo

android中Glide实现加载图片保存至本地并加载回调监听

Glide 加载图片使用到的两个记录 Glide 加载图片保存至本地指定路径 /** * Glide 加载图片保存到本地 * * imgUrl 图片地址 * imgName 图片名称 */ Glide.with(context).load(imgUrl).asBitmap().toBytes().into(new SimpleTarget<byte[]>() { @Override public void onResourceReady(byte[] bytes, GlideAnimation

Android关于Glide的使用(高斯模糊、加载监听、圆角图片)

高斯模糊.加载监听.圆角图片这些相信大家都很熟悉,那如何实现这些效果,请大家参考本文进行学习. 1.引用 compile 'com.github.bumptech.glide:glide:3.7.0' 2.加载图片 2.1 基本加载 Glide.with(context)     .load(url)     .into(imageView); 2.2 设置加载中和加载失败的情况 Glide.with(context) .load(url) .placeholder(R.drawable.loa

详解Android 教你打造高效的图片加载框架

1.概述 优秀的图片加载框架不要太多,什么UIL , Volley ,Picasso,Imageloader等等.但是作为一名合格的程序猿,必须懂其中的实现原理,于是乎,今天我就带大家一起来设计一个加载网络.本地的图片框架.有人可能会说,自己写会不会很渣,运行效率,内存溢出神马的.放心,我们拿demo说话,拼得就是速度,奏事这么任性. 关于加载本地图片,当然了,我手机图片比较少,7000来张: 1.首先肯定不能内存溢出,但是尼玛现在像素那么高,怎么才能保证呢?我相信利用LruCache统一管理你

深入剖析Android的Volley库中的图片加载功能

一.基本使用要点回顾 Volley框架在请求网络图片方面也做了很多工作,提供了好几种方法.本文介绍使用ImageLoader来进行网络图片的加载. ImageLoader的内部使用ImageRequest来实现,它的构造器可以传入一个ImageCache缓存形参,实现了图片缓存的功能,同时还可以过滤重复链接,避免重复发送请求. 下面是ImageLoader加载图片的实现方法: public void displayImg(View view){ ImageView imageView = (Im

图片加载进度实时显示

复制代码 代码如下: <script>var l=0;var imgs;var sum=0;var imgs=new Array();function chk(){  l--;  document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"  if (l==0){     for (var i=0;i<sum;i++)       document.body.i