9.patch的详细介绍

标签： 

ninepatch

 

.9.png

分类： android

与传统的png 格式图片相比， 9.png 格式图片在图片四周有一圈一个像素点组成的边沿，该边沿用于对图片的可扩展区和内容显示区进行定义。 

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

       例如，我们经常看到的android系统的按钮，还有各种短信应用中使用的对话背景图片的效果，就是使用的.9图片。

       下面，就介绍一下如何使用android自带的工具，制作.9图片。

       1 运行android SDK中tools路径下的draw9patch.bat文件。运行界面如下：

 

       2 选择一张图片（.png格式）添加进来。你会发现本来边缘没有透明区域的图片，四周多出了一像素的空隙，这四个空隙是给.9图片划线用的。

 

       3 所谓给.9图片划线，指的是通过划线，决定图片的可拉伸区域和显示文本信息的区域。

       其中，上方和左方的线是控制图片的可拉伸区域的，也就是说，上方的线控制图片横向可拉伸，左侧的线控制纵向可拉伸。下方的线和右侧的线控制图片的文本区域，也就是说，如果图片上有text，就会把位置控制在下方和右侧的线围城的区域里。

       4 直接通过鼠标在边缘一像素区域的拖动划线。如果想删除划线，按住shift + 鼠标左键，删除划线。

 

       5 右侧会有三个图片展示，第一张为左侧线产生的纵向可拉伸效果图，第二张为上方线产生的横向可拉伸效果图，第三张为横纵向同时拉伸的效果图，完成划线之后点击保存。

       至此，.9图片制作完成。至于使用.9图片的效果，需要在实践中验证，不再赘述。同时，要注意工具下方功能选项和拖动条的使用。

----------------------------------------------------------------------------

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操作区的一排像素点，表示纵向拉伸的像素点；

以上摘自李华明博客

 

首先说一下9 path是什么。9path是android特殊格式的png图，它以.9.png为后缀名。

 

它用在使用图片做背景时做拉伸使用的，9path会选择一个背景图片中的一部分在拉伸时做平铺，其他区域保持原始大小，来组合成一张新的背景。当然也可以用在设置图片的时候设置的图片超过原始大小时，将其中的部分做平铺，其他区域保持不变。

怎么得到9path图片？

使用android sdk中自带的工具

双击打开。

点击file，打开一张普通的png图片。

序列 ① ：在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域，如果完全消除该内容则图片拉伸后是没有变形的，也就是说，不管如何缩放图片显示都是良 好的。 （实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的，一边来说只要色差不是太大不用考虑这个设置。）

序列 ② ：区域是导入的图片，以及可操作区域。

序列 ③ ：这里 zoom：的长条bar 是对导入的图放大缩小操作，这里的放大缩小只是为了让使用者更方便操作，毕竟是对像素点操作比较费眼，下面的 patch scale 是序列 ④区域中的三种形态的拉伸后的一个预览操作，可以看到操作后的图片拉伸后的效果。

序列 ④： 区域这里从上到下，依次为：纵向拉伸的效果预览、横向拉伸的效果预览，以及整体拉伸的效果预览

序列 ⑤： 这里如果你勾选上，那么当你鼠标放在 ② 区域内的时候并且当前位置为不可操作区域就会出现lock的一张图,就是显示不可编辑区域 ;

序列 ⑥： 这里勾选上，那么在④ 区域中你就会看到当前操作的像素点在拉伸预览图中的相对位置和效果。

序列 ⑦： 在编辑区域显示图片拉伸的区域;

操作：鼠标左键选取需要拉伸的像素点；  shift+鼠标左键取消当前像素点。

如下图：新导入的png文件在周围会多出一个像素点，这一圈一像素点是我们的操作区域

这里需要注意一点就是，必须左边和上边都得有黑线，如果只有一边有黑线的话，生成的png文件在eclipse中会报错。另外要注意内容区域的标记不能有间断，也就是说标记要连续且仅有一处，否则.9.png图片在放入项目下会报错。

主要大家注意Left 和 top 操作区域；

Top操作区域的一排像素点，表示横向拉伸的像素点；

Left操作区的一排像素点，表示纵向拉伸的像素点；

 

保存：点击file中的保存，直接写文件名即可，默认会保存在“我的文档”目录下，这个目录可以调整，保存完成之后就可以看到一个以.9.png为后缀的图片了，如下图：

可以看到这张图的左侧和上部都有一条黑线。

使用：直接放在你的功能下的drawable目录或者其他drawable目录下即可。使用的时候直接在xml文件中使用，例如：

<TextView android:id="@+id/swithCity" 
    android:background="@drawable/cityswitchback"android:layout_width="wrap_content" 
    android:layout_height="wrap_content" android:text="切换城市" 
    style="@style/text03" android:gravity="center"> 
</TextView>