1.先上效果图
设计图.png
demo效果图.png
2.简介
前几天项目中用到了柱形图，而且是叠加的，找了一些第三方开源库，没有特别合适的，MPAndroidChart能实现这种效果，但是这个库太大了，只为了实现这个效果就引用这个库不太好，就自己写了一个柱形图自定义控件，实现叠加柱形图，适用于简单的几个柱的情况，如果复杂的柱状图建议使用MPAndroidChart和HelloChart这两个开源库。
3.实现原理
demo.png
每个柱形图分为三段，一段是红色框部分称为第二柱，第二段为绿色框部分称为第一柱，第三段为蓝色框部分为数据显示。
首先新建BarChartView继承View，原理就是根据柱形图父控件的高度和y轴的最大值算出柱状图的应有高度，如父控件高度为300，y轴最大值为5k，柱形图的数据为3k,那么柱形图的高度 = 3/5*父控件总高度，在根据柱形图高度计算坐标，画矩形，有了第一柱的坐标再计算第二柱和数据的坐标就简单了。
如下：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//获取每个柱的宽度
int barWidth = getRight() - getLeft();
//获取总高度
int totalHeight = canvas.getHeight();
//画第二柱
float secondBarHeight = (dataSecond / yMax )* totalHeight;
float y = totalHeight - secondBarHeight;
float x = getLeft();
canvas.drawRect(x,y,x+barWidth,totalHeight,barPaint1);
//画第一柱
float firstBarHeght = (dataFirst / yMax )* totalHeight;
float firstY = totalHeight - firstBarHeght;
canvas.drawRect(x,firstY,x+barWidth,y,barPaint);
//画文字
Rect rect = new Rect();
textPaint.getTextBounds(String.valueOf(text), 0, String.valueOf(text).length(), rect);
int w = rect.width();
int h = rect.height();
canvas.drawText(String.valueOf(text),(x+barWidth)/2 - w/2,firstY - h/2 - textMagin,textPaint);
}
4.用法
在xml中声明
<com.mao.myapp.view.BarChartView
android:id="@+id/bar_view3"
android:layout_width="30dp"
android:layout_height="match_parent"
app:firstBarColor="@color/colorAccent"
app:secondeBarColor="@color/colorPrimary"
app:textColor="@color/colorPrimaryDark"
app:textSize="12sp"
app:textMargin="15dp"/>
android:layout_width="30dp" //必须为柱形图设置宽度，必须是固定值
app:firstBarColor="@color/colorAccent" //第一柱的颜色值
app:secondeBarColor="@color/colorPrimary" //第二柱颜色值
app:textColor="@color/colorPrimaryDark" //数据的颜色值
app:textSize="12sp" //数据文字大小
app:textMargin="15dp" //数据和柱形图距离
在java中设置数据
chartView1 = (BarChartView) findViewById(R.id.bar_view1);
chartView1.setData(1000,800,5000,"1000");
demo.png
找到ChartView控件，调用setData方法设置数据，setData方法的四个参数，第一个参数1000为图中绿色框的数据，第二个参数为图中红色框的数据，第三个参数为y轴的最大值，图中为5k，第四个参数为蓝色框中显示的数据，这样就可以了，用着很简单有没有。至于横纵轴用布局画上去就可以了，我这里用了比重做的。这样这个叠加柱状图的效果就实现了，如果需要动画效果的可以自己加上动画。
5.代码
BarChartView
public class BarChartView extends View {
Paint textPaint; //文字画笔
Paint barPaint; //第二柱形图画笔
Paint barPaint1;//第一柱形图画笔
int textColor = 0xDDFFFFFF;//文字颜色
int barColor = 0xDDFF9246; //第二柱形图画笔颜色
int barColor1 = 0xDDFFAC72;//第一柱形图画笔颜色
float dataFirst; //第一柱形图数据
float dataSecond; //第二柱形图数据
float yMax;//y轴最大数据
int textMagin = 5; //文字与柱形图距离
int textSize = 18; //文字大小
String text; //文字
public BarChartView(Context context) {
this(context,null);
}
public BarChartView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public BarChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint(context);
}
private void initPaint(Context context) {
//获取屏幕宽度
DisplayMetrics dm = context.getResources().getDisplayMetrics();
int mScreenWidth = dm.widthPixels;
int mScreenHeight = dm.heightPixels;
//以分辨率为720*1080准，计算宽高比值,根据屏幕比例计算文字大小
float ratioWidth = (float) mScreenWidth / 720;
float ratioHeight = (float) mScreenHeight / 1080;
float ratioMetrics = Math.min(ratioWidth, ratioHeight);
int textSize = Math.round(this.textSize * ratioMetrics);
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setColor(textColor);
textPaint.setTextSize(textSize);
barPaint = new Paint();
barPaint.setAntiAlias(true);
barPaint.setColor(barColor);
barPaint1 = new Paint();
barPaint1.setAntiAlias(true);
barPaint1.setColor(barColor1);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//获取每个柱的宽度
int barWidth = getRight() - getLeft();
//获取总高度
int totalHeight = canvas.getHeight();
//画第二柱
float secondBarHeight = (dataSecond / yMax )* totalHeight;
float y = totalHeight - secondBarHeight;
float x = getLeft();
canvas.drawRect(x,y,x+barWidth,totalHeight,barPaint1);
//画第一柱
float firstBarHeght = (dataFirst / yMax )* totalHeight;
float firstY = totalHeight - firstBarHeght;
canvas.drawRect(x,firstY,x+barWidth,y,barPaint);
//画文字
Rect rect = new Rect();
textPaint.getTextBounds(String.valueOf(text), 0, String.valueOf(text).length(), rect);
int w = rect.width();
int h = rect.height();
canvas.drawText(String.valueOf(text),(x+barWidth)/2 - w/2,firstY - h/2 - textMagin,textPaint);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
* 设置柱型数据
* @param dataFirst 第一柱的数据值
* @param dataSecond 第二柱的数据值
* @param yMax Y轴的最大值
* @param text 柱上显示的文字
*/
public void setData(float dataFirst,float dataSecond,float yMax,String text) {
this.dataSecond = dataSecond;
this.yMax = yMax;
this.dataFirst = dataFirst;
this.text = text;
invalidate();
}
public void setTextColor(int textColor) {
this.textColor = textColor;
}
public void setBarColor(int barColor) {
this.barColor = barColor;
}
public void setBarColor1(int barColor1) {
this.barColor1 = barColor1;
}
public void setTextMagin(int textMagin) {
this.textMagin = textMagin;
}
public void setTextSize(int textSize) {
this.textSize = textSize;
}
}
attr.xml
<declare-styleable name="BarChartView">
<attr name="textColor" format="color"/>
<attr name="firstBarColor" format="color"/>
<attr name="secondeBarColor" format="color"/>
<attr name="textMargin" format="dimension"/>
<attr name="textSize" format="dimension"/>
</declare-styleable>
可以直接拷贝过去使用了...
