android自定义ImageView仿图片上传示例_网络技术_宿州市腾雀网络科技有限公司

android自定义ImageView仿图片上传示例

发布时间 - 2026-01-10 22:33:42 点击率：次

看下效果图

主要看下自定义view 代码

public class ProcessImageView extends ImageView{ 
  private Context context; 
  private Paint paint; 
  private LogUtil log=LogUtil.getInstance(); 
  int progress = 0; 
  private boolean flag; 
 
  public ProcessImageView(Context context) { 
    super(context); 
  } 
 
  public ProcessImageView(Context context, AttributeSet attrs) { 
    this(context, attrs,0); 
  } 
 
  public ProcessImageView(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
    this.context=context; 
    paint=new Paint(); 
  } 
 
  @Override 
  protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    paint.setAntiAlias(true); //消除锯齿 
    paint.setStyle(Paint.Style.FILL); //设置paint为实心， Paint.Style.STROKE为空心 
    paint.setColor(Color.parseColor("#70000000")); //设置为半透明 
    canvas.drawRect(0,0,getWidth(),getHeight()-getHeight()*progress/100,paint); //这里getWidth() 获取的是image对象宽高度 xml值*2 
 
    paint.setColor(Color.parseColor("#00000000"));// 全透明 
    canvas.drawRect(0, getHeight() - getHeight() * progress / 100, 
        getWidth(), getHeight(), paint); 
 
    if(!flag){ 
      paint.setTextSize(30); 
      paint.setColor(Color.parseColor("#FFFFFF")); 
      paint.setStrokeWidth(2); 
      Rect rect = new Rect(); 
      paint.getTextBounds("100%", 0, "100%".length(), rect);// 确定文字的宽度 
      canvas.drawText(progress + "%", getWidth() / 2 - rect.width() / 2, 
          getHeight() / 2, paint); 
    } 
  } 
 
  public void setProgress(int progress) { 
    this.progress = progress; 
    if(progress==100){ 
      flag=true; 
    } 
    postInvalidate(); 
  } 
}

里面代码很详细了。

然后看下 Activity代码

public class MainActivity extends AppCompatActivity { 
  ProcessImageView processImageView =null; 
  int progress=0; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
 
    processImageView=(ProcessImageView) findViewById(R.id.image); 
    //模拟图片上传进度 
    new Thread(new Runnable() { 
      @Override 
      public void run() { 
        while (true){ 
          if(progress==100){//图片上传完成 
            return; 
          } 
          progress++; 
          processImageView.setProgress(progress); 
          try{ 
            Thread.sleep(200); //暂停0.2秒 
          } catch (InterruptedException e){ 
            e.printStackTrace(); 
          } 
        } 
      } 
    }).start(); 
  } 
}

下面来详细介绍view代码。

首先从图中可以看到中间有个参数变化，这个进度值不断变化，我们再activity 中使用了一个线程，每隔0.2 秒会增加progress这个值，然后通过 processImageView.setProgress(progress); 改变view类中 progress重绘制这个定义view.

然后看下自定义view 类，主要onDraw（）方法中.

绘制中分为三部分，

第一部分为上部分半透明区域

第二部分为下部分全透明区域

第三部分就是中间的progress值变化

先看第一个部分画出上部分半透明，

paint.setAntiAlias(true); //消除锯齿 
    paint.setStyle(Paint.Style.FILL); //设置paint为实心， Paint.Style.STROKE为空心 
    paint.setColor(Color.parseColor("#70000000")); //设置为半透明 
    canvas.drawRect(0,0,getWidth(),getHeight()-getHeight()*progress/100,paint);

第二部分画出下面透明区域

paint.setColor(Color.parseColor("#00000000"));// 全透明 
    canvas.drawRect(0, getHeight() - getHeight() * progress / 100, 
        getWidth(), getHeight(), paint);

第三部分动态改变字符串

if(!flag){ 
      paint.setTextSize(30); 
      paint.setColor(Color.parseColor("#FFFFFF")); 
      paint.setStrokeWidth(2); 
      Rect rect = new Rect(); 
      paint.getTextBounds("100%", 0, "100%".length(), rect);// 确定文字的宽度 
      canvas.drawText(progress + "%", getWidth() / 2 - rect.width() / 2, 
          getHeight() / 2, paint); 
    }

源码地址 http://xiazai./201701/yuanma/ProcessImageDemo_jb51.rar

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

# android # 上传图片 # android图片上传 # ImageView图片上传 # Android自定义ImageView实现自动放大缩小动画 # Android自定义圆角ImageView控件 # Android 自定义imageview实现图片缩放实例详解 # Android自定义控件之圆形、圆角ImageView # Android自定义GestureDetector实现手势ImageView # Android自定义ImageView实现在图片上添加图层效果 # Android通过自定义ImageView控件实现图片的缩放和拖动的实现代码 # Android 自定义圆形头像CircleImageView支持加载网络图片的实现代码 # Android自定义圆角ImageView # Android布局自定义Shap圆形ImageView可以单独设置背景与图片 # Android编程实现自定义ImageView圆图功能的方法 # 自定义 # 全透明 # 设置为 # 中分 # 画出 # 图片上传 # 的是 # 有个 # 第一个 # 可以看到 # 详细介绍 # 第二部 # 每隔 # 先看 # 第一部分 # 图中 # 第二部分 # 大家多多 # 为上 # 类中

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：使用Webman构建个性化的视频|直播|应用

下一篇： |直播|网站设计制作教程视频,如何编辑|直播|主页？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：使用Webman构建个性化的视频|直播|应用

下一篇： |直播|网站设计制作教程视频,如何编辑|直播|主页？