Android自定义View(一) -- 初识

前言：

公司近来业务调整，学习iOS开发有段时间，第一个iOS项目正在被库克百般蹂躏，审核一直进行中。
通过iOS和Android开发的对比，能体会到两种开发中不同的理念，例如iOS系统控件及动画，自带绚丽流程效果，这让Android开发人员欣羡不已。
在当前很多公司，iOS和Android共用同一套设计图的情况下，iOS中很多系统控件可以实现的效果，在Android都需要开发者自己去实现，这里就少不了自定义View。
但是实际开发中，很少在自定义View中下功夫，很多效果都是根据网友开源项目修改，虽然说要避免重复造轮子，但是起码基础要掌握好，才会在面对新需求前不慌不乱，
所以趁着项目间歇期，将之前一直欠缺的自定义View部分，一步一步提升起来。

---

本文计划根据HenCoder系列文章进行学习，所以代码风格及博文素材可能会摘自其中。

---

自定义概括：

自定义实现要重写onDraw方法，其中关键是使用Canvas绘制出要实现的View。

• Canvas绘制：
  Canvas绘制方法：通过drawxxx()各种方法绘制相应形状图案；
  Canvas 的辅助类方法：负责范围裁切和实现图形的几何变换。
• Paint
  Paint的功能很强大，但是一开始我们只需要了解它的基本功能，可以设置线条粗细，实心空心，线条颜色等等，负责绘制的View的各种属性

自定义开始：onDraw()

自定义绘制的上手非常容易：提前创建好 Paint 对象，重写 onDraw()，把绘制代码写在 onDraw() 里面，就是自定义绘制最基本的实现。大概就像这样：

image.png

就这么简单。所以关于 onDraw() 其实没什么好说的，一个很普通的方法重写，唯一需要注意的是别漏写了 super.onDraw()。

Canvas.drawXXX() 和 Paint 基础

Canvas下所有以draw开头的方法，例如 drawLines()、drawColor()、drawCircle()。
Paint使用以下常用方法：
paint1.setAntiAlias(true); //开启抗锯齿
paint1.setColor(Color.parseColor("#000000")); //设置线条颜色
paint1.setStrokeWidth(50); //设置线条宽度
paint1.setStyle(Paint.Style.STROKE); //设置空心

1. canvas.drawColor(int color）绘制颜色

canvas.drawColor()不需要Paint，使用drawColor()设置颜色

image.png

image.png

2. canvas.drawRect(RectF rect, Paint paint) / drawRect(Rect r, Paint paint) / drawRect(float left, float top, float right, float bottom, Paint paint) 画矩形,共三个重载方法，用法相似

image.png

left、top为矩形左上角坐标， right、bottom为右下角坐标

image.png

3. canvas.drawCircle(float cx, float cy, float radius, Paint paint)画圆

cx,cy为圆心坐标，radius圆半径
设置Paint

image.png

画圆

image.png

image.png

4. canvas.drawPoint(float x, float y, Paint paint) 画点

x,y为点坐标， 点的大小通过 paint.setStrokeWidth(width) 来设置；点的形状通过 paint.setStrokeCap(cap) 来设置：ROUND 画出来是圆形的点，SQUARE 或 BUTT 画出来是方形的点

image.png

image.png

画点还有两个方法

drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint)

可以批量画点，数组pts内为多个点的坐标，offset为跳过数组中前几个点，count表示跳过offset个点后开始画几个点。

5. canvas.drawOval(RectF oval, Paint paint) 绘制椭圆

画椭圆

image.png

6. canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint) / drawLines(float[] pts, int offset, int count, Paint paint) /drawLines(float[] pts, Paint paint) 画线

共三个重载方法，第一个画一根线，startX/startY，起点坐标， stopX/stopY，终点坐标
后两个方法和画点方法一样理解

image.png

image.png

image.png

7. canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) / drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 绘制圆弧或者扇形

drawArc() 是使用一个椭圆来描述弧形的。left, top, right, bottom 描述的是这个弧形所在的椭圆；startAngle 是弧形的起始角度（x 轴的正向，即正右的方向，是 0 度的位置；顺时针为正角度，逆时针为负角度），sweepAngle 是弧形划过的角度；useCenter 表示是否连接到圆心，如果不连接到圆心，就是弧形，如果连接到圆心，就是扇形

image.png

image.png

image.png

8. drawRoundRect(RectF rect, float rx, float ry, Paint paint) / drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 绘制圆角矩形

rx、ry为圆角横向半径和纵向半径

image.png

image.png

9. drawPath(Path path, Paint paint) 画自定义图形

Path 可以描述直线、二次曲线、三次曲线、圆、椭圆、弧形、矩形、圆角矩形。把这些图形结合起来，就可以描述出很多复杂的图形。下面我就说一下具体的怎么把这些图形描述出来。

Path 有两类方法，一类是直接描述路径的，另一类是辅助的设置或计算。
这部分内容暂不展开，内容较多。

image.png

image.png

image.png

10. drawText(String text, float x, float y, Paint paint) 绘制文字

image.png

image.png

image.png

---

自定义View中onDraw方法主要绘制方法基本就是以上内容，通过上面方法，已经可以绘制一些简单内容，后面再深入进行学习。