android 自定义View 继承View
- 个人博客地址(https://wangchongwei.github.io/) *
上篇关于自定义View的介绍
接下来将会针对自定义View三种情况一一实现。
源码地址(https://github.com/wangchongwei/customView)
最后实现效果如下图:
custom_view_final.jpg
继承View
创建一个class MyView 继承View
目标是写一个折线图
现在res/values下面新建一个attrs.xml文件,来申明我们需要的属性。
先新建一个clas 继承View, 并初始化几个构造函数
public class MyView extends View {
// 代码生成时,才会调用该构造函数
public MyView(Context context) {
super(context);
this.context = context;
}
public MyView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
// xml配置时,会调用这个生命周期
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
initData(attrs);
}
// 做初始化配置 获取各种颜色、尺寸,还有自定义的一些属性。
private void initData(AttributeSet attrs) {
Log.d(TAG, "initData: ");
// 获取xml中配置的数据
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyView);
paintColor = array.getColor(R.styleable.MyView_axieColor, context.getResources().getColor(R.color.black));
// 画笔初始化
paint = new Paint();
paint.setColor(context.getResources().getColor(R.color.black));
paint.setTextSize(40);
paint.setStrokeWidth(10); // 线条粗细
}
}
在onMeasure函数中对尺寸做约束
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
Log.d(TAG, "onMeasure: ");
int height = measuretDimension(defaultHeight, heightMeasureSpec);
int width = measuretDimension(0, widthMeasureSpec);
top = 0;
left = 0;
bottom = top + height;
right = left + width;
setMeasuredDimension(width, height);
}
/**
* 测量实际尺寸
* @param defaultSize: 默认尺寸
* @param measureSpec: 测量规格
* @return
*/
public int measureDimension(int defaultSize, int measureSpec) {
int resultSize = defaultSize;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
switch (specMode) {
// 没有做限制,取默认值
case MeasureSpec.UNSPECIFIED:
resultSize = defaultSize;
break;
// WRAP
case MeasureSpec.AT_MOST:
// 要取默认值和测量值中较小值
// 当默认值为0时,取最大值, 即宽充满屏幕
resultSize = defaultSize == 0 ?specSize : Math.min(defaultSize, specSize);
break;
// 具体值 或 MATCH
case MeasureSpec.EXACTLY:
resultSize = specSize;
break;
default:
break;
}
return resultSize;
}
先绘制两个轴线
注意canvas.draw..()方法,中的位置参数都是相对定位尺寸,都是相对于该视图左上角的坐标定位,而onLayout中的四个位置参数都是相对于屏幕左上角。
这两个里的坐标不要弄混。
/** 绘制两条轴线 */
private void drawXY(Canvas canvas) {
Log.d(TAG, "drawXY: ");
// 绘制x轴
canvas.drawLine(left + 20, bottom, right, bottom, paint);
// 绘制y轴
canvas.drawLine(left + 20, top, left + 20, bottom, paint);
}
在MainActivity中配置该视图
我们直接运行,效果如下:
x,y轴就画好了。但很明显我们设置的padding没起作用,因为padding是需要我们自己处理的。
新增一个方法初始化这些尺寸数据
/**
* 尺寸数据初始化
*/
private void initSize () {
// 获取padding尺寸
paddingLeft = getPaddingLeft();
paddingTop = getPaddingTop();
paddingRight = getPaddingRight();
paddingBottom = getPaddingBottom();
StringBuilder sb = new StringBuilder();
sb.append("paddingLeft =").append(paddingLeft)
.append("paddingTop =").append(paddingTop)
.append("paddingRight =").append(paddingRight)
.append("paddingBottom =").append(paddingBottom);
Log.d(TAG, "initSize: ".concat(sb.toString()));
top = paddingTop;
left = paddingLeft;
bottom = height - top - paddingBottom;
right = width - left;
setMeasuredDimension(width, height);
}
这样我们就对padding做了处理,接下来接着绘制我们需要的图形。
我们之前绘制了两个轴,xy,但我们平常绘制的轴都会有箭头,我们再在x轴右侧、y轴上侧绘制两个箭头
private void drawArrow(Canvas canvas) {
Path path = new Path();
// 先绘制x轴三角
//先移动到三角形一个点
path.moveTo(right-20, bottom + 20);
path.lineTo(right-20, bottom - 20); // 画线
path.lineTo(right, bottom); // 画线
path.close(); // 图形闭合
canvas.drawPath(path, paint);
// 绘制y轴三角
path.moveTo(left - 20, top + 20);
path.lineTo(left + 20, top + 20);
path.lineTo(left, top);
path.close();
canvas.drawPath(path, paint);
}
这里主要用到了drawPath函数。其实canvas对象还有很多其他的绘制图形的方法。
设置数据并绘制点
我们已经完成了绘制两条轴线,现在要开始绘制数据了。
首先我们要确认标准线,x轴的标准线肯定就是xValue的值,
但y轴的标准线是不定的,我们要先找出最大值,确定几条标准线,确定每条标准线的值。
我们先假设我们的值在0-100以内,取5条标准线,每条间距20.
先设置两个数据
// 数据
private float[] yValue;
private String[] xValue;
private int lineNum = 5;
/** 设置数据并刷新 */
public void setData(float[]yValue, String[]xValue) {
this.yValue = yValue;
this.xValue = xValue;
postInvalidate();
}
/** 设置标准线数目 */
public void setData(int lineNum) {
this.lineNum = lineNum;
postInvalidate();
}
然后我们开始绘制标准线、各个点
/** 绘制各个点 */
private void drawPoint(Canvas canvas) {
if(xValue == null || yValue == null) return;
// 先绘制5条y轴标准线位置 取高度的90%作为图线的最高。
float maxHeight = (float)((bottom - top) * 0.9);
float itemHeight = maxHeight / 5;
for(int i = 1; i <=5; i ++) {
canvas.drawLine(left, bottom - itemHeight * i, left + 15, bottom - itemHeight * i, paint);
}
// 再绘制x轴的数据, x轴线的标准值就是x轴的值,数目也是xValue的值
float maxWidth = (float)((right - left) * 0.9);
float itemWidth = ((float) (maxWidth * 1.0)) / xValue.length;
for (int i = 1; i <= xValue.length; i ++) {
float x = left + itemWidth * i;
// 绘制轴线
canvas.drawLine(x, bottom, x, bottom - 15, paint);
// 绘制点
float y = bottom - maxHeight * yValue[i-1] / yMax;
canvas.drawCircle(x, y, 5, paint);
}
}
而在MainActivity.kt中,我们可以这样使用
// kotlin语法
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var xValue = arrayOf("一", "二", "san")
var yValue = floatArrayOf(70f, 80f, 90f);
myView.setData(yValue, xValue);
}
}
此时的实现效果:
chat.jpg
现在我们完成了图形的大致绘制,但在x、y轴却没有一些文字说明,接下来我们就要加上这些
绘制x、y轴标准线值,将各个点连接起来。
/** 绘制各个点 */
private void drawPoint(Canvas canvas) {
if(xValue == null || yValue == null) return;
// 先绘制5条y轴标准线位置 取高度的90%作为图线的最高。
float maxHeight = (float)((bottom - top) * 0.9);
float itemHeight = maxHeight / 5;
int itemValue = yMax / 5;
for(int i = 1; i <=5; i ++) {
canvas.drawLine(left, bottom - itemHeight * i, left + 15, bottom - itemHeight * i, paint);
// 绘制y轴标准值
canvas.drawText(itemValue * i + "", left - 90, bottom - itemHeight * i, paint);
}
// 再绘制x轴的数据, x轴线的标准值就是x轴的值,数目也是xValue的值
float maxWidth = (float)((right - left) * 0.9);
float itemWidth = ((float) (maxWidth * 1.0)) / xValue.length;
for (int i = 1; i <= xValue.length; i ++) {
float x = left + itemWidth * i;
// 绘制轴线
canvas.drawLine(x, bottom, x, bottom - 15, paint);
// 绘制点
float y = bottom - maxHeight * yValue[i-1] / yMax;
canvas.drawCircle(x, y, 10, paint);
// 绘制点与点之间的连线
if(lastX > 0f) {
canvas.drawLine(lastX, lastY, x, y, paint);
}
// 绘制x轴标准值
canvas.drawText(xValue[i-1], x, bottom + 50, paint);
lastX = x;
lastY = y;
}
}
最后实现效果如下图:
custom_view_final.jpg