服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android实现百分比下载进度条效果

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

2022-09-08 16:29一小沫一 Android

这篇文章主要为大家详细介绍了Android实现百分比下载进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

先说说实现原理:

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

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

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

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

现在来看看代码:

一:属性设置attrs.xml文件

?
1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="downloadProgressBar">
 <attr name="dptextsize" format="dimension"/>
 </declare-styleable>
</resources>

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

二:自定义view DownLoadProgressbar.Java

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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百分比下载进度条

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

原文链接:https://blog.csdn.net/w690333243/article/details/72778035

延伸 · 阅读

精彩推荐