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

一、创建NinePatchDrawable

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

 

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

 

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）允许开发人员定义内容显示区，用于显示文字或其他内容

  

如上图所示：　　

 

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

 

 

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

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

 

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. <!-- 有拉伸设置的.9.png片为背景的按钮 ，内容过多，拉伸部分会拉伸 ，图片不会变形-->

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. <!-- 有内容限制和拉伸设置的.9.png片为背景的按钮 ，内容过多，拉伸部分会拉伸 ，并且文字内容位置改变-->

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>

效果图：