自定义View之柱状图

一.效果图

因项目需要自定义一个柱状图View及饼状图View，本文先主要介绍下自定义柱状图View，饼状图View下一篇介绍，主要做个学习积累。

实现也很简单，大家可以先看下动态效果图：

二、实现步骤

代码也比较简单，就是遵循自定义View步骤顺序完成相应绘制，不清楚可以参考鸿祥大神的博客http://blog.csdn.net/lmj623565791。

1.定义HistogramView继承View，给HistogramView添加自定义属性：

以在value目录下找到attrs.xml文件,在文件中可以定义HistogramView用到的属性，比如颜色、字体大小等属性。文件内容如下：

<declare-styleable name="HistogramView">
        <attr name="histogramItemWidth" format="dimension"/><!-- 柱状图项宽度 -->
        <attr name="topTextColor" format="color"/><!-- 顶部文字颜色 -->
        <attr name="topTextSize" format="dimension"/><!-- 顶部文字大小 -->
        <attr name="axesColor" format="color"/><!-- 坐标轴颜色 -->
        <attr name="axesTextColor" format="color"/><!-- 坐标轴文字颜色 -->
        <attr name="axesTextSize" format="dimension"/><!-- 坐标轴文字大小 -->
    </declare-styleable>

2.在.xml布局文件中对自定义的属性进行设置：

<com.cyj.histogramview.HistogramView
        android:id="@+id/histogramView"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:layout_centerInParent="true"
        android:paddingTop="40dp"
        android:paddingLeft="10dp"
        android:layout_centerHorizontal="true"
        app:histogramItemWidth="20dp"
        app:axesColor="@color/black"
        app:axesTextColor="@color/mainColor"
        app:axesTextSize="12sp"
        app:topTextColor="@color/accentColor"
        app:topTextSize="13sp"
        android:background="@color/white"/>

3.在HistogramView的构造方法中获得自定义的属性，主要代码如下：

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

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.HistogramView);
        histogramItemWidth = typedArray.getDimension(R.styleable.HistogramView_axesTextSize, dp2px(20));
        axesColor = typedArray.getColor(R.styleable.HistogramView_axesColor, getResources().getColor(R.color.accentColor));
        axesTextColor = typedArray.getColor(R.styleable.HistogramView_axesTextColor, getResources().getColor(R.color.accentColor));
        axesTextSize = typedArray.getDimension(R.styleable.HistogramView_axesTextSize, sp2px(12));
        topTextColor = typedArray.getColor(R.styleable.HistogramView_topTextColor, getResources().getColor(R.color.accentColor));
        topTextSize = typedArray.getDimension(R.styleable.HistogramView_topTextSize, sp2px(12));
        typedArray.recycle();

        init();
    }

4.初始化画笔及一些必要变量，代码如下：

private void init() {
        ani = new HistogramAnimation();
        ani.setDuration(2000);
        mMargin = dp2px(20);

        //初始化坐标轴画笔
        mAexsPaint = new Paint();
        mAexsPaint.setColor(axesColor);
        mAexsPaint.setAntiAlias(true);
        //坐标轴文字画笔
        mAexsTextPaint = new TextPaint();
        mAexsTextPaint.setStyle(Paint.Style.FILL);
        mAexsTextPaint.setColor(axesTextColor);
        mAexsTextPaint.setTextSize(axesTextSize);
        mAexsTextPaint.setAntiAlias(true);
        mAexsTextPaint.setTextAlign(Paint.Align.LEFT);
        //顶部文字画笔
        mTopTextPaint = new TextPaint();
        mTopTextPaint.setStyle(Paint.Style.FILL);
        mTopTextPaint.setColor(topTextColor);
        mTopTextPaint.setTextSize(topTextSize);
        mTopTextPaint.setAntiAlias(true);
        mTopTextPaint.setTextAlign(Paint.Align.LEFT);
        //柱状图画笔
        mHistogramPaint = new Paint();
        mHistogramPaint.setAntiAlias(true);// 抗锯齿效果
        mHistogramPaint.setStyle(Paint.Style.FILL);
        mHistogramPaint.setColor(Color.parseColor("#9e95e9f3"));
    }

5.重写onDraw方法。在onDraw方法中完成柱状图的绘制。代码如下：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mWidth = getWidth() - getPaddingLeft() - getPaddingRight();
        mHeight = getHeight();
        histogramHeight = mHeight - bottomAxesTextHeight - getPaddingTop();
        mMarginTop = getPaddingTop();

        columWidth = (int) ((mWidth - mMargin) / columCount);//项的宽度

        drawAxesLineAndAxes(canvas);//绘制坐标线及y轴刻度

        drawAxesText(canvas);//绘制x轴值

        drawHistogramItem(canvas);//绘制柱状图及柱状图上文字

    }

主要完全以下几个部分的绘制：

a.绘制坐标线及y坐标轴上的刻度，代码如下：

