初识View
在安卓中所有的样式都可以说是一个视图，TextView，Button，ImageView...这些官方已经给出的view已经无法满足我们的日常生活所需了，这个时候，我们就可以自定义View，随心所欲创建属于我们自己的View。那么我们应该怎么去做呢，首先要干嘛，其次又干嘛，最后干嘛呢，这都是过程中的一个节点。下面呢我们就从第一步开始。
一张图认识View
在这张图中坐标系和我们数学中的不一样，这里的Y轴下方是正数，X轴右方是正数，其中的View（浅蓝色背景）为我们自定义的View，MotionEvent是手指点击的位置，我们对View进行移动，也是根据MotionEvent返回的xy坐标点进行绘制的。
View的坐标系
注意：View的坐标系统是相对于父控件而言的.
代码语言：javascript复制getTop(); //获取子View左上角距父View顶部的距离
getLeft(); //获取子View左上角距父View左侧的距离
getBottom(); //获取子View右下角距父View顶部的距离
getRight(); //获取子View右下角距父View左侧的距离MotionEvent中 get 和 getRaw 的区别
代码语言：javascript复制event.getX(); //触摸点相对于其所在组件坐标系的坐标
event.getY();
event.getRawX(); //触摸点相对于屏幕默认坐标系的坐标
event.getRawY();这里只是讲解了一些View的独有关于坐标的方法，因为在平常自定义的时候了解这些方法就已经可以对View进行操作了，比如说拖拽，拉伸，收缩等。
自定义View实战
自定义View如何做，怎么做，往往都是第一步比较难，之后对View美化就相对来说比较简单了。下面我写了几个步骤
- 继承View
- MyView extends View重写里面重要的3-4个构造方法
- onMeasure测量控件
- onMeasure(int widthMeasureSpec, int heightMeasureSpec) 获取屏幕，自定义View父组件尺寸等。
- onDraw绘制View
- onDraw(Canvas canvas)使用canvas去绘制View，并展示出来
我们就根据上面步骤一一解答
继承View
我这里写了三个构造方法，也可以写四个，但如果只写一个会出现问题，比如说在XML文件中使用会报错
代码语言：javascript复制public MyView(Context context) {
super(context);
init();
}
public MyView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
this.context = context;
init();
}
public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}onMeasure测量控件
代码语言：javascript复制@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//以下大小均为获取父布局尺寸
measureWidth = MeasureSpec.getSize(widthMeasureSpec);
measureHeight = MeasureSpec.getSize(heightMeasureSpec);
maxWidth = getMaxWidth(context);
maxHeight = getMaxHeight(context);
Log.e("measure", maxWidth " -- " maxHeight);
measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
Log.e("measure", "measureWidth:" measureWidth "measureHeight:" measureHeight "measureWidthMode:" measureWidthMode "measureHeightMode:" measureHeightMode);
}
// 获取最大宽度
public int getMaxWidth(Context context) {
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
return dm.widthPixels;
}
// 获取最大高度
public int getMaxHeight(Context context) {
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
return dm.heightPixels;
}widthMeasureSpec，heightMeasureSpec 这两个参数不是简单的整数类型，而是2位整数(模式类型)和30位整数(实际数值) 的组合，所以我们要通过MeasureSpec 获取模式int值 和 获取数值int值。这个时候才是我们想要的尺寸，比如说屏幕是1080 * 1920，获取的值也就是1080 * 1920。
onDraw绘制View
这个方法就厉害了，所有的绘制工作都是里面的canvas去完成，canvas翻译过来是帆布的意思，对我们来说就是画布，画布有了，还差画笔，有笔有布有多彩墨水才能画出大好河山嘛，这里先介绍画笔Paint
1:初始画笔 ----- Paint的使用
代码语言：javascript复制canvas.drawCircle(100, 100, 50, paint) 这是一个要绘制圆形图片的代码，两个100分别是XY轴坐标，50是半径，paint是画笔，他的意思是说，我要画一个圆点是（100,100）半径是50的圆。样式是paint，这个时候我们就要对paint去绘制，官方文档上画笔有 100 个左右的公开方法，常用方法标出颜色。下图是网页提供的表格。
返回值 | 简介 |
|---|---|
int | getFlags() 获取画笔相关的一些设置(标志)。 |
int | getFlags() 获取画笔相关的一些设置(标志)。 |
void | setFlags(int flags) 设置画笔的标志位。 |
void | set(Paint src) 复制 src 的画笔设置。 |
void | reset() 将画笔恢复为默认设置。 |
int | getAlpha() 只返回颜色的alpha值。 |
void | setAlpha(int a) 设置透明度。 |
int | getColor() 返回画笔的颜色。 |
void | setColor(int color) 设置颜色。 |
void | setARGB(int a, int r, int g, int b) 设置带透明通道的颜色。 |
float | getStrokeWidth() 返回描边的宽度。 |
void | setStrokeWidth(float width) 设置线条宽度。 |
Paint.Style | getStyle() 返回paint的样式，用于控制如何解释几何元素（除了drawBitmap，它总是假定为FILL_STYLE）。 |
void | setStyle(Paint.Style style) 设置画笔绘制模式(填充，描边，或两者均有)。 |
Paint.Cap | getStrokeCap() 返回paint的Cap，控制如何处理描边线和路径的开始和结束。 |
void | setStrokeCap(Paint.Cap cap) 设置线帽。 |
Paint.Join | getStrokeJoin() 返回画笔的笔触连接类型。 |
void | setStrokeJoin(Paint.Join join) 设置连接方式。 |
float | getStrokeMiter() 返回画笔的笔触斜接值。用于在连接角度锐利时控制斜接连接的行为。 |
void | setStrokeMiter(float miter) 设置画笔的笔触斜接值。用于在连接角度锐利时控制斜接连接的行为。 |
PathEffect | getPathEffect() 获取画笔的 patheffect 对象。 |
PathEffect | setPathEffect(PathEffect effect) 设置 Path 效果。 |
boolean | getFillPath(Path src, Path dst) 将任何/所有效果（patheffect，stroking）应用于src，并将结果返回到dst。 结果是使用此画笔绘制绘制 src 将与使用默认画笔绘制绘制 dst 相同（至少从几何角度来说是这样的）。 |
上面canvas.drawCircle(100, 100, 50, paint)和paint的创建 都是写在onDraw方法里的。上整体代码
代码语言：javascript复制@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//样式一
canvas.drawCircle(200, 200, 100, paint);
//样式二
Path arcPath = new Path();
arcPath.addArc(new RectF(100, 100, 500, 500), 120, 300);
// Paint paint = new Paint();
// paint.setStyle(Paint.Style.STROKE);
// canvas.drawPath(arcPath, paint);
Path borderPath = new Path();
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(100);
paint.getFillPath(arcPath, borderPath); // getFillPath
// 测试画笔，注意设置为 STROKE
Paint testPaint = new Paint();
testPaint.setStyle(Paint.Style.STROKE);
testPaint.setStrokeWidth(2);
testPaint.setAntiAlias(true);
// 绘制通过 getFillPath 获取到的 Path
canvas.drawPath(borderPath, testPaint);
}
好了，到这里对canvas画简单图案是告一段落了，那么我们之前获取到的尺寸是干嘛用的呢，下面我们对拖拽进行讲解，拖拽其实就是down，move，up对着三者的一个解析，当我们手指按下的时候将会出发down，手指一动时触发move，手指抬起时触发up。那么我们怎么去监听他的，有方法，那就是onTouchEvent，触摸方法的事件分发机制我们下节讲。这里我们直接上代码
拖拽图案
代码语言：javascript复制@Override
public boolean onTouchEvent(MotionEvent event) {
//手指按下
int action = event.getAction();
//获取手机触摸的坐标
int x = (int) event.getX();
int y = (int) event.getY();
switch (action){
case MotionEvent.ACTION_DOWN://按下,获取小球初始的位置
startLeft = getLeft();
startRight = getRight();
startTop = getTop();
startBottom = getBottom();
lastX = x;
lastY = y;
break;
case MotionEvent.ACTION_MOVE://移动,小球跟随手指的移动
Log.e("event","getRawX():" event.getRawX() " getRawY():" event.getRawY());
Log.e("event","getX():" event.getX() " getY():" event.getY());
int offsetX = x - lastX;
int offsetY = y - lastY;
layout(getLeft() offsetX,getTop() offsetY,
getRight() offsetX,getBottom() offsetY);
break;
case MotionEvent.ACTION_UP://当手指抬起时,回到小球初始的位置
// layout(startLeft, startTop, startRight, startBottom);
break;
}
return true;
}
