.9.png图片的生成和使用

开发应用程序的时候，若是一个应用的界面太丑，给用户的第一感受就是这个产品很垃圾，即便功能很强悍。大公司的码农固然就不用担忧了，由于有不少艺 术天赋的美工美眉来处理这个方面，可是若是是小公司的话，或者说你想本身开发应用的话，没有一个吸引人的界面是不会获得用户关注的。本身开发的应用若是看 着很喜好，那固然再好不过了

　　废话有些多，了解.9.png图片已经一段时间了，索性将其记载下来，以防之后忘记。虽然网上有不少，可是很乱，看着心烦，并且不符合本身的需求，因此仍是本身动手丰衣足食。

　　.9.png图片其实就是png格式图片，不过它比普通的png图片外围多了1px（像素）的边框，另外就是使用这种格式的图片能够实现背景自 适应大小且不失真的效果。好比某些控件横竖屏切换后控件的样子就变形了，或者某些图片做为控件背景也变形，这会让人很郁闷。幸亏.9.png图片能够提供 这些须要的功能

　　使用步骤

一、制做属于你本身的png图片，必定要是png图片。能够本身PS制做，也能够解压其余应用的apk文件，用里面的图片资源，Android系统也有图片资源可使用（）

二、在D:\android\android-sdk-windows\tools目录下找到draw9patch.bat文件，而后将其打开，将你要处理的png图片拖入便可。或者File --> Open 9 patch

上边黑线：横向拉伸区域，必需要画的，拉伸是横向拉伸，如右边的区域第二个拉伸的就是横向拉伸的效果

左边黑线：纵向拉伸区域，必需要画的，拉伸是纵向拉伸，如右边的区域第一个拉伸的就是纵向拉伸的效果

下边黑线：可选，横向内容显示区域

右边黑线：可选，纵向内容显示区域

剩下的本身试试就知道了

三、注意，黑线必须是连续的，若是你感受画的很差，按shift+鼠标左键将其擦出，而后重新画。画完后点击File-->save 9-patch保存便可，效果以下图

四、接下来须要在程序中使用了，将这个图片放到drawable中便可，跟其余的图片使用没什么区别了，惟一神奇的就是能够自适应，不失真

好比咱们用这个图片定义一个Button，另外加个TextView的背景图，也是.9.png图片。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="6dp"
    android:orientation="vertical" >

    <TextView
        android:layout_gravity="right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
           android:padding="5dp"
        android:background="@drawable/sms_out_normal_bg"
        android:text="http://www.cnblogs.com/loulijun/\n -- 花郎" />
    
    <Button 
        android:id="@+id/sendMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:background="@drawable/test"
        android:text="发送消息给允儿"
        />
</LinearLayout>

运行效果以下：

 

 

 

如上图所示，左边那条黑色线表明图片垂直拉伸的区域，上边的那条黑色线表明水平拉伸区域，右边的黑色线表明内容绘制的垂直区域，下边的黑色线表明内容绘制的水平区域，右边和下边的线是可选的，左边和上边的线不能省略。

        采用NinePatch图片作背景，可以使背景随着内容的拉伸（缩小）而拉伸（缩小）。那么如何将普通的PNG图片编辑为NinePatch图片呢， Android  SDK/tools目录下提供了编辑器draw9patch.bat，双击便可打开，使用起来很简单了，主要有如下选项：

        采用NinePatch图片作背景，可以使背景随着内容的拉伸（缩小）而拉伸（缩小）。那么如何将普通的PNG图片编辑为NinePatch图片呢， Android  SDK/tools目录下提供了编辑器draw9patch.bat，双击便可打开，使用起来很简单了，主要有如下选项：

• ? Zoom: 用来缩放左边编辑区域的大小
• ? Patch scale: 用来缩放右边预览区域的大小
• ? Show lock: 当鼠标在图片区域的时候显示不可编辑区域
• ? Show patches: 在编辑区域显示图片拉伸的区域 （使用粉红色来标示）
• ? Show content: 在预览区域显示图片的内容区域（使用浅紫色来标示）
• ? Show bad patches: 在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域，若是彻底消除该内容则图片拉伸后是没有变形的，也就是说，无论如何缩放图片显示都是良 好的。（实际试发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的，一边来讲只要色差不是太大不用考虑这个设置。）

例子:

NinePatch是一种颇有用的PNG图片格式，它能够在特定区域随文字大小进行缩放。以下：

 

