Android自定义视图二：用Canvas和Paint绘制折线图

这个系列是老外写的，干货！翻译出来一起学习。如有不妥，不吝赐教！

Android自定义视图一：扩展现有的视图，添加新的XML属性

Android自定义视图二：如何绘制内容

Android自定义视图三：给自定义视图添加“流畅”的动画

Android自定义视图四：定制onMeasure强制显示为方形

有的时候自持扩展一个标准的Android视图是不够的。你需要在视图上绘制你自己的内容才行。本文将会讲述如何使用

Canvas

类来绘制一个折线图，并会讲述如何处理尺寸和padding。

如果你还没有准备好的话，你可能需要阅读这个系列的前篇。

绘制第一个像素

如果你打算在自定义视图绘制自己的内容的话，最好的办法是继承基类

View

。

View

是UI绘制的最小单元，同时各种功能齐备。所以我们从继承

View

开始。

要画出第一个项目，只需要override方法

onDraw()

。在这个方法里我们可以获得一个canvas（画布），绘制就在这个canvas上进行。没有必要调用超类的

onDraw()

实现，因为其实并没有什么实现。在

View

中这个方法是空的。

class LineChartView : View {
constructor(ctx: Context) : super(ctx) {
}

constructor(ctx: Context, attributeSet: AttributeSet) : super(ctx, attributeSet) {
}

constructor(ctx: Context, attributeSet: AttributeSet, defStyle: Int) : super(ctx, attributeSet, defStyle) {
}

override fun onDraw(canvas: Canvas) {
val p = Paint()
p.style = Paint.Style.STROKE
p.color = resources.getColor(android.R.color.holo_orange_dark) // 0xFF33B5E5.toInt()
p.strokeWidth = 4f
canvas.drawLine(0f, 0f, width.toFloat(), height.toFloat(), p)
}
}

布局：

<RelativeLayout>
<demo.customview.customviewdemo.Views.LineChartView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp" />
</RelativeLayout>

为了一个直观的第一映像，代码全部贴出来，布局贴主要部分。Constructor部分可以直接忽略不计。这个自定义视图会在屏幕上以（0，0）为起点，以这个视图的宽和高（width，height）为终点绘制一条桔色的线。

Paint

类用来控制如何绘制。paint对象可以实现很多酷炫的效果，不过这里只用来绘制一条线。

注意：绘制的坐标系是这个自定义视图。左上角为（0，0）点，也就是坐标原点。x轴向右为正值，y轴向下为正值。

添加padding

我们绘制出了第一条线，这是一个很好的开始。但是，有的时候需要在内容的展示上需要留白，也就是需要设置padding。如果在布局中给刚刚创建的视图设置padding，你会发现没有什么效果。

那是因为在绘制的时候我们并没有把padding值计算在内，而padding值是包含在视图的宽度和高度之内的。如果视图的宽度是100像素，两边的padding是10像素那么在一个宽度上可用的值是80像素。

getWidth()

方法返回的是整个视图的宽度。padding的值可以用方法

getPaddingWidth()

来获得。当视图设置了padding后，正确的绘制方法请看下面的代码：

override fun onDraw(canvas: Canvas) {
val p = Paint()
p.style = Paint.Style.STROKE
p.color = resources.getColor(android.R.color.holo_orange_dark)
p.strokeWidth = 4f

val left = paddingLeft
val top = paddingTop
val right = width - paddingRight
val bottom = height - paddingBottom

//  canvas.drawLine(0f, 0f, width.toFloat(), height.toFloat(), p)
canvas.drawLine(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat(), p)
}

在布局中给这个视图的padding值设置为

android:padding="20dp"

, 绘制结果如下所示：



虽然有些情况不一定需要自定义视图支持padding。但是个人建议还是在一开始就把padding考虑进来，即使你觉得不需要padding。给一个有很多子view的自定义视图添加padding支持非常棘手，但是如果从一开始就考虑padding的话事情会容易很多。

绘制折线图

一开始就说要绘制一个折线图，那么现在我们正式着手开始绘制。

第一步，我们需要绘制用的数据。

private var _points: List<Float>? = null
var points: List<Float>
get() = if (_points == null) listOf<Float>() else _points!!
set(value) {
_points = value
}

在Kotlin里给属性增加getter和setter要简单很多。

private var _points: List<Float>? = null

指定了一个back field，用来存放赋值进来的数据。在返回的时候，如果

