这些 Drawable 的小技巧，你都了解吗？

一、前言

在 Android 的开发过程中，Drawable 经常会被用到，一般会用 Drawable 为 View 设置一个显示的效果。而在 Android 下，也提供了很多 Drawable 的默认实现，它们涉及到的内容非常的多，从属性到方法，但是日常生活中，会用到的只有那么些方式。

本文就在工作中，Drawable 的常用方式，整理出一篇文章，会携带一些场景，如有缺漏的，可以在文末留言，本文采用精益编写，如有必要，会一直长期更新。

二、什么是 Drawabe

Drawable 实际上是一个抽象类，主要用于将一个可绘制的资源，按要求绘制成图形，显示在屏幕之上。

Android 为了让开发者更方便的使用 Drawable ，提供了很多 Drawable 的实现类，并提供对应的 xml 的属性配置。

例如：

同时它也可以使用代码的方式实现，它们的效果是一样的。

实际上，不管是使用 xml 资源的方式，还是直接在逻辑中硬编码的方式，它们最终显示的效果都是一样的，如下图，一个蓝色的方块：

Android 中，为我们提供了非常多默认的 Drawable，正常来说，一般是足够我们使用的，它们的关系如下图：

基本上，从 XxxDrawable 这种类名，就可以看出来它对应的 Xml 资源的命名，唯一需要注意的是

三、Drawable 的常用实现

3.1 圆角的按钮

有些 App 中，按钮的圆角，如果背景只是一个纯色或者是简单的规则渐变，是可以使用

如果想要为其增加一个圆角，可以在

实现的效果如下：

3.2 带边框的圆角按钮

想在圆角的

stroke 用于设置边框，可以指定颜色和边框的宽度。

可以看到这里指定了一个黄色的边框，效果如下图：

3.3 单边边框

在

这个时候，就可以使用

这样的一个 Drawable，如果作为背景的话，显示效果就是在白色背景下，有一条 1px 的灰线。当然其他方向可以参考这个方案，截图发现 1px 的线不太明显，这里就不放图了。

3.4 渐变的背景色

例如一些视频 App 的 UI 设计，会将视频名称直接布局在视频海报上，就可以使用线性渐变的

例如一般的视频App ：

看到其实海报下面的文字，底部是有一个渐变的背景色的。

这种渐变的效果，可以使用 gradient 标签来设置。

gradient 支持的属性，基本上看名称就可以知道意思，唯一需要注意的是 android:angle 这个属性，用于设定渐变的角度，但是它不是任何值都支持的，只支持 45 的倍数。

效果如下图：

3.5 海报的默认图

通常在图片加载的过程中，会为其定义一个默认图片。一般的设计都是会将这个默认图做的非常的简洁，例如中间一个 App 主题的 Icon，然后其它地方纯色铺平。

类似下面这种效果：

这种默认的图片，当然你可以使用一张等大的图，但是这样不利于适配，不同的 UI 设计尺寸，你需要提供不同的图片。当然你也可以使用 9patch 的图片，但是你会发现有些 density 为 2.75 这种奇葩的手机下，图标会微微偏移，不在正中间。所以这里可以使用一个

所以这样的场景下，我们就需要一个纯色的背景加一张小图，即可实现默认图的效果。

下面是 xml 的实现代码：

下面是运行后的效果图：

3.6 带按下效果的按钮

对一个按钮，设计一个按下的效果。可以使用

这些不同的状态，在 xml 里，都是以 android:state_Xxx 开头来定义的，将其设置为 true 即可生效。

Android 为我们提供了非常多的状态，比较常用的有：

state_pressed：按下的效果。
state_checkable:是否可设置 checked 状态的效果。
state_selected：支持 selected 并且当前处于 selected 的效果。
state_checked：支持 checkeable 并且当前处于 checked 的效果。

接下来让我们看一个实际的按钮例子，这里只为其设置按下的效果，xml 代码如下：

