Android实现百分比下载进度条效果

 更新时间:2018年12月31日 09:21:05   作者:一小沫一  
这篇文章主要为大家详细介绍了Android实现百分比下载进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

现在很多APP中都会集成下载功能,所以有一个方便好看又实用的进度条来展示下载进度很有必要,也能提高用户体验,在这里我就把项目里的下载进度条抽取出来分享给大家,话不多说,先看效果图:


这个进度条是自定义的一个View,其中有一个自定义属性就是百分比文字的大小(也可以把那两条显示颜色的进度条自定义属性,这里就没有实现,在代码里面写的)。

先说说实现原理:

1:由于自定义了属性,所以先获取属性的值。

2:绘制底色那条灰色的线。

3:根据传入的数据计算当前百分比,然后绘制那条橘黄色的线。

4:再在橘黄色线后面把百分比的文字绘制出来就OK了。

现在来看看代码:

一:属性设置attrs.xml文件

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 <declare-styleable name="downloadProgressBar"> 
 <attr name="dptextsize" format="dimension"/> 
 </declare-styleable> 
</resources> 

其中dptextsize就是自定义属性的名字

二:自定义view DownLoadProgressbar.Java

package com.ywl5320.downloadprogressdemo.downloadview; 
 
import android.content.Context; 
import android.content.res.TypedArray; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.graphics.Rect; 
import android.util.AttributeSet; 
import android.view.View; 
import android.view.ViewTreeObserver.OnGlobalLayoutListener; 
 
import com.ywl5320.downloadprogressdemo.R; 
 
/** 
 * 下载进度条 
 * 
 * @author ywl 
 * 
 */ 
public class DownLoadProgressbar extends View { 
 
 private Paint paint = new Paint(); // 绘制背景灰色线条画笔 
 private Paint paintText = new Paint(); // 绘制下载进度画笔 
 private float offset = 0f; // 下载偏移量 
 private float maxvalue = 0f; // 下载的总大小 
 private float currentValue = 0f; // 下载了多少 
 private Rect mBound = new Rect(); // 获取百分比数字的长宽 
 private String percentValue = "0%"; // 要显示的现在百分比 
 private float offsetRight = 0f; // 灰色线条距离右边的距离 
 private int textSize = 25; // 百分比的文字大小 
 private float offsetTop = 18f; // 距离顶部的偏移量 
 
 public DownLoadProgressbar(Context context) { 
 this(context, null); 
 // TODO Auto-generated constructor stub 
 } 
 
 public DownLoadProgressbar(Context context, AttributeSet attribute) { 
 this(context, attribute, 0); 
 } 
 
 public DownLoadProgressbar(Context context, AttributeSet attrs, 
  int defStyleAttr) { 
 super(context, attrs, defStyleAttr); 
 // TODO Auto-generated constructor stub 
 // 获取自定义属性,给textsize赋初始值 
 TypedArray t = getContext().obtainStyledAttributes(attrs, 
  R.styleable.downloadProgressBar); 
 textSize = (int) t.getDimension( 
  R.styleable.downloadProgressBar_dptextsize, 36); 
 getTextWidth(); 
 } 
 
 @Override 
 protected void onDraw(Canvas canvas) { 
 // TODO Auto-generated method stub 
 super.onDraw(canvas); 
 // 绘制底色 
 paint.setColor(getResources().getColor(R.color.no1_gray_light)); 
 paint.setStrokeWidth(1); 
 canvas.drawLine(0, offsetTop, getWidth(), offsetTop, paint); 
 // 绘制进度条颜色 
 paint.setColor(getResources().getColor(R.color.no2_orange)); 
 paint.setStrokeWidth(2); 
 canvas.drawLine(0, offsetTop, offset, offsetTop, paint); 
 // 绘制白色区域及百分比 
 paint.setColor(getResources().getColor(R.color.no3_white)); 
 paint.setStrokeWidth(1); 
 paintText.setColor(getResources().getColor(R.color.no2_orange)); 
 paintText.setTextSize(textSize); 
 paintText.setAntiAlias(true); 
 paintText.getTextBounds(percentValue, 0, percentValue.length(), mBound); 
 canvas.drawLine(offset, offsetTop, offset + mBound.width() + 4, offsetTop, paint); 
 canvas.drawText(percentValue, offset, offsetTop + mBound.height() / 2 - 2, paintText); 
 } 
 
