先來看一下這個庫的實際表現吧,用起來真的很簡單,而且特別的漂亮。以下效果圖是在 MI 6X,Android 9 系統上的表現。不同設備實際效果可能有差異,讀者請注意。
可以看到,已經支持 View,TextView,ImageView,Button,ConstraintLayout,LinearLayout,RelativeLayout,FrameLayout,RecyclerView 控制項的圓角與描邊了,基本覆蓋日常開發所需,一針治好設計師多年的圓角病!
如何使用本項目全部使用 Kotlin 語言開發,最低支持版本為 Android 5.0。代碼在 Github 和 Gitee(碼雲)均已經開源。讀者可以點擊下方連結查看更加詳細的使用方法,本文只做粗略的介紹。
Github:https://github.com/liqvip/EasyView
Gitee:https://gitee.com/lishu1108/EasyView
如果本項目幫助到了你,希望讀者可以幫我點個 Star,我會更加努力搬磚的!
在項目根目錄下的 build.gradle 中添加 jitpack 倉庫
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
第二步在對應模塊的 build.gradle 中添加 EasyView 的依賴
dependencies {
...
implementation 'com.github.liqvip:EasyView:1.0.0'
}
第三步在布局文件中添加需要使用的 EasyView,以下是簡單示例
<com.github.easyview.EasyImageView
android:layout_width="@dimen/dp_200"
android:layout_height="@dimen/dp_200"
app:ev_radius="@dimen/dp_100"
app:ev_stroke_width="@dimen/dp_5"
app:ev_stroke_color="@color/demo18"/>
<com.github.easyview.EasyRelativeLayout
android:layout_width="@dimen/dp_250"
android:layout_height="@dimen/dp_150"
app:ev_topLeft_radius="@dimen/dp_50"
app:ev_bottomLeft_radius="@dimen/dp_20"
app:ev_stroke_width="@dimen/dp_5"
app:ev_stroke_color="@color/demo6"/>
.只需三步,清清爽爽搞定所有圓角和描邊。
我為什麼要寫這個庫在 Android 開發中,如果一個控制項想要實現上面類似的圓角和描邊效果,有如下兩種最為常用的方式。
寫 xml 文件,設置圓角背景在 drawable 文件夾下,新建 xml 文件,通過 shape 標籤來設置圓角半徑,描邊寬度和顏色。然後將它設置為某個具體 View 的背景即可。這種方式有明顯的缺點,一旦項目比較大,不同 View 的圓角半徑,描邊寬度和顏色都會是不一樣的,這導致的結果就是,會有大量的 xml 文件堆積在我們的項目中,後期維護成本太高。最重要的一點是,這種方式一點也不優雅。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="@color/colorAccent" />
</shape>
使用 GradientDrawable這種方式和寫 xml 文件來設置圓角與描邊的原理都是一樣的,都是通過設置 View 的背景來達到目的。區別在於 GradientDrawable 支持動態設置,這裡就不舉例子說明 GradientDrawable 的用法了,讀者可以網上搜索相關文章,自行嘗試。
可以看到,要達到圓角與描邊的效果,你都避免不了寫 xml 或者大量重複無意義的代碼,那麼最佳的實現方式是什麼呢?最佳的使用方式又是什麼?帶著這樣的困惑,最終我完成了這個庫。
我心中的最佳實現編程講究面向接口,在我看來,Android 中所有的控制項,都應該具有圓角和描邊的特性,但是官方控制項在設計之初,就沒有過多考慮過使用者的感受。實際開發中,圓角和描邊的使用範圍特別的廣泛,我們急需要一個好的解決方案:能夠直接在 xml 布局文件中直接設置圓角和描邊。這對於開發者來說,特別的友好,就像使用一個個簡單的屬性一樣,而 EasyView 也正滿足甚至超越上述方案。
那麼 EasyView 這個項目內部是如何實現圓角和描邊的呢?答案也很簡單,核心原理就是使用 Canvas 的圖像混合。對 Canvas 有研究過的的讀者在閱讀 EasyView 這個項目的源碼時,就會輕鬆很多。
由於本文主要介紹 EasyView 的使用方法,所以源碼就不過多的討論,或許過幾天我會專門寫一篇文章來向讀者解析 EasyView 的源碼,並分享一下我在開發這個項目中所遇到的各種坑。EasyView 剛發布不到一天,它還是一個充滿朝氣的孩子,如果你在使用過程中遇到一些問題,請務必給我提 issue。
寫在最後如果本文幫助到了你,歡迎點讚和關注,這是我持續創作的動力 ❤️由於作者水平有限,文中如果有錯誤,歡迎在評論區指正 ✔️