自定義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;
/**
* 柱狀圖執(zhí)行動畫的長度
*/
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軸的坐標(biāo)畫筆
*/
private Paint mXYLinePaint;
/**
* 當(dāng)前柱狀圖的最大高度
*/
private int maxHeight;
/**
* 實際高度
*/
private int heightMeasureSpec;
/**
* 實際寬度
*/
private int widthMeasureSpec;
/**
* 圓柱占用的高度
*/
private float bottomHeight;
//保存柱狀圖的數(shù)據(jù)
private int[][] barGraphDataList;
//保存柱狀圖的顏色
private int[] barGraphColorList;
//保存柱狀圖X軸信息
private String[] barGraphTextList;
//Y軸線離左邊的距離宪睹，以便繪制Y軸數(shù)字
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));
//執(zhí)行動畫的時間
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);
/**
* 系統(tǒng)使用一個arraypool池來存放typearray 用完及時銷毀以便復(fù)用
* */
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軸坐標(biāo)寫字
drawXYText(canvas);
//畫柱狀圖
drawBarGraph(canvas);
}
//給Y軸和X軸寫相應(yīng)的文字
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數(shù)組中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++;
}
}
}
}
/**
* 傳進來的數(shù)組要求保持?jǐn)?shù)組長度一致
*/
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;
//計算出最高的坐標(biāo)
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;
}
/**
* 設(shè)置圓柱的寬度
*/
public void setBarGraphWidth(int width) {
this.mLineWidth = dip2px(width);
measureWidth(heightMeasureSpec);
mBarGraphPaint.setStrokeWidth(mLineWidth);
invalidate();
}
/**
* 設(shè)置圓柱之間的間隔
*/
public void setBarGraphDistance(int distance) {
this.mLineSpaceWidth = dip2px(distance);
measureWidth(heightMeasureSpec);
invalidate();
}
/**
* 設(shè)置X軸文字大小
*/
public void setXTextSize(float textSize) {
this.mXTextSize = sp2px(textSize);
mXTextPaint.setTextSize(mXTextSize);
invalidate();
}
/**
* 設(shè)置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轉(zhuǎn)px
*/
public int sp2px(float spValue) {
final float fontScale = mContext.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
}
/**
* dp轉(zhuǎn)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) {
//兩組數(shù)據(jù)
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);
}
