自定义view
public class BarGraphView extends View {
private Context mContext;
/**
* 柱状图的宽度
*/
private float mLineWidth;
/**
* 柱状图之间的间隔
*/
private float mLineSpaceWidth;
/**
* 柱状图的颜色
*/
private int barGraphBgColor;
/**
* X轴字体的大小
*/
private float mXTextSize;
/**
* Y轴的字体大小
*/
private float mYTextSize;
/**
* xy轴线和字体的颜色
*/
private int mXYBGColor;
/**
* 柱状图执行动画的长度
*/
private Integer duration;
/**
* 是否显示X轴的文字
*/
private boolean isShowXText;
/**
* 是否显示Y轴的文字
*/
private boolean isShowYText;
/**
* 柱状图的画笔
*/
private Paint mBarGraphPaint;
/**
* 柱状图上面字的画笔
*/
private Paint mBarGraphTextPaint;
/**
* X轴的文字画笔
*/
private Paint mXTextPaint;
/**
* Y轴的文字画笔
*/
private Paint mYTextPaint;
/**
* XY轴的坐标画笔
*/
private Paint mXYLinePaint;
/**
* 当前柱状图的最大高度
*/
private int maxHeight;
/**
* 实际高度
*/
private int heightMeasureSpec;
/**
* 实际宽度
*/
private int widthMeasureSpec;
/**
* 圆柱占用的高度
*/
private float bottomHeight;
//保存柱状图的数据
private int[][] barGraphDataList;
//保存柱状图的颜色
private int[] barGraphColorList;
//保存柱状图X轴信息
private String[] barGraphTextList;
//Y轴线离左边的距离，以便绘制Y轴数字
private float mLeftYWidth;
//X轴线离底部的距离，以便绘制X轴的文字
private float mBottomXWidth;
private Bitmap mBitmap;
public BarGraphView(Context context) {
this(context, null);
}
public BarGraphView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public BarGraphView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BarGraphView);
//柱状图的宽度
mLineWidth = typedArray.getDimension(R.styleable.BarGraphView_bar_graph_width, dip2px(10));
//柱状图之间的间隔
mLineSpaceWidth = typedArray.getDimension(R.styleable.BarGraphView_bar_graph_distance, dip2px(20));
//柱状图的颜色
barGraphBgColor = typedArray.getColor(R.styleable.BarGraphView_bar_graph_bg_color, Color.BLUE);
//X轴字体大小
mXTextSize = typedArray.getDimension(R.styleable.BarGraphView_bar_graph_x_textSize, sp2px(12));
//y轴字体大小
mYTextSize = typedArray.getDimension(R.styleable.BarGraphView_bar_graph_y_textSize, sp2px(12));
//xy轴的颜色
mXYBGColor = typedArray.getColor(R.styleable.BarGraphView_bar_graph_xy_line_text_color, context.getResources().getColor(R.color.text_color_3));
//执行动画的时间
duration = typedArray.getInteger(R.styleable.BarGraphView_bar_graph_animation_duration, 1000);
isShowXText = typedArray.getBoolean(R.styleable.BarGraphView_bar_graph_isShow_X_text, true);
isShowYText = typedArray.getBoolean(R.styleable.BarGraphView_bar_graph_isShow_Y_text, true);
/**
* 系统使用一个arraypool池来存放typearray 用完及时销毁以便复用
* */
typedArray.recycle();
initView();
}
/**
* 初始化画笔
*/
private void initView() {
mBarGraphPaint = new Paint();
mBarGraphPaint.setStrokeWidth(mLineWidth);
mBarGraphPaint.setAntiAlias(true);
mBarGraphTextPaint = new Paint();
mBarGraphTextPaint.setStrokeWidth(dip2px(8));
mBarGraphTextPaint.setTextSize(sp2px(12f));
// mBarGraphTextPaint.setColor(getResources().getColor(R.color.circle_6));
mBarGraphTextPaint.setAntiAlias(true);
mXTextPaint = new Paint();
mXTextPaint.setStrokeWidth(3);
mXTextPaint.setColor(mXYBGColor);
mXTextPaint.setTextSize(mXTextSize);
mXTextPaint.setAntiAlias(true);
mYTextPaint = new Paint();
mYTextPaint.setStrokeWidth(3);
mYTextPaint.setColor(mXYBGColor);
mYTextPaint.setTextSize(mYTextSize);
mYTextPaint.setAntiAlias(true);
mXYLinePaint = new Paint();
mXYLinePaint.setStrokeWidth(2);
mXYLinePaint.setColor(getResources().getColor(R.color.paint_color6));
mXYLinePaint.setAntiAlias(true);
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.marker);
}
/**
* 测量宽度
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
measureWidth(heightMeasureSpec);
}
/**
* 长度可能超出屏幕范围
*/
private void measureWidth(int heightMeasureSpec) {
if (barGraphDataList != null && barGraphDataList.length > 0) {
widthMeasureSpec = (int) (mLineSpaceWidth * (barGraphDataList[0].length + 1) + mLineWidth * barGraphDataList.length * barGraphDataList[0].length) + dip2px(200);
}
this.heightMeasureSpec = MeasureSpec.getSize(heightMeasureSpec);
//左边字体的长度
widthMeasureSpec += mLeftYWidth + dip2px(10);
setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
measureWidth(h);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
bottomHeight = heightMeasureSpec - mBottomXWidth;
if (barGraphDataList == null || barGraphDataList.length <= 0)
return;
//给XY轴坐标写字
drawXYText(canvas);
//画柱状图
drawBarGraph(canvas);
}
//给Y轴和X轴写相应的文字
private void drawXYText(Canvas canvas) {
if (isShowYText) {
//Y轴写字
for (int i = 0; i <= 5; i++) {
float startY = bottomHeight - bottomHeight * 0.9f / maxHeight * maxHeight / 5 * i;
canvas.drawLine(dip2px(10) + mLeftYWidth, startY, widthMeasureSpec - 10, startY, mXYLinePaint);
String text = maxHeight / 5 * i + "";
String format = (Double.valueOf(text) / 100) + "";
float width = mYTextPaint.measureText(format);
Paint.FontMetricsInt fontMetricsInt = mYTextPaint.getFontMetricsInt();
float dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
canvas.drawText(format, (int) (dip2px(10) + mLeftYWidth - width + dip2px(5)), startY + dy, mYTextPaint);
}
}
if (!isShowXText) {
return;
}
//X轴写字
if (barGraphTextList != null && barGraphTextList.length > 0) {
for (int i = 0; i < barGraphTextList.length; i++) {
float startX = mLineSpaceWidth * (i + 1) + mLineWidth * barGraphDataList.length * i + mLeftYWidth + dip2px(10);
//中间有一个间隔
startX = startX + (mLineWidth * barGraphDataList.length) * 1.0f / 2;
float textWidth = mXTextPaint.measureText(barGraphTextList[i]);
canvas.drawText(barGraphTextList[i], startX - textWidth / 2 + dip2px(10), heightMeasureSpec - dip2px(5), mXTextPaint);
}
}
}
//画柱状图
private void drawBarGraph(Canvas canvas) {
if (barGraphDataList != null && barGraphDataList.length > 0) {
for (int i = 0; i < barGraphDataList[0].length; i++) {
float startX = mLineSpaceWidth * (i + 1) + mLineWidth * barGraphDataList.length * i + mLeftYWidth + dip2px(10) + mLineWidth / 2;
int index = 0;
while (index < barGraphDataList.length) {
if (barGraphColorList != null && barGraphColorList.length > index) {
mBarGraphPaint.setColor(barGraphColorList[index]);
mBarGraphTextPaint.setColor(barGraphColorList[index]);
} else {
mBarGraphPaint.setColor(barGraphBgColor);
mBarGraphTextPaint.setColor(barGraphBgColor);
}
float stopY = bottomHeight * 0.9f / maxHeight * barGraphDataList[index][i];
// canvas.drawLine(startX, bottomHeight, startX, bottomHeight - stopY, mBarGraphPaint);
RectF rectF = new RectF(startX, bottomHeight, startX + mLineWidth, bottomHeight - stopY);
Path path = new Path();
//float数组中4个角分别是左上、右上、右下、左下
path.addRoundRect(rectF, new float[]{100, 100, 100, 100, 0, 0, 0, 0}, Path.Direction.CCW);
canvas.drawPath(path, mBarGraphPaint);
// canvas.drawRoundRect(rectF, 100, 100, mBarGraphPaint);
// canvas.drawBitmap(mBitmap, startX - dip2px(15), bottomHeight - stopY - mBitmap.getHeight() + 20, mBarGraphPaint);
String text = String.valueOf(barGraphDataList[index][i]);
String format = (Double.valueOf(text) / 100) + "";
float textWidth = mBarGraphTextPaint.measureText(format, 0, format.length());
// canvas.drawText(format, startX - textWidth / 2 + mLineWidth / 2, bottomHeight - stopY - mBitmap.getHeight() / 2+20, mBarGraphTextPaint);
canvas.drawText(format, startX - textWidth / 2 + mLineWidth / 2, bottomHeight - stopY - 10, mBarGraphTextPaint);
startX += mLineWidth;
index++;
}
}
}
}
/**
* 传进来的数组要求保持数组长度一致
*/
public void setBarGraphData(@NonNull int[][] barGraphDataList, int[] barGraphColorList, String[] barGraphTextList) {
maxHeight=0;
this.barGraphDataList=null;
this.barGraphColorList=null;
this.barGraphTextList=null;
this.barGraphDataList = barGraphDataList;
this.barGraphColorList = barGraphColorList;
this.barGraphTextList = barGraphTextList;
//计算出最高的坐标
for (int i = 0; i < barGraphDataList.length; i++) {
for (int j = 0; j < barGraphDataList[i].length; j++) {
if (maxHeight < barGraphDataList[i][j]) {
maxHeight = barGraphDataList[i][j];
}
}
}
while (maxHeight % 5 != 0) {
maxHeight++;
}
if (barGraphTextList != null && barGraphTextList.length > 0) {
isShowXText = true;
}
if (isShowYText) {
mLeftYWidth = mYTextPaint.measureText(String.valueOf(maxHeight));
}
mBottomXWidth = dip2px(10);
if (isShowXText) {
Paint.FontMetrics fontMetrics = mXTextPaint.getFontMetrics();
mBottomXWidth += ((fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom) * 2;
}
measureWidth(heightMeasureSpec);
invalidate();
}
/**
* 不需要显示XY轴文字
*/
public void setIsShowXYText(boolean isShowXText, boolean isShowYText) {
this.isShowXText = isShowXText;
this.isShowYText = isShowYText;
}
/**
* 设置圆柱的宽度
*/
public void setBarGraphWidth(int width) {
this.mLineWidth = dip2px(width);
measureWidth(heightMeasureSpec);
mBarGraphPaint.setStrokeWidth(mLineWidth);
invalidate();
}
/**
* 设置圆柱之间的间隔
*/
public void setBarGraphDistance(int distance) {
this.mLineSpaceWidth = dip2px(distance);
measureWidth(heightMeasureSpec);
invalidate();
}
/**
* 设置X轴文字大小
*/
public void setXTextSize(float textSize) {
this.mXTextSize = sp2px(textSize);
mXTextPaint.setTextSize(mXTextSize);
invalidate();
}
/**
* 设置Y轴的文字大小
*/
public void setYTextSize(float textSize) {
this.mYTextSize = sp2px(textSize);
mYTextPaint.setTextSize(mYTextSize);
invalidate();
}
//开始动画
public void startAnimation(int... duration) {
if (barGraphDataList == null || barGraphDataList.length <= 0)
return;
AnimatorSet animationSet = new AnimatorSet();
for (int i = 0; i < barGraphDataList.length; i++) {
final int finalI = i;
for (int j = 0; j < barGraphDataList[i].length; j++) {
ValueAnimator animator = ValueAnimator.ofInt(0, barGraphDataList[i][j]);
final int finalJ = j;
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
barGraphDataList[finalI][finalJ] = (int) animation.getAnimatedValue();
invalidate();
}
});
animationSet.playTogether(animator);
}
}
animationSet.setInterpolator(new DecelerateInterpolator());
animationSet.setDuration(duration != null ? duration[0] : this.duration);
animationSet.start();
}
/**
* sp转px
*/
public int sp2px(float spValue) {
final float fontScale = mContext.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
}
/**
* dp转px
*/
public int dip2px(float dpValue) {
final float scale = mContext.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
BarGraphView styleable 文件
<declare-styleable name="BarGraphView">
<!--柱状图的颜色-->
<attr name="bar_graph_bg_color" format="color" />
<!--柱状图之间的间隔-->
<attr name="bar_graph_distance" format="dimension" />
<!--柱状图的宽度-->
<attr name="bar_graph_width" format="dimension" />
<!-- xy轴线和文字的颜色-->
<attr name="bar_graph_xy_line_text_color" format="color" />
<!--x轴文字的大小-->
<attr name="bar_graph_x_textSize" format="dimension" />
<!--y轴文字大小-->
<attr name="bar_graph_y_textSize" format="dimension" />
<!--动画播放时长-->
<attr name="bar_graph_animation_duration" format="integer" />
<!--是否显示X轴的文字-->
<attr name="bar_graph_isShow_X_text" format="boolean"/>
<!--是否显示Y轴的文字-->
<attr name="bar_graph_isShow_Y_text" format="boolean"/>
</declare-styleable>
布局文件
<com.dingler.water.cloud.functionbag.drainersmanager.watermonitoring.analysis.view.zz.BarGraphView
android:id="@+id/bargraphview1"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_200"
app:bar_graph_bg_color="#ff6547"
app:bar_graph_distance="10dp"
app:bar_graph_width="20dp"
app:bar_graph_x_textSize="15sp"
app:bar_graph_y_textSize="14sp" />
引用
private void initFacilityYearData(int position) {
//两组数据
int[][] data1 = new int[2][12];
int[][] data2 = new int[2][12];
for (int i = 0; i < facilityYearData.size(); i++) {
List<FacilityYearData.DataBean.AbnormalRateListBean> abnormalRateList = facilityYearData.get(i).getAbnormalRateList();
for (int j = 0; j < abnormalRateList.size(); j++) {
double aDouble = Double.valueOf(abnormalRateList.get(j).getAbnormalRate());
double aDouble2 = Double.valueOf(abnormalRateList.get(j).getOnlineRate());
data1[i][j] = new Double(aDouble * 100).intValue();
data2[i][j] = new Double(aDouble2 * 100).intValue();
}
}
if (position == 0) {
viewBinding.bargraphview1.setBarGraphData(data1, colorData, textData);
} else {
viewBinding.bargraphview1.setBarGraphData(data2, colorData, textData);
}
viewBinding.bargraphview1.setBarGraphDistance(20);
viewBinding.bargraphview.startAnimation(1000);
}
