Android 水平柱状图

最近由于公司的需求需要实现一款水平的柱状图用于进行统计价格的，于是就研究了一下，上网也搜了一些demo，但是感觉不是很好，于是自己就通过一些例子并结合自己所掌握的一些知识就写了一个demo供大家参考，如果有什么不足的地方还请大家多多指教。

我要实现的柱状图是一个水平的而且是可以带有动画的，先看看效果图吧



多余的话就不说了，上代码

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button btn_hv1 = (Button) findViewById(R.id.btn_hv1);
new WeightUtil(getApplicationContext()).mLayoutParams_Btn(btn_hv1);

HistogramView hv1 = (HistogramView) findViewById(R.id.hv1);
hv1.setProgress(0.2);
new WeightUtil(getApplicationContext()).mLayoutParams_View(hv1);
hv1.setRateBackgroundColor("#FF8B6F");
hv1.setOrientation(LinearLayout.HORIZONTAL);

Button btn_hv2 = (Button) findViewById(R.id.btn_hv2);
new WeightUtil(getApplicationContext()).mLayoutParams_Btn(btn_hv2);
double d = 293;
double b = 700;
double p2 = d / b;

TextView tv_hv2 = (TextView) findViewById(R.id.tv_hv2);
tv_hv2.setText("¥ 293.00");
new WeightUtil(getApplicationContext()).mLayoutParams_Text(tv_hv2, p2);

HistogramView hv2 = (HistogramView) findViewById(R.id.hv2);
hv2.setProgress(p2);
new WeightUtil(getApplicationContext()).mLayoutParams_View(hv2);
hv2.setRateBackgroundColor("#F8D478");
hv2.setOrientation(LinearLayout.HORIZONTAL);

Button btn_hv3 = (Button) findViewById(R.id.btn_hv3);
new WeightUtil(getApplicationContext()).mLayoutParams_Btn(btn_hv3);

HistogramView hv3 = (HistogramView) findViewById(R.id.hv3);
hv3.setProgress(0.6);
new WeightUtil(getApplicationContext()).mLayoutParams_View(hv3);
hv3.setRateBackgroundColor("#72CFF6");
hv3.setOrientation(LinearLayout.HORIZONTAL);

double d4 = 553;
double b4 = 700;
double p4 = d4/b4;
Button btn_hv4 = (Button) findViewById(R.id.btn_hv4);
new WeightUtil(getApplicationContext()).mLayoutParams_Btn(btn_hv4);

TextView tv_hv4 = (TextView) findViewById(R.id.tv_hv4);
new WeightUtil(getApplicationContext()).mLayoutParams_Text(tv_hv4, p4);
tv_hv4.setText("¥ 553.00");
HistogramView hv4 = (HistogramView) findViewById(R.id.hv4);
hv4.setProgress(p4);
new WeightUtil(getApplicationContext()).mLayoutParams_View(hv4);
hv4.setRateBackgroundColor("#9F88C7");
hv4.setOrientation(LinearLayout.HORIZONTAL);

Button btn_hv5 = (Button) findViewById(R.id.btn_hv5);
new WeightUtil(getApplicationContext()).mLayoutParams_Btn(btn_hv5);

HistogramView hv5 = (HistogramView) findViewById(R.id.hv5);
hv5.setProgress(1);
new WeightUtil(getApplicationContext()).mLayoutParams_View(hv5);
hv5.setRateBackgroundColor("#55D99E");
hv5.setOrientation(LinearLayout.HORIZONTAL);

Button btn_hv6 = (Button) findViewById(R.id.btn_hv6);
new WeightUtil(getApplicationContext()).mLayoutParams_Btn(btn_hv6);

HistogramView hv6 = (HistogramView) findViewById(R.id.hv6);
hv6.setProgress(0.6);
new WeightUtil(getApplicationContext()).mLayoutParams_View(hv6);
hv6.setRateBackgroundColor("#EACFA7");
hv6.setOrientation(LinearLayout.HORIZONTAL);

}

class ViewWrapper {
private View mTarget;

public ViewWrapper(View target) {
mTarget = target;
}

public int getWidth() {
return mTarget.getLayoutParams().width;
}

public void setWidth(int width) {
mTarget.getLayoutParams().width = width;
mTarget.requestLayout();
}

public int getHeight() {
return mTarget.getLayoutParams().height;
}

public void setHeight(int height) {
mTarget.getLayoutParams().height = height;
mTarget.requestLayout();
}

}

}

public class LYXHistogramView extends View {

private Paint yLinePaint;// 坐标轴竖直内部 虚线画笔
// 坐标轴底部的星期数
private String[] xPrices;

private Paint xLinePaint;// 坐标轴 轴线 画笔：
private Paint hLinePaint;// 坐标轴水平内部 虚线画笔
private Paint titlePaint;// 绘制文本的画笔
private int screenWidth;
private int screenHeight;

public LYXHistogramView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}

public LYXHistogramView(Context context) {
super(context);
init(context, null);
}

