MagicPen 项目示例

前言

不知不觉离上一篇文章又是好一阵子。前文中只是粗略提及了在下的 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 ，会不会很爽？

正文

让我们来分析一下这个自定义进度条

1. 背景和进度条都是240°的弧形
2. 背景和进度条都带有渐变
3. 进度条带有动画（本质是可以设置百分比）

其实，最终实现的代码简单得我都不忍心加注释：

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()

口说无凭，上图

progress.gif

源码详见：
https://github.com/neverwoodsS/MagicPen/blob/master/app/src/main/java/com/lab/zhangll/magicpen/ArcActivity.kt

其实不能说『详见』，因为几乎也就只有文章里这点代码。

尾声

闹了半天，好像我又只是秀了一下代码？但相信各位应该更明白 MagicPen 是一个怎么样的项目了，它还很不成熟，但是它也很单纯：简化自定义 view 的复杂度。

接下来除了写一些我用 MagicPen 仿的 view 以外，还会抽时间和大家分享一下我做这个项目的过程中的一些心得体会，也会提一些我遇到过的，甚至现在还可能在纠结的问题。