接上一原理篇：一种巧妙的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包含本文完整的代码及效果预览，最后，感谢阅读。