归志宁无五亩园，读书本意在元元。这篇文章主要讲述玩转Android之Drawable的使用相关的知识，希望能为你提供帮助。
Drawable天天用，可你是否对Drawable家族有一个完整的认知？今天我们就来系统的学习一下Drawable的使用。
1.概述用过Drawable的筒子都知道Drawable有很多种，有的时候Drawable是一张图片，有的时候Drawable是我们通过颜色构造出来的某种图形。最常见的自己构造的Drawable图形莫过于ShapeDrawable，我们在开发中可能经常需要自己绘制一个矩形、圆形、椭圆等等各种各样的图形。一般来说，Drawable并没大小的概念（虽然可以通过getIntrinsicHeight和getIntrinsicWidth两个方法获取Drawable的宽和高，但是这两个方法并不总是有效，因为如果我们的Drawable是图片的话，那么Drawable的大小就是图片的大小，如果我们的Drawable本身就是颜色的话，那么就没有宽高的概念），因为我们在用Drawable的时候，大多数时候都是把它当作某一个控件的背景来使用的，此时Drawable会被拉伸到和View相同的大小，此时Drawable的大小实际上就是控件的大小。接下来我们来看看Drawable的继承关系：

文章图片

在Drawable的这些继承类中我们常用的主要有以下几种：LayerDrawable、ShapeDrawable、NinePatchDrawable、BitmapDrawable、StateListDrawable、LevelListDrawable、TransitionDrawable、InsetDrawable、ScaleDrawable、ClipDrawable等，下面我们会就这些不同的Drawable一一介绍。
2.BitmapDrawableBitmapDrawable算是最最最最常见的Drawable之一，我们构造一个Bitmap对象的时候，有时候会用到BitmapDrawable，那么BitmapDrawable的构造，除了在代码中new一个BitmaDrawable之外，我们还可以使用XML来构造一个BitmapDrawable对象，在项目的drawable文件中新创建一个xml文件，代码如下：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < bitmap  xmlns:android="http://schemas.android.com/apk/res/android"   
3.                 android:antialias="true"   
4.                 android:src="https://www.songbingjia.com/android/@drawable/a2w"   
5.                 android:dither="true"   
6.                 android:filter="true"   
7.                 android:gravity="top|left"   
8.                 android:tileMode="mirror"   
9.         >    
10. < /bitmap>    

这里只有src属性是必须的，该属性指这个BitmapDrawable要显示的图片，其他属性看单词意思都很容易明白，antialias表示是否开启抗锯齿，这个在自定义View创建Paint时经常用到；dither表示是否开启抖动效果，作用是手机像素配置和图片像素配置不一致时，系统会自动调整显示效果，关于图片像素问题参见Android开发之Bitmap二次采样文章；filter表示是否开启过滤效果，这个属性也是为了使图片被放大或者缩小时有一个较好的显示效果；gravity属性则表示当图片的大小小于控件的大小时，图片的显示位置，tileMode表示平铺模式，在我们的Windows电脑桌面设置的时候就有这个选项，该属性共有四种取值，分别是disable、repeat、mirror、clamp四种，默认情况下是disable，就是不做任何处理，当我们在这里使用了除disable之外的另外三种取值时，gravity属性值失效。下面我们来看看这三种取值时的效果：
【玩转Android之Drawable的使用】我的原图是这样的：

文章图片

我的bitmapdrawable是这样的：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < bitmap  xmlns:android="http://schemas.android.com/apk/res/android"   
3.                 android:antialias="true"   
4.                 android:src="https://www.songbingjia.com/android/@drawable/p2"   
5.                 android:dither="true"   
6.                 android:filter="true"   
7.                 android:gravity="top|left"   
8.                 android:tileMode="repeat"   
9.         >    
10. < /bitmap>    

我的View是这样的：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < RelativeLayout   
3.         xmlns:android="http://schemas.android.com/apk/res/android"   
4.         xmlns:tools="http://schemas.android.com/tools"   
5.         android:layout_width="match_parent"   
6.         android:layout_height="match_parent"   
7.         tools:context="org.mobiletrain.drawable.MainActivity">    
8.    
9.         < View   
10.                 android:layout_width="400dp"   
11.                 android:layout_height="400dp"   
12.                 android:background="@drawable/mybitmap"/>    
13. < /RelativeLayout>    

这是显示效果是这样的：

文章图片

大家看到，当图片的大小小于控件的大小时，图片会在水平方向和垂直方向不断的重复。如果我把tileMode属性的值改为clamp，我们再来看看显示效果：

文章图片

大家看到，这时当图片小于控件的大小时，图片在水平方向或者垂直方向末端的颜色会自动延伸直至将控件填充满。最后我们再来看看mirror属性，为了方便看到效果，我这里把图片换一下，我们再来看看显示效果：

文章图片

