之前从某网上看了一个描述自定义条形图的视频教程,因为没有源码,所以自己记录了一下,方便以后用到,初学者也可以互相学习.
废话不多说,首先看下效果图:(可能界面比较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.ChartStyle_axisTextColor