Android 柱狀圖的繪製

    這是今天剛寫的柱狀圖，效果很簡單，代碼貼出來。

package com.example.testchart;

import android.annotation.SuppressLint;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.os.Handler;

import android.os.Message;

import android.view.View;

@SuppressLint("HandlerLeak")

public class ChartText extends View

{

private Paint paint;

private Paint font_Paint;

// 數值顯示的偏移量

private int numWidth = 9;

// 起始高度爲 最大高度減去 80 【注意這裏的高度是反的，也就是說，y軸是逐漸減小的】

private float startHeight = 10;

private float endHeight = startHeight;

// 柱狀圖的寬度

private int viewWidth = 20;

// 組態圖的高度 【顯示的數值，100 爲 100%】

private int maxSize = 43;

private int indexSize = 0;

// 要顯示的模式 【類型，好比：℃和百分比等】

private String displayMode = "%";

// 模式

private boolean mode = false;

// 線程控制

private boolean display = true;

// 是否開啓動畫效果

private boolean animMode = true;

/**

* 

* @param context

* @param maxSize

*            須要顯示的數值

* @param displayMode

*            顯示的類型

*/

public ChartText(Context context, int maxSize, String displayMode)

{

super(context);

this.maxSize = maxSize;

this.displayMode = displayMode;

init();

}

/**

* 

* @param context

* @param maxSize

*            須要顯示的數值

* @param displayMode

*            顯示的類型

* @param mode

*            顯示的模式，默認爲false，數值越高，顏色越偏向紅色。爲true反之

*/

public ChartText(Context context, int maxSize, String displayMode,

boolean mode)

{

super(context);

this.maxSize = maxSize;

this.displayMode = displayMode;

this.mode = mode;

init();

}

/**

* 

* @param context

* @param maxSize

*            須要顯示的數值

* @param displayMode

*            顯示的類型

* @param mode

*            顯示的模式，默認爲false，數值越高，顏色越偏向紅色。爲true反之

* @param animMode

*            是否顯示動畫加載效果，默認爲true

*/

public ChartText(Context context, int maxSize, String displayMode,

boolean mode, boolean animMode)

{

super(context);

this.maxSize = maxSize;

this.displayMode = displayMode;

this.mode = mode;

this.animMode = animMode;

init();

}

// 繪製界面

@Override

protected void onDraw(Canvas canvas)

{

super.onDraw(canvas);

canvas.drawRect(10, endHeight, 10 + viewWidth, startHeight, paint);

if (!display)

{

// 這段if語句能夠放在初始化中，這個就交給你們吧。

if (!mode && indexSize >= 50)

{

paint.setARGB(255, 200, 200, 60);

if (!mode && indexSize >= 80)

{

paint.setARGB(255,

(indexSize < 100) ? (110 + indexSize + 45) : 255,

(indexSize < 100) ? 210 - (indexSize + 45) : 0, 20);

}

} else if (mode && indexSize <= 50)

{

paint.setARGB(255, 200, 200, 60);

if (mode && indexSize <= 30)

{

paint.setARGB(255, 255 - indexSize, indexSize, 20);

}

}

canvas.drawRect(10, endHeight, 10 + viewWidth, startHeight, paint);

paint.setARGB(255, 99, 66, 0);

canvas.drawText("" + indexSize, numWidth, endHeight - 5, paint);

paint.setARGB(255, 110, 210, 60);

}

canvas.drawText(displayMode, 0, startHeight + 15, font_Paint);

}

// 初始化

private void init()

{

// 數值初始化

paint = new Paint();

paint.setARGB(255, 110, 210, 20);

font_Paint = new Paint();

font_Paint.setARGB(255, 66, 66, 66);

// 設置頂端數值顯示的偏移量，數值越小，偏移量越大

numWidth = 9;

if (maxSize < 10)

{

numWidth = 15;

} else if (maxSize < 100)

{

numWidth = 12;

}

if (animMode)

{

// 啓動一個線程來實現柱狀圖緩慢增高

thread.start();

} else

{

// 不啓用動畫效果，則直接賦值進行繪製

display = false;

indexSize = maxSize;

endHeight = startHeight - (float) (maxSize * 1.5);

invalidate();

}

}

private Handler handler = new Handler()

{

@Override

public void handleMessage(Message msg)

{

super.handleMessage(msg);

// 經過endHeight >= 20將柱狀圖的高度控制在150之內，這樣恰好循環一百次到頂部

if (msg.what == 1 && indexSize < maxSize && endHeight >= 20)

{

endHeight -= 1.5;

indexSize += 1;

} else

{

display = false;

}

invalidate();

}

};

private Thread thread = new Thread()

{

@Override

public void run()

{

while (!Thread.currentThread().isInterrupted() && display)

{

Message msg = new Message();

msg.what = 1;

handler.sendMessage(msg);

try

{

// 每隔15毫秒觸發，儘可能使升高的效果看起來平滑

Thread.sleep(15);

} catch (InterruptedException e)

{

System.err.println("InterruptedException！線程關閉");

this.interrupt();

}

}

}

};

}