大家看到一个小飞机在水平方向和垂直方向以倒影的形式在不断的重复。这就是mirror的显示效果。
3.ShapeDrawableshapeDrawable又是一个非常常用的Drawable，我们在开发中对于纯色的背景一般来说都是绘制的，因为直接使用图片会使App打包后变得比较大，通过XML来绘制纯色背景是一个不错的选择。关于这个我这里就不再多说了，大家查看这篇文章自行了解。android开发之shape详解。
4.LayerDrawableLayerDrawable表示一个层次化的Drawable，这个要怎么理解呢？大家看看我之前的这篇文章就理解了博客关于ProgressBar的美化问题。
LayerDrawable中可以有n多个item，每个item就是一个Drawable，每一个Drawable依据代码的顺序相互覆盖着显示出来。先写的先绘制，后写的后绘制，最终显示的效果是一个叠加的显示效果，我们来看下面一个例子：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < layer-list  xmlns:android="http://schemas.android.com/apk/res/android">    
3. < item>    
4.         < shape  android:shape="rectangle">    
5.                 < solid  android:color="@color/lineColor"/>    
6.         < /shape>    
7. < /item>    
8.         < item  android:bottom="8dp">    
9.                 < shape  android:shape="rectangle">    
10.                         < solid  android:color="@color/lineColor2"/>    
11.                 < /shape>    
12.         < /item>    
13.         < item  android:bottom="1dp"  android:left="1dp"  android:right="1dp">    
14.                 < shape  android:shape="rectangle">    
15.                         < solid  android:color="@color/etbg"/>    
16.                 < /shape>    
17.         < /item>    
18. < /layer-list>    

我把这个Drawable作为EditText的背景，代码如下：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < LinearLayout   
3.         android:orientation="vertical"   
4.         xmlns:android="http://schemas.android.com/apk/res/android"   
5.         xmlns:tools="http://schemas.android.com/tools"   
6.         android:layout_width="match_parent"   
7.         android:layout_height="match_parent"   
8.         android:padding="8dp"   
9.         tools:context="org.mobiletrain.drawable.MainActivity">    
10.         < EditText   
11.                 android:background="@drawable/textview_background"   
12.                 android:layout_width="match_parent"   
13.                 android:text="江南一点雨"   
14.                 android:layout_height="wrap_content"/>    
15.         < EditText   
16.                 android:text="江南一点雨"   
17.                 android:layout_marginTop="20dp"   
18.                 android:layout_width="match_parent"   
19.                 android:layout_height="wrap_content"/>    
20. < /LinearLayout>    

显示效果如下（上面是加了背景的显示效果，下面是正常的EditText的显示效果）：

文章图片

大家看到，上面的EditText有一点不同，原因在于我在LayerDrawable中首先绘制了一个蓝色的矩形，然后又绘制了一个绿色的矩形，但是这个绿色矩形距离底部有8dp的高度，这就保证了输入框有两个向上翘起的蓝色边框，最后绘制整个背景色，整个背景色为黄色，但是背景色距离左右下三边的距离分别为1dp，这样就确保了另外三条线可以正常显示出来。OK，就是这么简单，更酷炫的用法参见关于ProgressBar的美化问题。
5.LevelListDrawableLevelListDrawable，顾名思义就是一个等级Drawable，它就是根据控件的不同等级来切换Drawable，有点类似于selector中的根据控件的状态来更新Drawable。不同的是这里是根据控件的level来更新。比如下面一个简单的LevelListDrawable文件：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < level-list  xmlns:android="http://schemas.android.com/apk/res/android">    
3.         < item   
4.                 android:drawable="@drawable/p2"   
5.                 android:maxLevel="10"   
6.                 android:minLevel="0"/>    
7.         < item   
8.                 android:drawable="@drawable/p1"   
9.                 android:minLevel="11"   
10.                 android:maxLevel="20"/>    
11. < /level-list>    

这个levelListDrawable文件表示当控件的level处于0～10之间的时候，显示图片p2，当控件的level处于11～20之间的时候显示图片p1，我们来看看我的ImageView：
[java] view plain copy print?
文章图片

文章图片

1. < ImageView   
2.                 android:layout_width="200dp"   
3.                 android:scaleType="centerCrop"   
4.                 android:id="@+id/iv"   
5.                 android:src="https://www.songbingjia.com/android/@drawable/level_list_drawable"   
6.                 android:layout_height="200dp"/>    

在ImageView中将刚才的LevelListDrawable对象作为它的src，然后当我点击按钮的时候改变ImageView的level，这个时候图片就会发生变化。点击事件代码如下：
[java] view plain copy print?
文章图片

文章图片

1. public  void  toggle(View  view)  {   
2.                 if  (flag)  {   
3.                         iv.setImageLevel(5);    
4.                         flag  =  false;    
5.                 }else{   
6.                         iv.setImageLevel(15);    
7.                         flag  =  true;    
8.                 }   
9.         }   

