这个系列是老外写的,干货!翻译出来一起学习。如有不妥,不吝赐教!
- 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的更多资料。
下一篇,我们要给折线图添加动画。