Android---手把手教你撸一个自定义条形图

之前从某网上看了一个描述自定义条形图的视频教程,因为没有源码,所以自己记录了一下,方便以后用到,初学者也可以互相学习.

废话不多说,首先看下效果图:(可能界面比较low哈....)

我们先看一下 画图三要素的介绍

Canvas : 画布, 绘制Bitmap操作;

Paint : 绘制所需的画笔(一般用来规定颜色,样式等);

Path : 路径 轨迹;

那么接下来直接上代码,代码中都有注释,我就不过度赘述了;

设置条形图的样式在styles.xml中:

<!--自定义条形图样式-->
<declare-styleable name="ChartStyle">
    <attr name="graphTitle" format="string"></attr>
    <attr name="xAxisName" format="string"></attr>
    <attr name="yAxisName" format="string"></attr>
    <attr name="axisTextSize" format="dimension|integer"></attr>
    <attr name="axisTextColor" format="color|integer"></attr>
</declare-styleable>

创建抽象类BaseView继承自View

public abstract class BaseView extends View {

    private Context mContext;
    //画笔
    private Paint mPaint;

    //视图的宽
    public int width;
    //视图的高
    public int height;

    //原始起点的X,Y坐标值
    public int originalX = 80;
    public int originalY = 500;


    //X,Y轴等份划分
    public int axisDividedSizeX;
    public int axisDividedSizeY;

    //第一个维度为值,第二个维度为颜色
    public int[][] columnInfo;

    //图表标题
    private String mGraphTitle;
    //X轴Name
    private String mXAxisName;
    //Y轴Name
    private String mYAxisName;

    //坐标轴上字体的大小
    private float mAxisTextSize;
    //坐标轴字体的颜色
    public int mAxisTextColor;

    public BaseView(Context context) {
        this(context, null);
    }

    public BaseView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, -1);
    }

    /**
     * 设置X轴的刻度份数
     * @param axisDividedSizeX
     */
    public void setAxisDividedSizeX(int axisDividedSizeX) {
        this.axisDividedSizeX = axisDividedSizeX;
    }

    /**
     * 设置Y轴的刻度份数
     * @param axisDividedSizeY
     */
    public void setAxisDividedSizeY(int axisDividedSizeY) {
        this.axisDividedSizeY = axisDividedSizeY;
    }

    /**
     * 设置条形图的数值和颜色
     * @param columnInfo
     */
    public void setColumnInfo(int[][] columnInfo) {
        this.columnInfo = columnInfo;
    }

    public BaseView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;

        //获取自定义样式
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ChartStyle);

        //取出自定义的设置
        mGraphTitle = typedArray.getString(R.styleable.ChartStyle_graphTitle);
        mXAxisName = typedArray.getString(R.styleable.ChartStyle_xAxisName);
        mYAxisName = typedArray.getString(R.styleable.ChartStyle_yAxisName);

        mAxisTextColor = typedArray.getColor(R.styleable.