Android | 爆肝两天!我写了一个支持圆角、描边的UI库

效果预览

先来看一下这个库的实际表现吧,用起来真的很简单,而且特别的漂亮。以下效果图是在 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

写在最后

如果你对我感兴趣,请移步到 http://blogss.cn ,或关注公众号:程序员小北,进一步了解。

  • 如果本文帮助到了你,欢迎点赞和关注,这是我持续创作的动力 ❤️
  • 由于作者水平有限,文中如果有错误,欢迎在评论区指正 ✔️
  • 本文首发于掘金,未经许可禁止转载 ©️
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,527评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,314评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,535评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,006评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,961评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,220评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,664评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,351评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,481评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,123评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,713评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2 341

推荐阅读更多精彩内容