private void drawAxesLineAndAxes(Canvas canvas) {
        // 绘制底部的线条
        canvas.drawLine(0, mHeight - bottomAxesTextHeight, mWidth, mHeight - bottomAxesTextHeight, mAexsPaint);
        // 绘制底部的线条
        canvas.drawLine(mMargin, mMarginTop, mMargin, mHeight - bottomAxesTextHeight + mMargin, mAexsPaint);

        canvas.drawText("0", mMargin / 2, mHeight - bottomAxesTextHeight, mAexsTextPaint);
        canvas.drawText(maxValue + "", mMargin / 2, mHeight - bottomAxesTextHeight - histogramHeight, mAexsTextPaint);
    }

b.绘制x轴值 

private void drawAxesText(Canvas canvas) {
        for (int i = 0; i < columCount; i++) {
            // 设置底部的文字
            float textWidth = mAexsTextPaint.measureText(nameLists.get(i));
            if (textWidth > columWidth) {
                textWidth = columWidth / 2;
            } else {
                textWidth = (columWidth - textWidth) / 2;
            }
            TextPaint textPaint = new TextPaint();
            textPaint.setColor(axesTextColor);
            textPaint.setAntiAlias(true);
            textPaint.setTextSize(axesTextSize);
            StaticLayout layout = new StaticLayout(nameLists.get(i), textPaint, columWidth,
                    Layout.Alignment.ALIGN_NORMAL, 1.0F, 0.0F, false);
            canvas.save();
            canvas.translate((i) * columWidth + textWidth + mMargin, mHeight - bottomAxesTextHeight + mMargin / 2);
            layout.draw(canvas);
            canvas.restore();//别忘了restore

        }

    }

c.绘制柱状图及柱状图上的该项的值，代码如下：

private void drawHistogramItem(Canvas canvas) {
        // 绘制矩形
        if (aniProgress != null && aniProgress.size() > 0) {
            for (int i = 0; i < aniProgress.size(); i++) {// 循环遍历将柱状图形画出来
                int value = aniProgress.get(i);

                float left = (columWidth - histogramItemWidth) / 2 + i * columWidth + mMargin;
                float right = left + histogramItemWidth;
                float t = (maxValue) * 1000;
                float top = histogramHeight - histogramHeight * (value / t) + mMarginTop;
                float bottom = histogramHeight + mMarginTop;

                //进行paint设颜色
                if (i % 4 == 0) {
                    mHistogramPaint.setColor(getResources().getColor(R.color.subColor));
                    mTopTextPaint.setColor(getResources().getColor(R.color.subColor));
                } else if (i % 4 == 1) {
                    mHistogramPaint.setColor(getResources().getColor(R.color.subColor1));
                    mTopTextPaint.setColor(getResources().getColor(R.color.subColor1));
                } else if (i % 4 == 2) {
                    mHistogramPaint.setColor(getResources().getColor(R.color.subColor2));
                    mTopTextPaint.setColor(getResources().getColor(R.color.subColor2));
                } else if (i % 4 == 3) {
                    mHistogramPaint.setColor(getResources().getColor(R.color.subColor3));
                    mTopTextPaint.setColor(getResources().getColor(R.color.subColor3));
                }
                RectF rect1 = new RectF(left, top, right, bottom);// 柱状图的形状

                canvas.drawRoundRect(rect1, (histogramItemWidth) / 2, (histogramItemWidth) / 2, mHistogramPaint);

                //设置柱形上面的文字
                float textWidth = mTopTextPaint.measureText(countLists.get(i));
                if (textWidth > columWidth) {
                    textWidth = 0;
                } else {
                    textWidth = (columWidth - textWidth) / 2;
                }
                canvas.drawText(countLists.get(i) + "", (i) * columWidth + textWidth + mMargin, top - dp2px(10), mTopTextPaint);
            }
        }
    }

在这一步不断改变柱状图的高度，使柱状图有个动画效果，使高度不断改变可以通过如下动画类实现：

/**
     * 集成animation的一个动画类
     */
    private class HistogramAnimation extends Animation {
        protected void applyTransformation(float interpolatedTime,
                                           Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            for (int i = 0; i < aniProgress.size(); i++) {
                aniProgress.set(i, (int) (Integer.parseInt(countLists.get(i)) * 1000 * interpolatedTime));
            }
            invalidate();
        }
    }

三、使用

在Activity中初始化柱状图数据，并开启动画效果：

ArrayList<String> nameLists = new ArrayList<>();
        ArrayList<String> countLists = new ArrayList<>();
        for (int i=0;i<8;i++){
            nameLists.add("项"+i);
            countLists.add(""+new Random().nextInt(20));
        }

        histogramView.start(nameLists,countLists);
    }
}

上面已经贴出了实现的关键代码，完整demo可以参考：https://github.com/yjchen920927/HistogramView