从上图能够看到，背景图片的中间区域会随着文字的大小进行缩放。背景图片是一张NinePatch图片。 NinePatch图片可使用 android自带的draw9patch工具来制做，该工具在SDK安装路径的tools目录下。执行该工具，而后点击 “File”->“open 9-path”打开一张用于制做NinePatch图片的原来图片。在画布的上方和左方的边上画线指定缩放区域，
勾选“Show patches”可显示画定的区域，绿色
为固定大小区域，红色为缩放区域，文字会摆放在红色
区域。制做完后，点击“File”? “save 9-path”保存
图片，draw9patch工具会自动为图片加上*.9.png后缀。
把制做好的图片拷贝进项目的res/drawable目录，而后
编写代码。以下：

 

 

 

2：使用

 

传 统UI开发中，若是背景的大小不同，通常须要为每种大小都 制做一张图片，这在button中尤其明显。固然咱们也能够一小块一小块水平重复的画，也可 以垂直的话。在android中专门有一种叫nine patch图片（以 9.png结尾）来解决背景大小不同时，只用一张背景图片。

     用自带的tools\draw9patch.bat 打开一张png图片，咱们能够在png图片最外面的空格画一个像素宽的黑线。左边是编辑区，在左边的图中，左边黑线的高度决定了垂直拉升时的扩展区域，也 即当垂直拉伸时，只有这个区域的图片会被拉伸。同理图片上边的黑线长度决定了水平拉升时的扩展区域。右边区域是拉升的效果图，从上之下分别为垂直拉伸，水 平拉伸，以及两个方向的拉升。该工具提供了所见即所得的nine patch png编辑方式 。

把编辑后的png保存为 9.png到工程目录的res/drawable目录下，若是你的9.png中没有黑线，那么eclipse是会报错的。

效 果图以下。从中咱们也能够理解为何叫 nine patch，至关于把一张png图分红了9个部分，分别为4个角，4条边，以及一个中间区域，4个角是不作拉升的，因此还能一直保持圆角的状态，而2条水 平边和垂直边分别只作水平和垂直拉伸，因此不会出现边会被拉粗的状况，只有中间用黑线指定的区域作拉伸。结果是图片不会走样

 

 

 

NinePatch是一種「可延展」的PNG圖檔。NinePatch圖檔的用途是製做「可隨文字大小縮放」的圖片，如圖1。

圖1: 文字背景可隨著文字大小縮放

NinePatch是颇有用的圖片格式，可作為widget的「背景圖」。如圖１的範例，其應用程式的設計以下：

• 文字部份使用TextView元件
• 使用TextView的XML attribute來設定文字大小
• 使用TextView的XML attribute來設定一張背景圖
• 使用NinePatch圖片作為背景圖，如此一來背景圖就能够隨著文字大小縮放

首先，第一個工做就是「製做NinePatch圖檔」，方式以下。

Step 1. 準備一張原始的PNG圖檔，如圖2。

圖2: 原始PNG圖檔（arrow.png）

Step 2. 啟動Android提供的draw9patch工具，直接執行Android SDK tools/目錄下的draw9patch執行檔便可，如圖3。

圖3: Android SDK提供的draw9patch工具（點擊看原圖）

Step 3. 開啟原始PNG圖檔，編輯圖檔，如圖4。

圖4: 開始編輯圖檔（點擊看原圖）

如何編輯NinePatch圖檔

NinePatch圖檔的製做方式是「繪製二條線」，分別在原始圖檔的上方與左方繪出二條「黑線」，黑線所交集的區域即為「可延展」區域。以下圖的粉紅色區域。

圖5: 定義延展區

「可延展區」是Android框架用來擺放文字的區域，換句話說，文字(TextView)只會被放置在粉紅色區域，並且擺放的原則是「對準粉紅區域的中心點」，即上下置中、左右也置中。非「可延展區」，即綠色部份，並不會隨著文字的大小縮放。因此：

1. 綠色區域是固定大小區域
2. 粉紅色區域是可延展區域、文字擺放於此

圖中的「二條黑線」是怎麼畫出來的呢？方式以下。

Step 4. 移動「Zoom」調整圖檔比例，讓「斑馬線」的大小能適中，如圖6。

圖6: 調整比例

Step 7: 畫黑線

斑馬線是用來畫黑線的區域，怎麼畫黑線呢？用滑鼠點斑馬線就能够了。要怎麼刪除黑線上？按住「Shift」再點斑馬線便可。斑馬線很很差點，因此若是不是要特地訓練操做滑鼠的技巧以及考驗眼力，善用「Zoom」功能能够幫助黑線的繪製。

勾選「Show patches」選項，便可顯示粉紅色區域，如圖7。

圖7: 即時顯示可延展區

在draw9patch的右邊也會有縮放的展现圖。

Step 8: 完成NinePatch圖檔

儲存完成的NinePatch圖檔，draw9patch會自動將圖檔的副檔名儲存為*.9.png。完成NinePatch圖檔後，就能够開始寫程式了。

 

