之前看到一位作者開源了一款手繪風格的圖表庫 Chart.xkcd，感覺很是喜歡。
當然僅僅圖表是滿足不了我滴，于是想看看 Android 上是否有類似的開源庫，一番搜索之后，顆粒無收。
想想原理可能不是太難，于是花點時間動手寫了一個。

Demo 展示

成果如下：

想快速體驗一把，可以下載 Demo APK ~

倉庫介紹

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

快速接入

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

repositories {jcenter() } 復制代碼

添加 sketchy 依賴

implementation 'com.zylab:sketchy:0.1.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…

總結

以上是生活随笔為你收集整理的这是你从未见过的组件库 -- Android 上的手绘风格组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。