private void init(Context context, AttributeSet attrs) {
screenWidth = ScreenUtils.getScreenWidth(getContext());
screenHeight = ScreenUtils.getScreenHeight(getContext());
xPrices = new String[] { "000", "100", "200", "300", "400", "500",
"600", "700" };
xLinePaint = new Paint();
hLinePaint = new Paint();
yLinePaint = new Paint();
titlePaint = new Paint();
yLinePaint.setColor(Color.BLACK);
xLinePaint.setColor(Color.BLACK);
hLinePaint.setColor(Color.BLACK);
titlePaint.setColor(Color.BLACK);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();

canvas.drawLine((float) (screenWidth * 0.08),
(float) (screenWidth * 0.1), (float) (screenWidth * 0.08),
(float) (0.6 * screenHeight), xLinePaint);

canvas.drawLine((float) (screenWidth * 0.08),
(float) (screenWidth * 0.1), width - 10,
(float) (screenWidth * 0.1), xLinePaint);

titlePaint.setTextAlign(Align.RIGHT);
titlePaint.setTextSize(40);
titlePaint.setAntiAlias(false);
titlePaint.setStyle(Paint.Style.FILL);
int xPerWidth = screenWidth / 9;// 分成四部分

yLinePaint.setTextAlign(Align.CENTER);
for (int i = 0; i < 8; i++) {
canvas.drawLine(i * xPerWidth + (float) (screenWidth * 0.08),
(float) (screenWidth * 0.1), i * xPerWidth
+ (float) (screenWidth * 0.08), (float) (0.6 * screenHeight), yLinePaint);
}
int xAxisLength = getWidth();
int columCount = xPrices.length + 1;
int step = xAxisLength / 9;
for (int i = 0; i < columCount - 1; i++) {
titlePaint.setStrokeWidth(10);
canvas.drawText(xPrices[i], step * (i)
+ (float) (screenWidth * 0.12),
(float) (screenWidth * 0.07), titlePaint);
}

}
}

public class HistogramView extends View implements Runnable {

private int comHeight;// 控件高度

private View rateView;// 进度条

private String rateBackgroundColor;// 进图条背景颜色

private int rateBackgroundId; // 进图条背景图片id

private int rateHeight; // 进度条的高

private int rateWidth; // 进度条的宽

private int rateAnimValue;// 进度条动画高度

private int orientation; // 设置柱状图方向

private double progress;// 设置进度 1为最大值

private boolean isAnim = true; // 是否动画显示统计条

private Handler handler = new Handler();// 动画handler

private int animRate = 20; // 动画速度 以每1毫秒计

private int animTime = 1;// 动画延迟执行时间

private Canvas canvas;// 画布

public HistogramView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public HistogramView(Context context) {
super(context);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 初始化控件和进度的条相关参数
comHeight = h;
if (orientation == LinearLayout.HORIZONTAL) {
rateWidth = (int) (w * progress);
rateHeight = h;
} else {
rateHeight = (int) (h * progress);
rateWidth = w;
}
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
if (rateBackgroundColor != null) {
drawViewWithColor(paint, isAnim);
}
}

private void drawViewWithColor(Paint paint, boolean isAnim) {
paint.setColor(Color.parseColor(rateBackgroundColor));
if (isAnim) {
handler.postDelayed(this, animTime);
if (orientation == LinearLayout.HORIZONTAL) {// 水平方向柱状图
canvas.drawRect(0, 0, rateAnimValue, comHeight, paint);
}
}

}

public double getProgress() {
return progress;
}

public void setProgress(double progress) {
this.progress = progress;
}

public View getRateView() {
return rateView;
}

public void setRateView(View rateView) {
this.rateView = rateView;
}

public int getRateHeight() {
return rateHeight;
}

public void setRateHeight(int rateHeight) {
this.rateHeight = rateHeight;
}

public int getRateWidth() {
return rateWidth;
}

public void setRateWidth(int rateWidth) {
this.rateWidth = rateWidth;
}

public int getOrientation() {
return orientation;
}

public void setOrientation(int orientation) {
this.orientation = orientation;
}

public boolean isAnim() {
return isAnim;
}

public void setAnim(boolean isAnim) {
this.isAnim = isAnim;
}

public int getAnimRate() {
return animRate;
}

public void setAnimRate(int animRate) {
this.animRate = animRate;
}

public String getRateBackgroundColor() {
return rateBackgroundColor;
}

public void setRateBackgroundColor(String rateBackgroundColor) {
this.rateBackgroundColor = rateBackgroundColor;
rateBackgroundId = -1;
}

public int getRateBackgroundId() {
return rateBackgroundId;
}

public void setRateBackgroundId(int rateBackground) {
this.rateBackgroundId = rateBackground;
rateBackgroundColor = null;
}

@Override
public void run() {
if (orientation == LinearLayout.HORIZONTAL
&& (rateAnimValue <= rateWidth)) {
rateAnimValue += animRate;
invalidate();
} else if (orientation == LinearLayout.VERTICAL
&& (rateAnimValue <= rateHeight)) {
rateAnimValue += animRate;
invalidate();
} else {
handler.removeCallbacks(this);
rateAnimValue = 0;
}

}

}

以上代码仅供参考 如果有什么疑问请加

Android技术交流群 50208422或Android交流群 470707794