MagicPen 專案示例

neverwoods發表於2017-12-23

前言

不知不覺離上一篇文章又是好一陣子。前文中只是粗略提及了在下的 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 以外，還會抽時間和大家分享一下我做這個專案的過程中的一些心得體會，也會提一些我遇到過的，甚至現在還可能在糾結的問題。

相關文章