显示效果如下：

文章图片


这里大家需要注意的是level的取值范围为0～10000，默认值为0。
6.TransitonDrawableTransitionDrawable主要是实现两个Drawable之间淡入淡出的效果。我们来看看TransitionDrawable文件：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < transition  xmlns:android="http://schemas.android.com/apk/res/android">    
3.         < item  android:drawable="@drawable/p1"/>    
4.         < item  android:drawable="@drawable/p2"/>    
5. < /transition>    

再来看看ImageView文件：
[java] view plain copy print?
文章图片

文章图片

1. < ImageView   
2.                 android:layout_width="200dp"   
3.                 android:scaleType="centerCrop"   
4.                 android:id="@+id/iv"   
5.                 android:src="https://www.songbingjia.com/android/@drawable/transition_drawable"   
6.                 android:layout_height="200dp"/>    

点击事件如下：
[java] view plain copy print?
文章图片

文章图片

1. public  void  toggle(View  view)  {   
2.                 TransitionDrawable  drawable  =  (TransitionDrawable)  iv.getDrawable();    
3.                 drawable.startTransition(2000);    
4.         }   

显示效果如下 ：

文章图片

7.InsetDrawableInsetDrawable表示可以将一个Drawable嵌入到自己当中。类似的效果使用LayerDrawable也能实现。来看看代码：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < inset  xmlns:android="http://schemas.android.com/apk/res/android"   
3.               android:insetBottom="20dp"   
4.               android:insetLeft="20dp"   
5.               android:insetRight="20dp"   
6.               android:insetTop="20dp">    
7.         < shape  android:shape="oval">    
8.                 < solid  android:color="@color/colorAccent"/>    
9.         < /shape>    
10. < /inset>    

表示中心的圆形与控件的上下左右四边的间距都为20dp，当然这个设置图像的地方也可以像下面这种方式来写：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < inset  xmlns:android="http://schemas.android.com/apk/res/android"   
3.               android:insetBottom="20dp"   
4.               android:drawable="@drawable/p1"   
5.               android:insetLeft="20dp"   
6.               android:insetRight="20dp"   
7.               android:insetTop="20dp">    
8. < /inset>    

8.ClipDrawable表示根据一个Drawable的level对Drawable进行剪裁，代码如下：
[java] view plain copy print?
文章图片

文章图片

1. < ?xml  version="1.0"  encoding="utf-8"?>    
2. < clip   
3.         android:drawable="@drawable/p1"   
4.         android:clipOrientation="horizontal"   
5.         android:gravity="left"   
6.         xmlns:android="http://schemas.android.com/apk/res/android">    
7. < /clip>    

drawable表示drawable图像，clipOrientation表示剪裁的方向，是从水平方向剪裁还是从垂直方向剪裁，这个属性配合gravity属性才会生效，至于每次剪裁的百分比则是和level属性的值有关，level属性的取值范围为0～10000，0表示完全剪裁，10000表示完全不剪裁，5000则表示剪裁一般，其它值依此类推。
 
以上。

推荐阅读

• 

  佳能750d可以换什么样的镜头
• 

  面料涤纶里料棉纶的衣服怎么洗 面料涤纶里料棉纶的衣服如何洗
• 

  快赔和保险有什么区别
• 

  mole|预算不超过2000元，要有5g、不卡，朋友们能否给点建议？
• 

  崇德老人八字例解（六）
• 

  痛风后果严重吗
• 

  stm32逻辑分析porta
• 

  秋葵焯水要切开不
• 

  万能看图王怎么卸载？万能看图王卸载方法
• 

  含有近义词的词语 含有近义词的词语 四字
• 

  利用手机QQ无限刷手机上网流量 三网通用
• 

  新冠疫苗接种后的注意事项 打新冠疫苗可以吃生鱼片吗
• 

  戒烟的过程中有点心慌是什么情况，要怎么办啊？
• 

  得了艾滋病应该怎么办 如果患上艾滋病怎么办
• 

  夏天如何培养天竺葵盆栽 夏天如何培养天竺葵，夏天如何培养天竺葵苗
• 

  wi-fi|联想发布 Yoga 7i 翻转本：可选 14/16 英寸屏
• 

  分享一下你们最喜欢的微信头像？
• 

  《雪鹰领主》进入薪火宫的条件 雪鹰领主招募
• 

  虚拟主机如何搭建shopex，虚拟主机如何搭建传奇游戏
• 

  考研申请书

• android自定义View之钟表诞生记
• Android 添加System权限
• qcom Android Camera
• Android5.0之Activity的转场动画
• 玩转Android之在线视频播放控件Vitamio的使用
• 浅谈Android MVP 设计模式
• Android5.0常用颜色属性说明
• ML算法（基于动量的梯度优化器介绍）
• ML算法（使用Python进行多元线性回归）