這是今天剛寫的柱狀圖,效果很簡單,代碼貼出來。android
package com.example.testchart;canvas
import android.annotation.SuppressLint;ide
import android.content.Context;動畫
import android.graphics.Canvas;this
import android.graphics.Paint;spa
import android.os.Handler;線程
import android.os.Message;it
import android.view.View;io
@SuppressLint("HandlerLeak")class
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();
}
}
}
};
}