173

一、前言

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

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

二、什么是 Drawabe

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

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

例如:

/d-shapedefault.png

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

/d-shapecode.png

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

/d-shapeimage.png

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

/d-normal.png

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

三、Drawable 的常用实现

3.1 圆角的按钮

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

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

/d-shapecornes.png

实现的效果如下:

/d-shapecornesimg.png

3.2 带边框的圆角按钮

想在圆角的

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

/d-strokexml.png

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

/d-strokeimage.png

3.3 单边边框

这个时候,就可以使用

bottom-line

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

3.4 渐变的背景色

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

例如一般的视频App :

/d-tengxun.png

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

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

/d-gradientxml.png

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

效果如下图:

/d-gradientimage.png

3.5 海报的默认图

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

类似下面这种效果:

/d-aqiyi.png

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

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

下面是 xml 的实现代码:

/d-layerxml.png

下面是运行后的效果图:

/d-layerimage.png

3.6 带按下效果的按钮

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

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

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

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

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

/d-pressxml.png

实现效果如下:

/d-pressDemo.gif

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

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

/d-cornespress.png

3.8 带按下动画

按下效果除了使用

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

StateListAnimtor 使用起来非常的简单:

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

举个例子。

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

animator-xml

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

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

来看看运行的效果:

3.9 三角形的 Drawable

版权声明:本文为plokmju原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:http://www.cnblogs.com/plokmju/p/8005297.html