開始寫程式: HelloNinePatch

範例HelloNinePatch的實做方式以下。

Step 1. 创建一個新的Android專案，命名為HelloNinePatch。

Step 2. 將arrow.9.png托曳(drag)到HelloNinePatch專案裡的「res/drawable」目錄下。如圖1。

圖1: 將arrow.9.png放進res/drawable資料夾

Step 3. 修改UI（res/layout/main.xml），設計出上一篇教學(#30)裡的圖2畫面。main.xml的內容以下。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="small world"
    android:textSize="12sp"
    android:background="@drawable/arrow"
    />
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="big world"
    android:textSize="24sp"
    android:background="@drawable/arrow"
    />
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="super world"
    android:textSize="48sp"
    android:background="@drawable/arrow"
    />
</LinearLayout>

這 裡的作法是，在UI上擺放Button元件，並設定Button上的文字及大小。透過「android:background」屬性的設定，我們 將Button的背景設定為「@drawable/arrow」，即「drawable資源（drawable/目錄下）裡的arrow圖 檔」，Android框架會去找到arrow.9.png檔案。

因為arrow.9.png是一張NinePatch圖檔，所以會隨著Button上的文字大小延展。

Step 4: 完成HellNinePatch

程式碼不须要作任何修改，直接執行HelloNinePatch專案便可

 

再补充下！

 

 

1.什么是“9妹”(9patch)？
它是一个对png图片作处理的一个工具，可以为咱们生成一个"*.9.png"的图片;
2.何为"*.9.png"?
所谓"*.9.png"这是Android os里所支持的一种特殊的图片格式,用它能够实现部分拉伸；这种图片是通过”9妹“进行特殊处理过的，若是不处理的话，直接用PNG图就会有失真，拉伸不正常的现象出现。
3.它的用途是？
说到用途，这种特殊格式的png图，我也看了网上的相关文章但都是用一个能自适应的button举例子！(以下图)清一色抄袭.. - -、
          (此实例我们直接无视掉，在后面我会给你们灌输游戏中实例)
这个例子是指当button上的字体大小改变，那么文字底下的png图也会自动适应文字。
这彷佛代表作Android 软件应用 使用一些组件的的时候会时经常使用到；
       4.那么实际在游戏中到底如何使用呢？什么状况下去使用呢？
   ....固然啦，身为作游戏我必定要”9妹“利用在我们游戏中才行，否则岂不是白研究了、通过思考忽然想到了一些状况，而且发现“9妹”确实在游戏开发中占有必定的份量！下面咱们来先熟习“9妹”工具，而后再跟你们举例，贴图来讲明其用途、毕竟有图有真相 呵呵~
启动9妹：
在你Android SDK 路径下 X:\android sdk\tools ,你会找到一个 【draw9patch.bat】,没错这就是9妹啦、官方名 NinePatch ；
         
提示导入一张png图片，而后真正进入"9妹"的操做界面（以下图）：     （图1）
      
序 列 ① ：在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域，若是彻底消除该内容则图片拉伸后是没有变形的，也就是 说，               无论如何缩放图片显示都是良 好的。 （实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的，一边来讲只               要色差不是太大不用考虑这个设置。）
序列 ② ：区域是导入的图片，以及可操做区域。
序 列 ③ ：这里 zoom：的长条bar 是对导入的图放大缩小操做，这里的放大缩小只是为了让使用者更方便操做，毕竟是对像素点操做比较费                   眼，下面的 patch scale 是序列 ④区域中的三种形态的拉伸后的一个预览操做，能够看到操做后的图片拉伸后的效果。
序列 ④： 区域这里从上到下，依次为：纵向拉伸的效果预览、横向拉伸的效果预览，以及总体拉伸的效果预览
序列 ⑤： 这里若是你勾选上，那么当你鼠标放在 ② 区域内的时候而且当前位置为不可操做区域就会出现lock的一张图,就是显示不可编辑区域 ;
序列 ⑥： 这里勾选上，那么在④ 区域中你就会看到当前操做的像素点在拉伸预览图中的相对位置和效果。
序列 ⑦： 在编辑区域显示图片拉伸的区域;
如何操做：
鼠标左键选取须要拉伸的像素点；  shift+鼠标左键取消当前像素点。
操做区域：
                                           你们看到导入的png图片默认周围多了一像素点，也就是这一圈一像素点就是我们的可操做区域。可是由于下方和右方可操做区域属于可选区域，不用理会；主要你们注意Left 和 top 操做区域；      Top操做区域的一排像素点，表示横向拉伸的像素点；      Left操做区的一排像素点，表示纵向拉伸的像素点；