第七章实现炫酷效果—图像和动画（2）

系统管理员 2022-08-05 02:15 77阅读 0赞

### 7.3 变化多端—Drawable（绘图类） ###

Drawable资源是Android系统中使用最广泛、最灵活的资源，可以直接使用png、jpg、gif、9.png等图片做为资源文件，也可以使用多种XML文件做为资源文件。

下面详细介绍下各种Drawable资源。

#### 7.3.1Drawable的一些常用子类 ####

Android平台的Drawable代表可以绘制在屏幕上的资源，可以使用getDrawable(int)从资源文件中获取Drawable资源，或者在XML资源文件中采用@drawable方式来引用一个drawable资源。Drawable是一个通用的抽象类，这里有几种Drawable类扩展出的绘图的类：

l BitmapDrawable—Bitmap File，一个Bitmap图像文件(.png、.jpg或.gif)。

l NinePatchDrawable—Nine-Patch File，一个带有伸缩区域的PNG文件，可以基于content伸缩图片（.9.png）。

l StateListDrawable—State List，一个XML文件，为不同的状态引用不同的Bitmap图像（例如，当按钮按下时使用不同的图片）。

l PaintDrawable—Color，定义在XML中的资源，指定一个矩形（圆角可以有）的颜色。

l ShapeDrawable—Shape，一个XML文件，定义了一个几何形状，包括颜色和渐变。

l AnimationDrawable—Animation动画。

<table> 
 <tbody> 
  <tr> 
   <td><p>经验分享：</p> <p>Android中不允许图片资源的文件名中出现大写字母，并且不能以数字开头。否则将无法为该图片在R中生成资源索引。这点需要特别注意一下。</p></td> 
  </tr> 
 </tbody> 
</table>

#### 7.3.2BitmapDrawable ####

BitmapDrawable是位图转换而成，一般它的资源文件放在res/drawable/目录下，文件名会被当作资源ID使用。例如：

在res/drawable/myimage.png位置保存了一张图片，在LayoutXML中可以应用这个图片到一个View上：

<table> 
 <tbody> 
  <tr> 
   <td><p>&lt;ImageView</p> <p>android:layout_height="wrap_content"</p> <p>android:layout_width="wrap_content"</p> <p>android:src="@drawable/myimage" /&gt;;</p></td> 
  </tr> 
 </tbody> 
</table>

下面的代码可以以Drawable方式得到图片：

<table> 
 <tbody> 
  <tr> 
   <td><p>Resources res = getResources();</p> <p>Drawable drawable = res.getDrawable(R.drawable.myimage)；</p></td> 
  </tr> 
 </tbody> 
</table>

#### 7.3.3点九图片—NinePatchDrawable ####

NinePatchDrawable绘画的是一个可以伸缩的位图图像，Android会自动调整大小来容纳显示的内容。NinePatch常被用在设置View的背景。NinePatch与一般图片被设置为背景最大的区别就是NinePatch可以有一段图片不被拉伸。

NinePatchDrawable是一个标准的PNG图像，它包括额外的1个像素的边界，你必须保存它后缀为.9.png,并且保持到工程的res/drawable目录中。你可以使用Android自带的工具(\\android-sdk\\tools\\draw9patch.bat)来进行NinePatch的制作。这个1个像素的边界是用来确定图像的可伸缩和静态区域。

左边那条黑色线代表图片垂直拉伸的区域。

上边的那条黑色线代表水平拉伸区域。

他们的交集就区域代表就垂直拉伸和水平拉伸都可以进行的区域。

右边的黑色线代表内容绘制的垂直区域。

下边的黑色线代表内容绘制的水平区域。

他们交集的区域就是内容所要绘制到的区域(android:padding的效果)。

下面的示意图7-1可能更方便理解。

![SouthEast][]

图7-1 九图工具效果图

