快捷導(dǎo)航

Android實(shí)現(xiàn)百分比下載進(jìn)度條效果

更新時(shí)間：2018年12月31日 09:21:05 作者：一小沫一

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)百分比下載進(jìn)度條效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

現(xiàn)在很多APP中都會(huì)集成下載功能，所以有一個(gè)方便好看又實(shí)用的進(jìn)度條來展示下載進(jìn)度很有必要，也能提高用戶體驗(yàn)，在這里我就把項(xiàng)目里的下載進(jìn)度條抽取出來分享給大家，話不多說，先看效果圖：

這個(gè)進(jìn)度條是自定義的一個(gè)View，其中有一個(gè)自定義屬性就是百分比文字的大?。ㄒ部梢园涯莾蓷l顯示顏色的進(jìn)度條自定義屬性，這里就沒有實(shí)現(xiàn)，在代碼里面寫的）。

先說說實(shí)現(xiàn)原理：

1：由于自定義了屬性，所以先獲取屬性的值。

2：繪制底色那條灰色的線。

3：根據(jù)傳入的數(shù)據(jù)計(jì)算當(dāng)前百分比，然后繪制那條橘黃色的線。

4：再在橘黃色線后面把百分比的文字繪制出來就OK了。

現(xiàn)在來看看代碼：

一：屬性設(shè)置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; 
 
/** 
 * 下載進(jìn)度條 
 * 
 * @author ywl 
 * 
 */ 
public class DownLoadProgressbar extends View { 
 
 private Paint paint = new Paint(); // 繪制背景灰色線條畫筆 
 private Paint paintText = new Paint(); // 繪制下載進(jìn)度畫筆 
 private float offset = 0f; // 下載偏移量 
 private float maxvalue = 0f; // 下載的總大小 
 private float currentValue = 0f; // 下載了多少 
 private Rect mBound = new Rect(); // 獲取百分比數(shù)字的長寬 
 private String percentValue = "0%"; // 要顯示的現(xiàn)在百分比 
 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); 
 // 繪制進(jìn)度條顏色 
 paint.setColor(getResources().getColor(R.color.no2_orange)); 
 paint.setStrokeWidth(2); 
 canvas.drawLine(0, offsetTop, offset, offsetTop, paint); 
 // 繪制白色區(qū)域及百分比 
 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); 
 } 
 
 /** 
 * 設(shè)置當(dāng)前進(jìn)度值 
 * 
 * @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(); 
 } 
 
 /** 
 * 設(shè)置最大值 
 * 
 * @param maxValue 
 */ 
 public void setMaxValue(float maxValue) { 
 this.maxvalue = maxValue; 
 } 
 
 /** 
 * 獲取當(dāng)前進(jìn)度條長度 
 * 
 * @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; 
 } 
}

這就是實(shí)現(xiàn)代碼，代碼不多，注解也有，不是很難。使用時(shí)只需傳入文件最大值，當(dāng)前下載了多少就能自動(dòng)計(jì)算出百分比。如果循環(huán)傳入，就實(shí)現(xiàn)了動(dòng)態(tài)跑動(dòng)的效果。

三：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" <!-- 這里設(shè)置控件的字體大小為14sp --> 
  android:layout_below="@+id/tv_size"> 
 </com.ywl5320.downloadprogressdemo.downloadview.DownLoadProgressbar> 
 </RelativeLayout> 
 
</RelativeLayout>

程序中的文件大小，當(dāng)前下載量和下載速度，都是在這里布局的，用的時(shí)候可以動(dòng)態(tài)設(shè)置就行了，也可以把這個(gè)布局文件封裝為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; //當(dāng)前下載大小 
 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); 
 //初始化下載進(jìn)度 
 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(); 
  } 
 }); 
 } 
 
 //循環(huán)模擬下載過程 
 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(); 
 } 
 }; 
 
}

就這樣一個(gè)簡單實(shí)用的下載百分比進(jìn)度條就實(shí)現(xiàn)了，有需要可以直接用就行：Android百分比下載進(jìn)度條

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: