前言
不知不觉离上一篇文章又是好一阵子。前文中只是粗略提及了在下的 MagicPen 项目，最后也只是放出了 github 的链接，现在想来也是有些不负责任，很多朋友或许都没搞明白我到底是想做什么。正好最近用 MagicPen 仿了柯基大大的一个小 UI 项目，于是干脆就趁这个机会来说道说道。
首先，放上柯基的原文链接：
http://www.jianshu.com/p/20f399dc7bde
稍微看几眼我们就能明白，这是在做自定义 view，并且是继承于 View 类，操作 canvas 的自定义 view。
有那么一句至理名言叫做：会的不难，难的不会。这句话用来描述 canvas 我个人认为是挺合适的，因为比起 Android 的其他知识，这一块并不是入门的时候就必学的，所以很多新人会在一段时间以后，或者遇到了需求的时候才会来学习 canvas 的相关知识，而这一学又是一门独立的体系，或许难不倒人，但是也得投入一定精力。
可是，即便熟练掌握了这一门技术，至少我个人还是感觉通过 canvas 来自定义 view 是一件很麻烦的事情，因为有太多的 api，有太多的类存在。更不要提实现起来那长长的代码，多写几个 view 真的很累。对于『不会』的新人来说，canvas 上手在一定程度上还是很棘手的。
在 Kotlin，或者说在 anko 这个库的影响下，我突然想：要是我能像写布局一样的去写自定义 view ，会不会很爽？
正文
让我们来分析一下这个自定义进度条
- 背景和进度条都是240°的弧形
- 背景和进度条都带有渐变
- 进度条带有动画（本质是可以设置百分比）
其实，最终实现的代码简单得我都不忍心加注释：
magicPen {
setBackgroundColor(Color.BLACK)
arc {
center = PointF(500f, 500f)
radius = 400f
startAngle = -210f
sweepAngle = 240f
paint = paint {
strokeWidth = 30f
style = Paint.Style.STROKE
strokeCap = Paint.Cap.ROUND
shader = sweepGradient {
centerX = 500f
centerY = 500f
color = arrayOf(Color.parseColor("#11ffffff"), Color.parseColor("#55ffffff"), Color.parseColor("#11ffffff"))
percent = arrayOf(0f, 0.33f, 0.66f)
matrix = Matrix().apply {
setRotate(-220f, 500f, 500f)
}
}
}
}
progress = arc {
center = PointF(500f, 500f)
radius = 400f
startAngle = -210f
sweepAngle = 0f
paint = paint {
strokeWidth = 30f
style = Paint.Style.STROKE
strokeCap = Paint.Cap.ROUND
shader = sweepGradient {
centerX = 500f
centerY = 500f
color = arrayOf(Color.parseColor("#00ffffff"), Color.parseColor("#D9B262"))
percent = arrayOf(0f, 240 / 360f)
matrix = Matrix().apply {
setRotate(-220f, 500f, 500f)
}
}
}
}
}
1.通过 magicPen 方法，我构造了一个自定义 view 出来
2.将其背景色设置为黑色
3.通过 arc 方法，先后添加了两个弧形，第二个弧形赋值给一个名为 progress 的对象
当中需要注意的或许就只有 Paint 类的几个属性：
1.Paint.Style.STROKE 可以让弧形变成非实心，就只是圆环
2.Paint.Cap.ROUND 可以让圆环的起止点圆润化
3.最重要的 sweepGradient 则是负责了渐变效果
假如，我是说假如不需要这么多复杂的效果，那上面那段代码会简单的令人发指：
magicPen {
setBackgroundColor(Color.BLACK)
arc {
center = PointF(500f, 500f)
radius = 400f
startAngle = -210f
sweepAngle = 240f
paint = paint { color = Color.parseColor("#55ffffff") }
}
progress = arc {
center = PointF(500f, 500f)
radius = 400f
startAngle = -210f
sweepAngle = 0f
paint = paint { color = Color.parseColor("#D9B262") }
}
}
最后，再配合上计时器修改 progress 对象的 sweepAngle，我们可以让进度条动起来
private fun progressing() = with(progress) {
sweepAngle += (240f / 200)
invalidate()
}
object: CountDownTimer(5000, 25) {
override fun onFinish() {
}
override fun onTick(millisUntilFinished: Long) {
progressing()
}
}.start()
口说无凭，上图
其实不能说『详见』，因为几乎也就只有文章里这点代码。
尾声
闹了半天，好像我又只是秀了一下代码？但相信各位应该更明白 MagicPen 是一个怎么样的项目了，它还很不成熟，但是它也很单纯：简化自定义 view 的复杂度。
接下来除了写一些我用 MagicPen 仿的 view 以外，还会抽时间和大家分享一下我做这个项目的过程中的一些心得体会，也会提一些我遇到过的，甚至现在还可能在纠结的问题。
