Android Drawable Resource学习（三）、NinePatchDrawable和NinePatch图片的制作

ゝ一世哀愁。 2022-08-08 16:43 204阅读 0赞

## 一、创建NinePatchDrawable    ##

一个NinePatch也是一个PNG的图片，不过不同的是可以为这种格式的图片定义可伸缩的区域，当某个视图的内容超过了正常的尺寸的时候，这种格式的图片会自动拉伸以适应不同的尺寸。一般这种图片是作为视图的背景，并且视图至少有一个尺寸（layout\_width或者layout\_height）是设置为"warp\_content"。当视图自增长来适应内容的时候，Nine-Patch格式的图片也会相应的进行缩放来匹配视图的尺寸。

NinePatchDrawable的创建方式几乎和BitmapDrawable一模一样，使用方式也没有多大的区别。只是在xml创建的时候，没有那么多的属性。

**\[java\]**  [view plain][] [copy][view plain]

1.  <nine-patch xmlns:android="http://schemas.android.com/apk/res/android"   
2.      android:src=""  
3.      android:dither=""/>

它只有这三个属性。

## 二、创建一个.9.png格式的图片 ##

在androidsdk的tools目录下，有这样一个工具draw9patch.bat。使用这个工具，可以很快速的绘制一个.9.png格式的图片。

这种格式的图片在android 环境下具有自适应调节大小的能力。

（1）允许开发人员定义可扩展区域，当需要延伸图片以填充比图片本身更大区域时，可扩展区的内容被延展。

（2）允许开发人员定义内容显示区，用于显示文字或其他内容

[  ][Link 1] [![3c6d55fbb2fb43162fa8bad820a4462308f7d3d9.jpg][]][Link 1]

如上图所示：

左侧和上方的黑线交叉的部分即可扩展区域。右侧和下方的黑线交叉的部分即内容显示区。用它可以实现部分拉伸，从而实现图片在[安卓][Link 2]系统上的完美应用

有这样一张图片，图片名为mask.png.

![1352357486_1989.png][]

将它制作了一个有拉伸部分的mask1.9.png图片。和有内容限制和拉伸部分的mask2.9.png图片。

**\[java\]**  [view plain][] [copy][view plain]

1.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.      xmlns:tools="http://schemas.android.com/tools"  
3.      android:layout\_width="match\_parent"  
4.      android:layout\_height="match\_parent"   
5.      android:orientation="vertical">  
6.        
7.        
8.      <Button  
9.          android:layout\_width="wrap\_content"  
10.         android:layout\_height="wrap\_content"  
11.         android:background="@drawable/mask"  
12.         android:text="1111"/>  
13.       
14.       
15.      <Button  
16.         android:layout\_width="wrap\_content"  
17.         android:layout\_height="wrap\_content"  
18.         android:background="@drawable/mask"  
19.         android:text="111111111111111111111"/>  
20.        
21.        
22.      <Button  
23.         android:layout\_width="wrap\_content"  
24.         android:layout\_height="wrap\_content"  
25.         android:background="@drawable/mask1"  
26.         android:text="111111111111111111111"/>  
27.        
28.        
29.      <Button  
30.         android:layout\_width="wrap\_content"  
31.         android:layout\_height="wrap\_content"  
32.         android:background="@drawable/mask2"  
33.         android:text="1111111111"/>  
34. </LinearLayout>

效果图：

![1352358009_1811.png][]

[view plain]: http://blog.csdn.net/lonelyroamer/article/details/8161958#
[Link 1]: http://baike.baidu.com/albums/5849637/5909480/0/0.html#0$3c6d55fbb2fb43162fa8bad820a4462308f7d3d9
[3c6d55fbb2fb43162fa8bad820a4462308f7d3d9.jpg]: /images/20220731/092b40ca007545da9722dcceed6b2f23.png
[Link 2]: http://baike.baidu.com/view/3091265.htm
[1352357486_1989.png]: https://img-my.csdn.net/uploads/201211/08/1352357486_1989.png
[1352358009_1811.png]: https://img-my.csdn.net/uploads/201211/08/1352358009_1811.png