 /** 
 * 设置当前进度值 
 * 
 * @param currentValue 
 */ 
 public void setCurrentValue(float currentValue) { 
 this.currentValue = currentValue; 
 int value = (int) (this.currentValue / maxvalue * 100); 
 if (value < 100) { 
  percentValue = value + "%"; 
 } else { 
  percentValue = "100%"; 
 } 
 initCurrentProgressBar(); 
 invalidate(); 
 } 
 
 /** 
 * 设置最大值 
 * 
 * @param maxValue 
 */ 
 public void setMaxValue(float maxValue) { 
 this.maxvalue = maxValue; 
 } 
 
 /** 
 * 获取当前进度条长度 
 * 
 * @param maxValue 
 * @param currentValue 
 * @return 
 */ 
 public void initCurrentProgressBar() { 
 getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() { 
 
  @Override 
  public void onGlobalLayout() { 
  // TODO Auto-generated method stub 
  if (currentValue < maxvalue) { 
   offset = (getWidth() - offsetRight) * currentValue / maxvalue; 
  } else { 
   offset = getWidth() - offsetRight; 
  } 
  } 
 }); 
 
 } 
 
 /** 
 * 获取“100%”的宽度 
 */ 
 public void getTextWidth() { 
 Paint paint = new Paint(); 
 Rect rect = new Rect(); 
 paint.setTextSize(textSize); 
 paint.setAntiAlias(true); 
 paint.getTextBounds("100%", 0, "100%".length(), rect); 
 offsetRight = rect.width() + 5; 
 } 
} 

这就是实现代码,代码不多,注解也有,不是很难。使用时只需传入文件最大值,当前下载了多少就能自动计算出百分比。如果循环传入,就实现了动态跑动的效果。

三:Activity布局文件 activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 xmlns:ywl="http://schemas.android.com/apk/res/com.ywl5320.downloadprogressdemo" <!-- 这就是为自定义属性添加命名空间,注意res后的是:程序包名--> 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="@color/no3_white" 
 tools:context="${relativePackage}.${activityClass}" > 
 
 <TextView 
 android:id="@+id/tv_start" 
 android:layout_width="match_parent" 
 android:layout_height="50dip" 
 android:layout_below="@+id/rl_progress" 
 android:layout_marginTop="40dip" 
 android:layout_marginLeft="20dip" 
 android:layout_marginRight="20dip" 
 android:gravity="center" 
 android:background="@drawable/btn_blue_selector" 
 android:text="开始"/> 
 
 <RelativeLayout 
 android:id="@+id/rl_progress" 
 android:layout_width="match_parent" 
 android:layout_marginLeft="20dip" 
 android:layout_marginRight="20dip" 
 android:layout_marginTop="30dip" 
 android:layout_height="50dip"> 
 <TextView 
  android:id="@+id/tv_size" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_marginTop="4dip" 
  android:textColor="@color/no5_gray_silver" 
  android:textSize="12sp" /> 
 
 <TextView 
  android:id="@+id/tv_speed" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_alignParentRight="true" 
  android:layout_marginTop="6dip" 
  android:textColor="@color/no5_gray_silver" 
  android:textSize="12sp" /> 
 
 <com.ywl5320.downloadprogressdemo.downloadview.DownLoadProgressbar 
  android:id="@+id/dp_game_progress" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content" 
  ywl:dptextsize="14sp" <!-- 这里设置控件的字体大小为14sp --> 
  android:layout_below="@+id/tv_size"> 
 </com.ywl5320.downloadprogressdemo.downloadview.DownLoadProgressbar> 
 </RelativeLayout> 
 
</RelativeLayout> 

程序中的文件大小,当前下载量和下载速度,都是在这里布局的,用的时候可以动态设置就行了,也可以把这个布局文件封装为listview的item布局文件,那样就可以制作下载列表了。

四:MainAcativity.java

package com.ywl5320.downloadprogressdemo; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.os.Handler; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.TextView; 
 
import com.ywl5320.downloadprogressdemo.downloadview.DownLoadProgressbar; 
 
public class MainActivity extends Activity { 
 
