从网络上找到的一篇比较好的9图的使用说明, 以前一直有一些迷糊,看了这个后就清楚李,很多东西还是不明白的.

原文地址:

Android 9 patch 图片(.9.png 格式图片)

什么是.9.png格式的图片呢?为什么会有这个格式的图片?这种格式图片有哪些特殊的用途?请接着看…

定义:这种格式的图片在android 环境下具有自适应调节大小的能力,是一种为适应特殊拉申需要而产生的图片,防止图片在拉申后变形。

作用:(1)允许开发人员定义可扩展区域,当需要延伸图片以填充比图片本身更大区域时,可扩展区的内容被延展。(2)允许开发人员定义内容显示区,用于显示文字或其他内容

说明:

有这样一张png图片:

像这种图片我们一般作为背景图片来用,但在拉申的过程中会发生变形。我们不想让它在圆角及别的有特别形状的地方拉伸,因为拉伸这些地方会造成图片的变形。为了解决这个问题android中引入了一种新的图片格式.9.png。在android SDK 所带的tools里有一个制作这种格式图片的工具——draw9patch.bat。我们双击它就会打开一个如下图所示的工具:

说明:1)上方与左侧的黑点区所包含的区域就是拉伸区,当图片拉伸时只会拉伸这个区域的,别的区域不会被拉伸,左侧是三种拉伸情况下的预览图,可以看到图片没有变形。

2)右侧与下方的黑线对应的区域为内容区,比如作为TextView,Button的背景时可能还需要显示文字。

3)工具最左侧的蓝色区域是内容区的预览,文字会在这个区域内显示。

实例说明:

有这样一个布局文件:

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity" >
     <TextView
         android:id="@+id/t"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:background="@drawable/t"
         android:gravity="center"
         android:text="@string/hello_world" />
     <TextView
         android:id="@+id/tt"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@id/t"
         android:background="@drawable/tt"
         android:gravity="center"
         android:text="@string/hello_world" />
     <TextView
         android:id="@+id/ttt"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@id/tt"
         android:background="@drawable/ttt"
         android:gravity="center"
         android:text="@string/hello_world" />
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@id/ttt"
         android:background="@drawable/tttt"
         android:gravity="center"
         android:text="@string/hello_world" />
</RelativeLayout>

说明:有四个TextView它们对应的背景分别为t.9.png

,tt.9.png,ttt.9.png,tttt.png

在Graphial Layout下如下:

分析:1)t.9.png设置了拉伸区、内容区,而且内容区适当大,我们可以看到这种显示效果刚好

2)tt.9.png设置了与t.9.png相同的拉伸区,但内容区只用了两个像素设置

3)ttt.9.png只设置了拉伸区

   4)tttt.png就是一个普通的png图片

大家可以结合4张图片对比一下4个TextView的显示情况。结论显而易见…

PS:对于拉伸区在上方与左侧各用一个像素点设置就可以,而对于内容区(可选)就尽量大一些、尽量居中显示效果会更好。