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

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

一、工具介绍

这是一张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.这个知识点抄于网上

点击这个按钮，如果有坏的拉伸，则会显示出红色。

在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域，如果完全消除该内容则图片拉伸后是没有变形的，也就是说，不管如何缩放图片显示都是良好的。（实际试发现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使用这张背景，代码如下：

效果图如下：

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

四、学习例子

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