Android必知必会--NinePatch图片制作

本文为CSDN学院免费课程《NinePatch图片制作从入门到精通》的笔记，建议新手先观看视频，整理此笔记是为了便于自己复习，有NinePatch基础的朋友可以直接观看第四部分。----【转载请注明出处】

注意，9-Patch 图不能转换为 webp，必须使用 png 格式。
source：创建 WebP 图片

一、工具介绍

---

这是一张PNG图片，为了方便观看做的比较大。在 Android 中使用 NinePatch 图片的一般都是很小的图片，因为当内容多了的时候，背景会自动拉伸来适应内容，而如果图片做大了，内容少，则图片也不会自动变小，所以用作 NinePatch 图片的 png 图片一般是比较小的。

打开 Android 自带的 NinePatch 图片制作工具(Android SDK目录下的 /tools/draw9patch.bat），并且打开上面的图片，如下：

打开图片后，在位置1的地方，可以看到图片的周围多了1圈1像素大小的透明的点，这就是我们要进行NinePatch图片制作的地方。

1. 位置1：编辑区。
   在这个区域来设置图片的“拉伸区域”和“内容区域”。
   注：“拉伸区域”意思是哪个区域是可以进行拉伸的；
   “内容区域”，如一个Button、TextView，Button中有文字，则这些文字所在的区域即为内容区域。又如一个Linearlayout，这个布局里面的内容显示的地方也是内容区域。
2. 位置2：拉伸预览区域。
   这是模拟垂直拉伸、水平拉伸、垂直水平都拉伸的3种情况的预览图。从上图中可知，“Zoom”是100%，也就是原图的编辑区的大小是原图大小，再看拉伸预览区域，垂直拉伸时，上下两条边的线条宽度被拉高了一倍，因为“Pathch scale”设置的是2x，也就是拉伸为原来的两倍，垂直拉伸后高度就是原来的两倍了，水平拉伸后则宽是原来的两倍了，两边都拉伸后则宽高都是原来的两倍。从上图可知，水平拉伸后，左右两条边的线条宽度比原来宽了一倍，而两边都拉伸的预览图可知4条边的线条宽度都被比原来宽了1倍。
3. 位置3：Zoom - 编辑区显示大小的调整，如果编辑区太小不好编辑，则可以调整这里把编辑区放大
4. 位置4：Patch scale - 拉伸倍数，调整拉伸倍数可以方便的查看拉伸不同倍数后的效果
5. 位置5：Show lock - 显示锁定的区域，即不可编辑的区域
6. 位置6：Show patches – 显示拉伸区域
7. 位置7：Show content – 显示内容区域
8. 位置8：显示使用提示信息

二、工具实战

---

1. 把编辑区视图显示调大，如下：
   

2. 为了方便查看拉伸后的效果也把拉伸比例调大一些：
   

3. 显示不可编辑区域，如下图，当把鼠标移到图片上时就会显示不可编辑区域，即红色框中的区域，现实中最外的红色框是没有的，这里加一个红框只是为了方面观看，从下图可看到红框外由一个像素大小的透明线条围了起来，这条线条即我们要编辑的区域。
   

4. 显示会被进行拉伸的区域，如下的粉红色区域即是会被拉伸的地方，其他的地方将不会被拉伸，也就是说不管怎么拉伸，变的只是粉红的区域，其他的区域的形状什么的都不会发生变化：
   

注：对于会进行拉伸的区域很多人都是这么说的，其实应该用一种更加准确的说法是“粉红色区域包括粉红色区域的前后左右的部分都是拉伸部分，其他的才是不会被拉伸的部分，我再加些边框后效果图如下：

上图中粉红色区域，和它上下左右的4个蓝色框区域都是拉伸的区域，其他还有4个红框的区域则是一直保持不变的区域。从这张图可看到总共有9个区域，所以称这样的图片为NinePatch图片。

5. 显示内容区域，如下图中蓝色的区域即内容区域，如一个TextView设置了下面的图为背景，则文字显示的区域为下面的蓝色区域：

6.画黑线的快捷方式

如上图，把鼠标移到编辑区的灰色区域，上、下、左、右都可以，如上图移到了上方的灰色区域，此时看到了两条灰色线，拉动这两条灰色线即可画出黑线，如下：

如上图，拖动右边的线向左拖，发现左边自动出现了一条黑线，继续向左方向拖是渐渐的消除这条黑线，如果一直拖到与最左边的灰色线重合，则这一条黑线都被消除了，如下图：

经常的情况是我们要自定义的画出黑色线，也就是可以从任何地方开始画黑色的线，方式也很简单，在灰色的地方按下鼠标开始拖动即可，如下：

如上图是从随意的一个位置按下鼠标向右拖动拖出来的一断黑色线。上、下、左、右四条边的黑色线都可以用类似的方法来画。当然了，也可以在透明的线上直接点或者拖动来画黑色线，如下：

如上图就是在透明的线上随意位置按下鼠标向右拖动，当松开鼠标时黑色线就出来了。
删除黑色线，前面说了一种删除黑色线的方式，也可以使用 Shift + 点击/拖动 来实现，如下：

7. Bad Patches

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

三、制作NinePatch图片实战

---

3-1 制作拉伸区域

为了方便知道使用NinePatch图片带来的好处，这里再使用另一张图片来进行解讲，如下：
：这是一个圆角的图形，因此在进行拉伸时，4个圆角应该保持不变，变的是4条直线。

有时发现打开png图片后发现四周的透明区域不太规则，不是说只会在原图形的周围多一像素的空间而已吗？这时拉动一下Zoom的比例的可以了，如下图：

这里我们要实现拉伸时线条的宽度不变，四个圆角不变。很多人在作用 NinePatch 图片时都是画一条一条的黑线，其实是他们没能够理解透 NinePatch 图片的制作，如这里要达到拉伸时线条的宽度不变、四个转角不变，只需要点两个点就够了，如下：

从上图的拉伸预览图可以看到线条宽度没变，4个圆角也没有变。有了前面的理论就容易理解了，在进行水平拉伸时，拉伸的是垂直的那条线的区域，垂直线的两边不会被水平拉伸的，如下图红框是会被水平拉伸的区域，它的左右两边的区域将保持不变：

相应的，垂直拉伸时拉伸的是水平的那条线的区域，这条线的上下两部分是不会被垂直拉伸，如下图中的红色区域会被拉伸：

3-2 制作内容区域

如果图片只是拉伸的功能，上面的知识就够用了。制作内容区域是可选的，如果你没有这个需求就不需要制作内容区域。如果这个图片要用作某些容器的背景，如用作 TextView 的背景时，TextView 中的文字的位置应该是怎样的呢？
如：公司要求这样：需要文字是靠矩形的底部对齐的，应该怎样制作符合这样要求的NinePatch图片呢？
这里还是使用上图的基础上制作，如下：

如上图，在下方画了一条黑钱，则这条黑线就定义了红框这个区域，当然，上图中的红框、蓝框是我画上去的为了方面讲解。这样内容只会出现在红框中，而不会出现在它左右两边的蓝框中。从右边的拉伸预览图也可以看到效果，把“Show content”勾上，则拉伸预览图就可以看到蓝色的区域，这些区域就是文字出现的地方。

接着来设置文字靠矩形的底部对齐，其实这样说不太对，因为当内容小于NinePatch图片设置内容区域的高度时，内容就小于内容区域，那这时内容应该显示在内容区域的哪里呢，这时就要配合gravity来调整。NinePatch图片编辑如下：

如上图在右边画了一条黑线，这条黑线偏下，它定义了内容在垂直方向的位置是偏下的，底部和右边这两条线的交叉部分，如上图的画了斜线的红框即为内容区域，文字将显示在这个区域。
其实这样理解内容区域是错误的，因为图片是会进行拉伸的，正确的理解应该是这样的：底部的黑线和右边的黑线是给内容设置padding，这样比较好理解，如上图设的内容设置用padding来理解如下图：

在Android的布局的TextView使用这张背景，代码如下：

<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="@drawable/hello_text_bg"
	android:text="@string/str_hello" />

效果图如下：

可看到字体的左右是有一些padding，而上下是方向的padding则是上方的比较大，看起来就像是文字在底部对齐一样。因此，NinePatch图片做的好，连TextView在布局中的padding设置都省了。

四、学习例子

更多的NinePatch图片的制作例子，可查看AndroidSDK目录下的图片，如：sdk\platforms\android-19\data\res\drawable-ldpi，使用搜索查找NinePatch图片，然后看官网的图片都是怎么点这些黑线的，有什么值得学习的，为什么别人这么点？多看，对于理解NinePatch图片的制作一定大有帮助的，搜索结果如下图：

1.如用ps打开这张图片：
放大：

从这张图片可以看到左边、上边都点了两个黑点，他的意图是什么呢？通过上面的学习分析，它这就是设置了拉伸区域在图形中间的加号的四周，即不管怎么拉伸，图形中间的加号是不会变大、变形的，也就是不会发生改变的。又如下面的图是为了保持中间的减号不被拉伸：

2.再比如

3.如果你看不明白某个 NinePatch 图片的意图，则可以把它复制到你的 Android 项目中，然后使用它，看看是什么效果即可知其意图。如有一张这样的 NinePatch 图片：

你想象不到使用它会是什么效果吧？这就是人家的高招，如果你不去看别人的，你自己就不会懂得像人家这样去制作NinePatch图片，所以要多看，如应用上图的NinePatch图片效果如下：

4.看下面两张这样的NinePatch图片：

它就是一条透明灰色的水平线，和一条黑色的垂直线，没有必要做成 NinePatch 啊，为什么呢？
使用这条线看看什么效果，如下：

很经典的一条线，所以需要用到这条线时，我们为何还要自己去制作呢，直接使用：android:background="@android:drawable/menu_separator"，这样做需要注意，可能在不同的版本这条线可能显示效果不一样。

这张就是保留发光的光晕不会被拉伸，拉伸的是中间白色的区域。文字内容也只会出现在白色区域。

这张是为了保留右边的箭头不被拉伸。

看着是个椭圆，使用后效果为：

8.再看看这些NinePatch图片的意图是什么？

答：这张图片也很高明，放大镜永远不会被拉伸，水平方向的拉伸是顶部右边的那个点，关键是垂直拉伸了，这是左边的那个点，拉伸的是这个点，而这个点是透明的，所以垂直拉伸时不会对下面有颜色的图片的形状有影响。

9.再来看这张，完全无法想象使用后会是什么效果，只能实际使用去直观的看了：

用作TextView的背景后为：

10.

这是scrollbar_handle_vertical.9.png，使用在imageView后为：

看上图NinePatch图片的两边明明是透明度比较高呀，可效果为什么是边线的颜色比较深？
11.还有这么小的NinePatch图片：


btn_default_transparent_normal.9.png

使用后的效果为：（真美！）

12.再看这个透明的NinePatch图片又有什么意图：

使用的效果为：

看了效果才明白其意图，就是图片就设置好了paddingLeft的，如下调用View的宽度后的效果：

不理解原理的人，以为下面的点就是内容区域，就会认为内容应该显示在图片的右边，实际上不是，跟据前面所学，下面的点是设置padding的，也就是paddingLeft是固定的矩离，如下图：

如果是这样的话，那paddingRight就是0，所以我们在保持长度不变的情况下增加文字，如下：

哈哈，证明了我的猜想是对的呀！！
如果NinePatch图片真的是设置了paddingLeft的值的话，那我在代码中把paddingLeft设置为0，看看效果：

猜想是对的！学习只用脑子想是不够的，还要用实践去证明！！
13.再来看一张使用相同原理的图：

效果为：

这达到了drawableRight的效果，并且图片已经是和文字居中的。

看着像是个圆形，其实他它是个圆角矩形，真是想不到啊！做图的人太牛了！把图片的容量做到了最小，节省apk的大小啊！

15.再来看这张又有什么高明之处呢？
divider_horizontal_dark.9.png

不知道高明在哪里。但相信Google的人不会这么无聊的，肯定有高明的地方。

这个就一像素的颜色，更加不明白其意图何在。
此时想我起我曾经在用友面试时，一位技术官问我，在ListView中是使用图片做分隔线好还是直接使用Shape图形好，技术官后来说是使用图片的好，因为Android的图形渲染机制不够好，如果直接使用Shape效率就会比较低、比较耗内存。这样可以解释为我们尽量的使用图片，而不要直接使用代码来画图形。
16.

这个就是为了图片的图形保持不变，如果只是这样那在使用图片时用wrapcontent即可，它这样做又会带来什么好处？
答：为了可以使背景图片适应任何的控件大小，而且保持图形大小不变。适应大小是为了使点击事件更容易发生，因为控件大的话点中的机率就会大。

最后 再次感谢录制视频的老师！