這是你從未見過的組件庫 -- Android 上的手繪風格組件

以前看到一位做者開源了一款手繪風格的圖表庫 Chart.xkcd，感受非常喜歡。
固然僅僅圖表是知足不了我滴，因而想看看 Android 上是否有相似的開源庫，一番搜索以後，顆粒無收。
想一想原理可能不是太難，因而花點時間動手寫了一個。

Demo 展現

成果以下：

想快速體驗一把，能夠下載 Demo APK ~

倉庫介紹

SketchyComponent，一款手繪風格的 Android 組件庫。
倉庫地址：github.com/m-zylab/Ske…

快速接入

1. 添加 jcenter 倉庫（AS 建立的項目默認已經添加）

repositories {
    jcenter()
}
複製代碼

2. 添加 sketchy 依賴

implementation 'com.zylab:sketchy:0.1.3'
複製代碼

3. 代碼中使用組件

// 1. 建立 Sketchy 圖形
val skSquareDrawable = SkSquareDrawable().apply {
    // 2. 設置屬性
    fillColor = resources.getColor(android.R.color.holo_orange_dark)
}
// 3. 給 View 設置背景
text.background = skSquareDrawable
複製代碼

就是這麼 easy ~

組件庫介紹

目前 SketchyComponent 提供了基礎圖形的 Drawable，一部分 Icon，以及用來自定義圖形的基礎功能。
下面分別介紹一下～

基礎 Drawable

SkSquareDrawable

繪製一個矩形，效果以下：

SkLineDrawable

繪製一個線形，效果以下：

SkCircleDrawable

繪製一個圓形，效果以下：

SkArcDrawable

繪製一個扇形，效果以下：

SkImgDrawable

繪製圖片，效果以下：

部分 Icon

SkTimeIcon

SkSearchIcon

SkListIcon

SkArrowIcon

自定義能力

咱們提供了一些基礎圖形，方便用來自定義一些效果。下面是一些自定義的示例。

基礎圖形使用方法

咱們提供的基礎圖形，均繼承自 SkShape，其中提供了兩個方法，SkShape#parse 和 SkShape#draw(canvas: Canvas)
SkShape#parse 方法用來生成圖形對應的路徑
SkShape#draw 方法用來將圖形繪製到 canvas，若是在繪製時路徑尚未生成，即 parse 方法還未調用，默認會調用 parse 方法
以繪製直線爲例：

// 建立 SkLine 
val line = SkLine()
// 設置屬性
line.startPoint = SkPoint(0.0, 0.0)
line.endPoint = SkPoint(100.0, 100.0)
// 進行繪製
line.draw(canvas)
複製代碼

具體的 SkShape 介紹以下：

SkSquare

繪製一個矩形

SkLine

繪製一條線

SkCircle

繪製一個圓

SkArc

繪製扇形

SkCircleImg

繪製一個圓形圖片

SkSquareImg

繪製一個矩形圖片

更多用法請參照 github.com/m-zylab/Ske… 以及 github.com/m-zylab/Ske…