Android的下拉重新整理帶進度條效果

標籤：android   listview   

         首先看一下運行，程式的下拉重新整理參考了視頻，在視頻頁面也提供了源碼下載，

http://www.imooc.com/learn/135

本篇主要說在此基礎上增加了進度條的快速旋轉和遞增遞減處理，在文章最後也會給出源碼，這裡主要描述一下所用的一個類

RoundProgressBar

package com.cayden.listview;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.RectF;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.view.View;/** * 帶進度的進度條，安全執行緒的View，可直接線上程中更新進度 * @author cuiran * */public class RoundProgressBar extends View {/** * 畫筆對象的引用 */private Paint paint;/** * 圓環的顏色 */private int roundColor;/** * 圓環進度的顏色 */private int roundProgressColor;/** * 中間進度百分比的字串的顏色 */private int textColor;/** * 中間進度百分比的字串的字型 */private float textSize;/** * 圓環的寬度 */private float roundWidth;/** * 最大進度 */private int max;/** * 當前進度 */private int progress;/** * 是否顯示中間的進度 */private boolean textIsDisplayable;/** * 進度的風格，實心或者空心 */private int style;public static final int STROKE = 0;public static final int FILL = 1;/**是否迴圈**/public  boolean isSpinning = false;public RoundProgressBar(Context context) {this(context, null);}public RoundProgressBar(Context context, AttributeSet attrs) {this(context, attrs, 0);}public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);paint = new Paint();TypedArray mTypedArray = context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar);//擷取自訂屬性和預設值roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 360);textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 0);mTypedArray.recycle();//必須Recycle}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);/** * 畫最外層的大圓環 */int centre = getWidth()/2; //擷取圓心的x座標int radius = (int) (centre - roundWidth/2); //圓環的半徑paint.setColor(roundColor); //設定圓環的顏色paint.setStyle(Paint.Style.STROKE); //設定空心paint.setStrokeWidth(roundWidth); //設定圓環的寬度paint.setAntiAlias(true);  //消除鋸齒 canvas.drawCircle(centre, centre, radius, paint); //畫出圓環/** * 畫進度百分比 現已去掉改成畫圖片 *///paint.setStrokeWidth(0); //paint.setColor(textColor);//paint.setTextSize(textSize);//paint.setTypeface(Typeface.DEFAULT_BOLD); //設定字型//int percent = (int)(((float)progress / (float)max) * 100);  //中間的進度百分比，先轉換成float在進行除法運算，不然都為0//float textWidth = paint.measureText(percent + "%");   //測量字型寬度，我們需要根據字型的寬度設定在圓環中間////if(textIsDisplayable && percent != 0 && style == STROKE){//canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize/2, paint); //畫出進度百分比//}if(isSpinning){/** * 畫圖片 */Bitmap bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.loading02);int width=bitmap.getWidth();int height=bitmap.getHeight();canvas.drawBitmap(bitmap, centre-width/2, centre-height/2 , paint);bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.loading06);width=bitmap.getWidth();height=bitmap.getHeight();canvas.drawBitmap(bitmap, centre-width/2, centre-height/2 , paint);/** * 畫圓弧 ，畫圓環的進度 *///設定進度是實心還是空心paint.setStrokeWidth(roundWidth); //設定圓環的寬度paint.setColor(roundProgressColor);  //設定進度的顏色RectF oval = new RectF(centre - radius, centre - radius, centre+ radius, centre + radius);  //用於定義的圓弧的形狀和大小的界限paint.setStyle(Paint.Style.STROKE);canvas.drawArc(oval, progress-90, 320 , false, paint);  //根據進度畫圓弧}else{/** * 畫圖片 */Bitmap bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.loading02);int width=bitmap.getWidth();int height=bitmap.getHeight();canvas.drawBitmap(bitmap, centre-width/2, centre-height/2 , paint); bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.loading05); width=bitmap.getWidth(); height=bitmap.getHeight(); canvas.drawBitmap(bitmap, centre-width/2, centre-height/2 , paint);/** * 畫圓弧 ，畫圓環的進度 *///設定進度是實心還是空心paint.setStrokeWidth(roundWidth); //設定圓環的寬度paint.setColor(roundProgressColor);  //設定進度的顏色RectF oval = new RectF(centre - radius, centre - radius, centre+ radius, centre + radius);  //用於定義的圓弧的形狀和大小的界限paint.setStyle(Paint.Style.STROKE);canvas.drawArc(oval, -90, progress , false, paint);  //根據進度畫圓弧}}public synchronized int getMax() {return max;}/** * 設定進度的最大值 * @param max */public synchronized void setMax(int max) {if(max < 0){throw new IllegalArgumentException("max not less than 0");}this.max = max;}/** * 擷取進度.需要同步 * @return */public synchronized int getProgress() {return progress;}  /**     * Reset the count (in increment mode)     */    public void resetCount() {        progress = 0;        invalidate();    }    /**     * Turn off spin mode     */    public void stopSpinning() {        isSpinning = false;        progress = 0;        spinHandler.removeMessages(0);    }    /**     * Puts the view on spin mode     */    public void spin() {        isSpinning = true;        spinHandler.sendEmptyMessage(0);    }    /**     * Increment the progress by 1 (of 360)     */    public void incrementProgress() {        isSpinning = false;        if (progress > 360)            progress = 0;        spinHandler.sendEmptyMessage(0);    } private Handler spinHandler = new Handler() {        /**         * This is the code that will increment the progress variable         * and so spin the wheel         */        @Override        public void handleMessage(Message msg) {        invalidate();        if(isSpinning){          progress += 10;                  if (progress > 360) {                      progress = 0;                  }                  spinHandler.sendEmptyMessageDelayed(0, 0);        }            //super.handleMessage(msg);        }    };/** * 設定進度，此為安全執行緒控制項，由於考慮多線的問題，需要同步 * 重新整理介面調用postInvalidate()能在非UI線程重新整理 * @param progress */public synchronized void setProgress(int progress) {if(progress < 0){throw new IllegalArgumentException("progress not less than 0");}if(progress > max){progress = max;}if(progress <= max){this.progress = progress;postInvalidate();}}public int getCricleColor() {return roundColor;}public void setCricleColor(int cricleColor) {this.roundColor = cricleColor;}public int getCricleProgressColor() {return roundProgressColor;}public void setCricleProgressColor(int cricleProgressColor) {this.roundProgressColor = cricleProgressColor;}public int getTextColor() {return textColor;}public void setTextColor(int textColor) {this.textColor = textColor;}public float getTextSize() {return textSize;}public void setTextSize(float textSize) {this.textSize = textSize;}public float getRoundWidth() {return roundWidth;}public void setRoundWidth(float roundWidth) {this.roundWidth = roundWidth;}}

類中的主要繪圖部分在

canvas.drawArc(oval, progress-90, 320 , false, paint);  //根據進度畫圓弧

canvas.drawArc(oval, -90, progress , false, paint);  //根據進度畫圓弧

可以看一下canvas.drawArc方法

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

• oval :指定圓弧的外輪廓矩形地區。
• startAngle: 圓弧起始角度，單位為度。
• sweepAngle: 圓弧掃過的角度，順時針方向，單位為度。
• useCenter: 如果為True時，在繪製圓弧時將圓心包括在內，通常用來繪製扇形。
• paint: 繪製圓弧的畫板屬性，如顏色，是否填充等

可以參考以下對此介紹的網站

http://blog.sina.com.cn/s/blog_783ede0301012im3.html

最後給出項目的源碼:

https://github.com/cayden/ListViewDemo

Android的下拉重新整理帶進度條效果