一种巧妙的drawable.xml替代方案-效果篇

接上一原理篇:一种巧妙的drawable.xml替代方案

在上一篇文章中,我们详细了解到了一种利用DataBinding来替代drawable.xml的方案,但是并没有任何真正的演示代码和效果来呈现,本篇就是此目的。

本文将以上一篇方案所对应的库NoDrawable来演示,具体的用法请点击链接 https://github.com/whataa/noDrawable 查看。以大部分App中都有的登录页为例,以下为设计图:

image

这是一张很常见(正常)的设计图,但是从实现角度来看,按照传统方式,我们至少得新建8个drawable.xml资源文件(没想到吧):

  1. 整体背景的渐变色;
  2. 输入框的普通状态背景和选中状态背景;
  3. 登录按钮的背景;
  4. “第三方登录”左右两边的“尾翼”资源,各一个(没办法,即使小,还是得做啊);
  5. 微信和QQ的按钮各一个(不同的按压效果);

可以看出来,仅一张设计图就新建了8个文件,那项目中的其它页面呢?即使按照规范将文件名起得整整齐齐的,保不齐下一次圆角大小变了、同样的圆角单背景色变了…枯燥无味吧。

现在我们直接用NoDrawable来试试到底能不能达到一个drawable文件都不用创建的效果。

为节约篇幅,以下演示片段均展示与drawable相关的属性,其余省略

1. 整体背景的渐变色

1
2
3
4
5
6
<android.support.constraint.ConstraintLayout 
drawable_endColor="@{0xff3e91ee}"
drawable_orientation="@{@integer/orientation_bottom_top}"
drawable_startColor="@{0xff02144e}"
...
>

2. 输入框状态

1
2
3
4
5
6
7
8
9
10
11
12
<EditText
drawable_focused_strokeColor="@{@color/color_green}"
drawable_focused_strokeDash="@{4}"
drawable_focused_strokeDashGap="@{4}"
drawable_focused_strokeWidth="@{2}"
drawable_focused_marginLeft="@{-3}"
drawable_focused_marginTop="@{-3}"
drawable_focused_marginRight="@{-3}"
drawable_radius="@{21}"
drawable_solidColor="@{0x7fffffff}"
...
/>

3. 登录按钮的背景

1
2
3
4
5
6
7
<Button
drawable_radius="@{21}"
drawable_solidColor="@{0xff818385}"
drawable_enabled_radius="@{21}"
drawable_enabled_solidColor="@{0xff59c8d8}"
...
/>

4. “第三方登录”左右两边的“尾翼”

1
2
3
4
5
6
<View
drawable_endColor="@{0x00000000}"
drawable_orientation="@{@integer/orientation_right_left}"
drawable_startColor="@{0xffffffff}"
...
/>

5. 微信按钮按压效果

1
2
3
4
5
6
7
<ImageView
drawable_pressed_shapeMode="@{@integer/shapeMode_oval}"
drawable_pressed_solidColor="@{0xff54B536}"
drawable_shapeMode="@{1}"
drawable_solidColor="@{0xffDCDFE8}"
...
/>

结合 NoDrawable 的属性文档,不知大家是否可以理解到位。根据上述代码片段,我们可以总结到该方案的两大特性:

  1. 高可读性

直接在布局中的View标签声明drawable属性,对View最终效果一目了然;

  1. 适配任意View

像使用View自身的属性一样,作用于任何View;

效果图就不贴了,和设计图一模一样。大家如果有具体需求,可直接到NoDrawable仓库地址查看,其demo包含本文完整的代码及效果预览,最后,感谢阅读。