_points

为空则返回一个空的数组，否则返回原数组。在java里需要手动写一个setter方法。

有了

points

属性，用户就可以给我们的自定义视图添加绘制需要的点数据。这里的

points

属性的值是二维平面的y值。在二维平面绘制总是需要两个坐标来定位绘制的点。这里假设x轴的坐标值都是视图的宽度平分得到的，实际上也确实是这样，那么我们就可以把给定的

points

的index作为x值来使用。

下面我们来研究一下如何把给定的点映射到视图的坐标系内。

fun getYPos(yValue: Float, maxValue: Float): Float {
var drawHeight = height - paddingTop - paddingBottom
var drawYValue = (yValue / maxValue) * drawHeight  // 1
drawYValue = drawHeight - drawYValue  // 2
drawYValue += paddingTop // 3
return drawYValue
}

把y值映射到视图的坐标系中。

反转，如上文所述：视图的坐标系和用户看到的坐标系的y轴方向是反的。

加上padding的offset值

现在我们已经可以绘制折线图了。我们可以通过在两点之间连线的方式来绘制折线图，但是还有一个更好的办法。使用

Path

。现在看来不会有太大的不同，不过随着后面代码的深入你会发现大有不同。现在的

onDraw

方法看起来是这样的：

override fun onDraw(canvas: Canvas?) {
var maxValue = getMax(this.points)
var path = Path()
path.moveTo(getXPos(0), getYPos(this.points[0], maxValue))

for (i: Int in 1..(points.count() - 1)) {
path.lineTo(getXPos(i), getYPos(points[i], maxValue))
}

var paint = Paint()
paint.style = Paint.Style.STROKE
paint.strokeWidth = 4f
paint.color = resources.getColor(android.R.color.holo_orange_dark)
canvas?.drawPath(path, paint)
}

前面我们介绍了

getYPos()

方法，上面的代码中还用到了一个类似的

getXPos()

方法。这个方法就是按照

points

数组的元素个数平分X轴，确定X轴的单元宽度有多少，并返回每一个index对应的X轴的值。

第二部分基本上和前面的绘制方法一样，只不过这里使用了

drawPath()

方法而不是

drawLine()

方法。

运行结果：

添加细节

首先要做的就是添加抗锯齿。开启这个功能之后，图像看起来更加顺滑。抗锯齿可以这样开启：

paint.isAntiAlias = true

另一个可以让图像看起来效果更好的功能是给线图添加阴影：

paint.setShadowLayer(4f, 2f, 2f, resources.getColor(android.R.color.darker_gray))

现在是用

paint

对象绘制的所有东西都会添加一个阴影。不过，在上面这行代码智商还需要添加一点佐料，否则的话上面的代码会不听使唤。在方法的最后一个参数中指定的颜色不会起作用。添加如下代码：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
setLayerType(LAYER_TYPE_SOFTWARE, paint)
}

setShadowLayer()

这个方法需要硬件加速关闭，但是在

HONEYCOMB

和以上版本中默认这个功能是开启的。所以我们要让他在

LAYER_TYPE_SOFTWARE

条件下也能工作。

最后回到

setShadowLayer()

方法，第一个参数是模糊半径，值越大模糊的半径就越大，同时颜色就越模糊。就像一瓶墨水倒进多少水里一样，谁越多，颜色越浅，就是这个道理。第二、三个参数是指定了阴影向右移2像素，向下移2像素。最后一个参数指定颜色。

下面在背景添加横向的线：

private fun drawBackground(canvas: Canvas) {
var maxValue = getMax(points)
var range = getLineDistance(maxValue)

paint.style = Paint.Style.STROKE
paint.strokeWidth = 2f
paint.color = resources.getColor(android.R.color.background_light)
for (i: Int in 0..maxValue.toInt() - 1 step range) {
var yPos = getYPos(i.toFloat(), maxValue)
canvas.drawLine(0f, yPos, width.toFloat(), yPos, paint)
}
}

这样看起来就更像一个图表了。

从这里开始，我们的折线图可以添加更多的东西了。这样这个自定义的折线图就会更加的美观。在

Canvas

上，可以绘制线、路径，长方形和椭圆等。使用

Path

，我们可以修改填充方式、颜色、填充宽度等各种效果。官方文档中有关于Canvas和Paint的更多资料。

下一篇，我们要给折线图添加动画。