柱状对比图可滑动

自定义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 文件

布局文件

引用

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