android 9patch (讲的很不错,对等全面：转)

android 9patch (讲的很不错,相当全面：转)

下面是两篇有参考性的文章！

?记着：我们来澄清一下这两条不同的线，左边跟顶部的线来定义哪些图像的像素允许在伸缩时被复制。
? ?? ? 底部与右边的线用来定义一个相对位置内的图像，视图的内容就放入其中。

关键学习ninepatch的用法、一些注意事项、以及如何在项目之中使用

1:介绍

参考：http://blog.sina.com.cn/s/blog_5033827f0100r4dm.html

NinePatch图片以*.9.png结尾，和普通图片的区别是四周多了一个边框（如下图所示）：

????????????????????????????????? android 9patch (讲的很不错,对等全面：转)

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

??????? 采用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的容如下。
```
&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    &gt;&lt;Button    android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="small world"    android:textSize="12sp"    android:background="@drawable/arrow"    /&gt;&lt;Button    android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="big world"    android:textSize="24sp"    android:background="@drawable/arrow"    /&gt;&lt;Button    android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="super world"    android:textSize="48sp"    android:background="@drawable/arrow"    /&gt;&lt;/LinearLayout&gt;
```
  的做法是，在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操作区的一排像素点，表示纵向拉伸的像素点；
  下图是我对图片的操作：
  ?

android 9patch (讲的很不错,对等全面

热点推荐