<table> 
 <tbody> 
  <tr> 
   <td><p>经验分享：</p> <p>制作点九图片的时候，如果下边和右边的黑线不是连续的，那它将按最左端（上端）和最右端（下端）组成的线段来算内容区域。右边和下边的线是可选的，左边和上边的线不能省略。</p> <p>点九图片是用在拉伸的情况下，需要注意拉伸的部分会变形。那么如果我们不需要拉伸，只需要重复的平铺怎么办？可以使用BitmapDrawable来实现：</p> <p>// 获取出图片</p> <p>Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resID); </p> <p>// 转换成BitmapDrawable</p> <p>BitmapDrawable bd = new BitmapDrawable(bitmap);</p> <p>// 设置平铺的方向为X、Y（横、竖）两个方向</p> <p>bd.setTileModeXY(TileMode.REPEAT , TileMode.REPEAT ); </p> <p>// 设置平铺的方向为X（横）方向</p> <p>// bd.setTileModeX(TileMode.REPEAT ); </p> <p>// 设置图片的抖动为true。抖动可以使渐变更平滑，使原来会有间断线或色块的问题解决，但是不会使一个透明渐变的黑线消失。</p> <p>bd.setDither(true); </p> <p>// 设置为背景，就能达到自动平铺的效果。</p> <p>view.setBackgroundDrawable(bd); </p></td> 
  </tr> 
 </tbody> 
</table>

#### 7.3.4会动的图片—StateListDrawable ####

StateListDrawable是定义在XML中的Drawable对象，能根据状态来呈现不同的图像。例如，Button存在多种不同的状态（pressed、focused或other）。使用StateListDrawable，你可以为Button的每个状态提供不同的按钮图像。也可以在XML文件中描述状态列表。在<selector>元素里的每个<item>代表每个图像，每个<item>使用不同的特性来描述使用的时机。当每次状态改变时，StateList都会从上到下遍历一次，第一个匹配当前状态的item将被使用——选择的过程不是基于“最佳匹配”，只是符合state的最低标准的第一个item。

下面举个简单的例子.

先看XML文件，此文件保存在res/drawable/selecter\_btn.xml。

<table> 
 <tbody> 
  <tr> 
   <td><p>&lt;?xml version="1.0" encoding="utf-8"?&gt; </p> <p>&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt; </p> <p>&nbsp;&nbsp;&nbsp; &lt;item android:state_pressed="true"</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:drawable="@drawable/button_pressed" /&gt; &lt;!-- pressed --&gt; </p> <p>&nbsp;&nbsp;&nbsp; &lt;item android:state_focused="true" </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:drawable="@drawable/button_focused" /&gt; &lt;!-- focused --&gt; </p> <p>&nbsp;&nbsp;&nbsp; &lt;item android:drawable="@drawable/button_normal" /&gt; &lt;!-- default --&gt; </p> <p>&lt;/selector&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

将这个Drawable应用到一个View上，使用的方法和使用Drawable一样。

<table> 
 <tbody> 
  <tr> 
   <td><p>&lt;ImageView </p> <p>&nbsp;&nbsp;&nbsp; android:layout_height="wrap_content" </p> <p>&nbsp;&nbsp;&nbsp; android:layout_width="wrap_content" </p> <p>&nbsp;&nbsp;&nbsp; android:src="@drawable/selecter_btn" /&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

#### 7.3.5 颜色填充的另一种方法—PaintDrawable ####

PaintDrawable是定义在XML中的color，可以当作Drawable使用，来填充矩形区域(圆角可以有)。这种Drawable的行为很像是颜色填充。

下面我们来看个简单的例子。

XML文件保存在res/drawable/color\_name.xml。

<table> 
 <tbody> 
  <tr> 
   <td><p>&lt;?xml version="1.0" encoding="utf-8"?&gt; </p> <p>&lt;resources&gt; </p> <p>&lt;drawable name="solid_red"&gt;#f00&lt;/drawable&gt; </p> <p>&lt;drawable name="solid_blue"&gt;#0000ff&lt;/drawable&gt; </p> <p>&lt;/resources&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

将这个Drawable应用到一个View上。

<table> 
 <tbody> 
  <tr> 
   <td><p>&lt;TextView </p> <p>android:layout_width="fill_parent" </p> <p>android:layout_height="wrap_content" </p> <p>android:background="@drawable/solid_blue" /&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><p>经验分享：</p> <p>Color Drawable是一种简单的资源，可以使用name特性来引用其值（不再是XML文件的名）。因此，你可以在一个XML文件中的&lt;resources&gt;元素下添加多个Color Drawable。</p></td> 
  </tr> 
 </tbody> 
</table>

[SouthEast]: /images/20220805/a2c83c383edc42488aaa6fa4a9c35659.png