实现效果如下：

3.7 一个带按下效果的圆角按钮

这个没啥好说的，结合上面的效果就可以做到。你可以选择将它们写在不同的 Drawable 中，也可以在一个 xml 文件中，使用不同 item 来完成。Item 标签是可以支持内部再嵌套一个 Drawable 的。

3.8 带按下动画

按下效果除了使用

具体细节可以看看我之前的一篇文章：《利用 StateListAnimator 为你的点击加个动画吧！》

StateListAnimtor 使用起来非常的简单：

在 res 中创建一个 animator 目录。
在其中创建一个 xml 资源文件，就是一个
在 xml 资源中使用
最终将定义好的 animtor 通过 View 的 setStateListAnimator() 方法或者 android:stateListAnimator 属性，设置到 View 上。

举个例子。

首先在 /res/animtor 目录下，创建一个 btn_press_animator.xml 文件。

可以看到，和 StateListDrawable 一样，它也是通过 android:state_xxx 属性来定义不同的 Animator 的，如果存在多个 Animator ，可以使用

然后，定义一个 View，为其设置属性 android:stateListAnimator="@animator/btn_press_animator"。

来看看运行的效果：

3.9 三角形的 Drawable

假如有类似气泡提示的效果，如下图。

这样的效果，除了使用 9patch 来实现之外，还可以拿两个 Drawable 来拼接实现，这就需要一个圆角的矩形和一个三角的 Drawable。

三角 Drawable 的实现思路很清奇，是使用一个矩形的 shape ，通过使用 rotate 实现的旋转，来达到尖角的效果。

这个例子，就是上图的实现效果，是一个黄色的倒三角。如果想要的是一个正三角，只需要改变旋转的角度就可以了。

3.10 Tint 着色的 Drawable

在 Drawable 中，如果使用的是 BitmapDrawable 或者 NinePatchDrawable(9patch) 的资源的话，可以使用 android:tint 属性为其着色。

默认情况下，待着色的图片资源，会将其所有有颜色地方，都着色成我们指定的颜色，但是会保留透明度。

效果图如下，上面是原图，下面是使用 tint 之后的效果：

前面这里给的是 tint 默认的效果，还可以通过 android:tintMode 指定成不同的着色效果，例如下面将 android:tintMode 指定成 screen 之后，效果就完全不一样了。

3.11 铺平的 Drawable

有时候，作为一些有规则的图片的背景，可以使用一张很小的图片，然后设定 android:tileMode 属性，为其设定一个平铺的效果。

tileMode 可以指定多个属性值，用于指定不同的效果，以下就是两个比较常用的，上图使用的是 repeat ，下图使用的是 mirror。

3.12 状态可控的层级 Drawable

如果想要一个 ImageView 上，根据不同的条件显示不同的 Drawable ，可以使用

今天举一个例子，给某个图标加红点的逻辑。当然我们也可以使用通过一个 FrameLayout 来实现，但是今天我们试试用

这里使用一个

最终我们可以通过 ImageView 的 setImageLevel() 方法来控制显示的内容。

四、结语

到这里基本上涵盖了 Drawable 大部分的使用场景，在实际例子中学东西是印象最深刻的。当然，Drawable 的使用不止这些，还有一些例如拿 ClipDrawable 来实现一个切割进度的效果之类的，这种还需要写逻辑代码，就不在本文的范围内了，本文主要介绍一些静态能实现的效果。

你只需要掌握最基本的规则，什么 Drawable 能实现什么效果，具体碰到实际需求的时候，再来细致的研究，基本上微调一下就可以使用。

如果你还又什么更有意思的 Drawable 使用技巧，欢迎在文末留言，我们一起讨论一下，如有需要，会持续更新。

今天在承香墨影公众号的后台，回复『成长』。我会送你一些我整理的学习资料，包含：Android反编译、算法、设计模式、虚拟机、Linux、Kotlin、Python、爬虫、Web项目源码。