 private TextView mStart; 
 private TextView mSize; 
 private TextView mSpeed; 
 private DownLoadProgressbar mProgress; 
 private int max = 100; //总的大小 
 private int current = 0; //当前下载大小 
 private String speed = "1"; //下载速度 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.activity_main); 
 mStart = (TextView) findViewById(R.id.tv_start); 
 mProgress = (DownLoadProgressbar) findViewById(R.id.dp_game_progress); 
 mSize = (TextView) findViewById(R.id.tv_size); 
 mSpeed = (TextView) findViewById(R.id.tv_speed); 
 //初始化下载进度 
 mSize.setText(current + "MB/" + max + "MB"); 
 //初始化下载速度 
 mSpeed.setText(speed + "MB/s"); 
 mStart.setOnClickListener(new OnClickListener() { 
 
  @Override 
  public void onClick(View v) { 
  // TODO Auto-generated method stub 
  start(); 
  } 
 }); 
 } 
 
 //循环模拟下载过程 
 public void start() { 
 if (current <= max) { 
  mSize.setText(current + "MB/" + max + "MB"); 
  mSpeed.setText(speed + "MB/s"); 
  mProgress.setMaxValue(max); 
  mProgress.setCurrentValue(current); 
  handler.postDelayed(runnable, 100); 
 } else { 
  handler.removeCallbacks(runnable); 
 } 
 
 } 
 
 Handler handler = new Handler(); 
 Runnable runnable = new Runnable() { 
 @Override 
 public void run() { 
  // TODO Auto-generated method stub 
  current = current + 1; 
  start(); 
 } 
 }; 
 
} 

就这样一个简单实用的下载百分比进度条就实现了,有需要可以直接用就行:Android百分比下载进度条

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

相关文章

  • Android使用自定义View绘制渐隐渐现动画

    Android使用自定义View绘制渐隐渐现动画

    这篇文章主要介绍了Android使用自定义View绘制渐隐渐现动画效果的相关内容,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 刷新Activity中的scrollview示例(局部ui刷新)

    刷新Activity中的scrollview示例(局部ui刷新)

    代码很简单,但是很实用,适合在一个Activity中要刷新局部的UI,比如在扫描一维码的时候,要把每次扫描的结果都显示在界面上
    2014-01-01
  • Android 实现闪屏页和右上角的倒计时跳转实例代码

    Android 实现闪屏页和右上角的倒计时跳转实例代码

    本文给大家分享一段实例代码给大家介绍android实现闪屏页和右上角的倒计时跳转实例代码,闪屏页用到了handler和CountDownTimer类,还需配置一下Activity的主题,感兴趣的朋友参考下吧
    2016-02-02
  • Kotlin自定义实现支付密码数字键盘的方法实例

    Kotlin自定义实现支付密码数字键盘的方法实例

    这篇文章主要给大家介绍了关于Kotlin如何自定义实现支付密码数字键盘的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • Android中图片压缩方案详解及源码下载

    Android中图片压缩方案详解及源码下载

    这篇文章主要介绍了Android中图片压缩方案详解及源码下载的相关资料,需要的朋友可以参考下
    2017-03-03
  • Android SdkVersion的区别及获取版本信息方法

    Android SdkVersion的区别及获取版本信息方法

    下面小编就为大家带来一篇Android SdkVersion的区别及获取版本信息方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Android Studio preview 不固定及常见问题的解决办法

    Android Studio preview 不固定及常见问题的解决办法

    preview 可以帮助您预览您的布局文件将如何在用户的设备上呈现。这篇文章主要介绍了Android Studio preview 不固定及常见问题的解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Android实现图片轮播切换实例代码

    Android实现图片轮播切换实例代码

    利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换,其中当点击“上一张”图片时,切换到上一张图片;当点击“下一张”图片时,切换到下一张图片,本文给大家介绍Android实现图片轮播切换实例代码,需要的朋友参考下
    2015-12-12
  • Android ellipsize的小问题介绍

    Android ellipsize的小问题介绍

    使用TextView的时候,需要长度过长自动显示省略号,android里有原生的支持,本文将针对此问题进行深入剖析,需要的朋友可以参考
    2012-11-11
  • Android计步功能的实现代码

    Android计步功能的实现代码

    本篇文章主要介绍了Android计步功能的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03

最新评论