Android 柱状图的绘制
Android 柱状图的绘制
今日竹石 发表于4年前
Android 柱状图的绘制
  • 发表于 4年前
  • 阅读 3589
  • 收藏 1
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

    这是今天刚写的柱状图,效果很简单,代码贴出来。

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();

}

}

}

};


}


共有 人打赏支持
粉丝 41
博文 228
码字总数 181721
×
今日竹石
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: