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", 绘制结果如下所示：
Android自定义视图二：用Canvas和Paint绘制折线图_第1张图片

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

绘制折线图

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

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

private var _points: List<Float>? = nullvar 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()方法。

运行结果：
Android自定义视图二：用Canvas和Paint绘制折线图_第2张图片

添加细节

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

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的更多资料。

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

绘制第一个像素

添加padding

绘制折线图

添加细节

更多相关文章

随机推荐