Android | 爆肝兩天!我寫了一個支持圓角、描邊的UI庫

2022-01-13 程式設計師小北
效果預覽

先來看一下這個庫的實際表現吧,用起來真的很簡單,而且特別的漂亮。以下效果圖是在 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

寫在最後如果本文幫助到了你,歡迎點讚和關注,這是我持續創作的動力 ❤️由於作者水平有限,文中如果有錯誤,歡迎在評論區指正 ✔️

相關焦點

  • GitHub Top 100的Android開源庫
    投稿之後反響很好,很受鼓舞,於是他準備再整理下GitHub上前100的Java開源庫,但是我建議他Java應用的領域太廣了,不如就直接整理跟Android相關的開源庫吧,沒想到小夥執行力這麼強,現在已經整理完畢了,一位大三的學生這麼強的執行力必須點讚一個,今天你們有福了!
  • 這15個Android開源庫,只有經常逛Github的才知道!
    它支持GIF和SVG,並且可以執行四個默認轉換:模糊,圓形裁剪,灰度和圓角。示例代碼:<com.iammert.library.ui.multisearchviewlib.MultiSearchView        android:layout_width
  • Android 2017 開源庫總結(持續更新)
    19.CiceroneCicerone是一個輕量級的庫,使得Android應用程式中的導航變得簡單。它被設計成與MVP模式一起使用,但是可以與任何架構一起使用。24.RxJava2DebugRxjava2 的異常檢測25.noiseNoise是Android的一個包裝器,是用C語言編寫的FFT實現程序。Noise是一個易於使用的api,適用於Android開發人員。
  • Android 圖片裁剪庫 uCrop
    收錄於話題 #百大優秀開源庫使用示例1、引入 uCrop 庫。
  • Android Jetpack CameraX 庫 Beta 版正式發布!
    原標題:AndroidJetpackCameraX庫Beta版正式發布!CameraX是一個Jetpack支持庫,旨在幫助您簡化相機應用的開發工作。它提供一致且易於使用的API界面,適用於大多數Android設備,並可向後兼容至Android5.0(API級別21)。
  • 對於Android Button,你可能並不了解
    開篇先給大家道個歉,本來在國慶前就開始向大家預告10月9號發布我自己寫的文章,推出最新的LitePal 2.1.0版本,在國慶假期中我也是完成了所有的編碼工作並成功將庫發布到了
  • 28個頂級的React UI組件庫,請查收!
    :React 的優勢很多:虛擬 DOM、聲明性描述用戶界面及界面狀態建模能力、對於熟練 Javascript 開發者來說較低的入門門檻,這些優勢讓 React 成為構建 UI 的一個很出色的庫。地址:https://react.semantic-ui.com/introductionOnsen UI React Components 支持 Onsen UI React 綁定,為構建混合移動應用提供了
  • Auto.js教程(第14期)-UI界面的編寫
    視頻講解連結:https://www.bilibili.com/video/BV1cy4y117iY在正文的開始前,我覺得有必要講幾個重要的知識點:1.在寫UI界面時,必須把"ui";放在代碼第一行,在它前面不能有其他代碼,就算有,它前面的代碼也必須是注釋的
  • Feather Icon - 簡單漂亮的免費開源圖標庫
    一套面向設計師和開發者,功能性強、風格高度一致的免費開源圖標庫。介紹Feather 是一套面向設計師和開發者的開源圖標庫,是一個簡單漂亮的開源圖標庫。每個圖標都設計在一個24×24的網格上,強調簡單,一致性和易讀性。很多大廠出品的前端框架都內置了這款可以免費商用的圖標。
  • 我感覺我學了一個假的Android...
    at android.view.ViewRootImpl.checkThread(ViewRootImpl.java:8066)        at android.view.ViewRootImpl.requestLayout(ViewRootImpl.java:1297)        at android.view.View.requestLayout(
  • Android官方架構組件Navigation:大巧不工的Fragment管理框架
    2.Sample展示我寫了一個Navigation的sample,它最終的效果是這樣:app:startDestination="@id/page1Fragment">    <fragment        android:id="@+id/page1Fragment"        android:name="com.qingmei2.samplejetpack.ui.main.MainPage1Fragment"
  • 2020年20個Flutter最漂亮的UI庫和項目
    老孟導讀:下面是目前Github上最流行的20個 Flutter UI庫或者項目。Best-Flutter-UI-Templates 地址:https://github.com/mitesh77/Best-Flutter-UI-Templates
  • Android 樣式系統 | 主題背景屬性
    在 Android 樣式系統系列的前幾篇文章中,我們介紹了主題背景與樣式的區別,以及為什麼說通過主題背景和公共主題背景屬性來分解您要實現的內容是一個不錯的主意
  • Android Studio 3.4穩定版發布,支持Android Q Beta和Intellij 2018.3.4
    Android Studio 3.4有一個更新的項目結構對話框(PSD)。它還用R8替換Proguard作為默認代碼縮減器和混淆器。該版本還支持Android Q Beta和Intellij 2018.3.4。Android Studio 3.4的新功能項目結構對話框 - 這是一個新的用戶界面前端管理級項目文件。
  • GitHub上最火的74個Android開源項目
    5. androidGitHub Android App是 GitHub開源的Android客戶端,支持Issues、Gists,併集成了新聞Feed,能夠讓你及時跟進組織及關注的開發者、庫等。同時,該應 用還提供了一個用戶快速訪問你所創建、監控及發布issue的面板,可查看並將問題加入到收藏夾,可對標籤、裡程碑和任務進行過濾配置。
  • 一個炫酷的SearchView動畫庫
    概要前言:周末強擼一個庫,差點灰飛煙滅。無妨,人生自古誰無死,來生繼續擼代碼。立馬進入主題,幾乎每個App都有搜索功能,然而形式千篇一律。舉個例子,來看看微信咳,這是一個頓悟生命的dot啊!相信大家通過我形象的描述已經知道效果是怎樣了,現在就把剛剛的描敘畫出來吧。
  • Android Studio Arctic Fox (2020.3.1) Beta 版發布
    我們將按字母順序安排代號,第一個便是 Arctic Fox,它現在處於 Beta 版;下一個代號是 Bumblebee,現在則還在 Canary 渠道中。請向我們提交反饋,幫助我們在下一個版本的 Android Studio 中繼續聚焦您最關心的領域。
  • Android實現三角形氣泡效果方式匯總
    通過截圖可以發現,氣泡由正三角形和圓角長方形組成,於是可以通過組合來形成三角形氣泡的效果,下面我們通過三種方式進行實現。實現方式:    1、通過.9圖進行實現;    2、通過shape方式實現;    3、通過自定義view的方式實現;實現邏輯:1、通過.9圖進行實現這種方式就不用說了吧,找你們UI小姐姐切一個.9圖,
  • 【Framework】速通 Android AOSP基礎
    C/C++代碼與二進位文件(如system.img、ramdisk.img、userdata.img、boot.img等);我們平時在AS裡看到的源碼庫android.jar是打包後的classes.jar,詳細路徑:out/target/common/obj/JAVA_LIBRARIES/framework_intermediates