android+点九图⽚+教程，史上最详细的android的点9（.9）图
⽚制作教程，菜鸟。。。
.9(点9)图⽚是安卓开发⾥⾯的⼀种特殊图⽚，这种格式的图⽚通过draw9patch⼯具编辑⽣成，使图⽚可以在android系统下适应不同的分辨率进⾏展⽰。
.9图⽚⼀般命名.9.png，如my.9.png，那么为什么要做.9图⽚呢？下⾯我们通过实例来看⼀下。我们先来看看原图
这是⼀个⽓泡图⽚，我准备⽤来在地图app上显⽰地址等信息的。下⾯我们来看看不使⽤.9格式的图⽚的效果是怎么样的。
我把它命名为pp.png，并设置为layout的背景图⽚。下⾯这张是我们处理前的效果图：
我们再看看处理后的效果图：
现在⼤家应该知道为什么要做.9图⽚了吧？就是为了这个效果！那么，为什么会有这么⼤的差距的呢？原因很简单，因为我们的原图是很⼩的，但是在上⾯的图⽚中我们可以看到，图⽚被放⼤了，因为⽂字太多，所以整个图⽚被进⾏了拉伸，⽽整张图⽚被拉伸的话，就会变成了第⼀张图⽚那样，变得很丑。
⽽第2张图⽚是经过了处理的，制作成了.9格式的图⽚，换句话说就是我们指定了这张图⽚哪些地⽅可以进⾏拉伸，哪些地⽅不能，所以就达到了这么完美的效果。
说了这么多，那么.9图⽚跟普通图⽚有什么区别呢？下⾯我们来看看实例中的这张图⽚
我们可以看到，这张就是经过处理的图⽚，他的⽂件名也从pp.png变成了pp.9.png，注意.9是必须的，不可以删除。(后⾯这个⽂件后缀名.png应该也是必须的，也就是说我们的图⽚必须是png格式的，这个没有求证，不过我想我的猜测应该是100%准确的)
从上⾯的图⽚中，我们可以看出什么？没错，就是四个边上多了⼀些⿊⾊的点和⿊⾊的线。这些就是构成.9图⽚的必要元素。就是这些⿊⾊的线指定了我们的图⽚哪些地⽅可以拉伸，哪些不能拉伸。下⾯我们详细的来说说怎么制作这张图⽚。
如何制作.9图⽚？
在制作.9图⽚前，我们先来认识⼀个⼯具，这个⼯具叫draw9patch，是安卓sdk⾃带的⼯具。专门⽤来制作.9图⽚⽤的。它就存在我们的sdk -->tools⽬录下，如
双击打开这个⼯具，我们可以看到它的界⾯⾮常的简洁。
下⾯把我们处理过的图⽚拖进来看看效果
中这张图⽚中，我们可以看到，左边是图⽚的编辑区域，是我们⽤来设置图⽚的，⽽右边是效果预览区域。这个⼯具的操作⾮常简单，只有2个操作：
1、在图⽚边缘点击⿏标左键，添加⿊⾊点
2、按住Shift键，在⿊⾊点上点击⿏标左键，删除⿊点
那么如何确定要在哪⾥画点呢？其实，.9图⽚是有规则的：
1、⾸先将图⽚分成上，下，左，右4条边，这就跟我们⾁眼看到的是⼀样的
2、左边表⽰上下拉伸，即控制⾼度
3、右边表⽰确定内容显⽰的⾼度
4、上边表⽰左右拉伸，即控制宽度
5、下边表⽰确定内容显⽰的宽度
具体看下图：
有些朋友已经感觉到很乱了，完全听不懂什么意思是吧？没关系，我们⼀步⼀步来解释。⾸先我们把⿏标放到图⽚内，靠近右边的⿊⾊，在图⽚内将会出现⼀个阴影的⽅框，如下图，说明这个⽅框就是我们以后显⽰内容的区域，⽽这条⿊⾊的作⽤的就是规定这个图⽚(我们的原图)以后⽤来显⽰⽂字的⾼度就只有这个阴影⽅框的⾼度这么多。
接着我们把⿏标靠近下边的⿊线，同样会出现阴影框，这个框表⽰以后我们的内容显⽰的宽度，如下图：
最后，我们将⿏标移动⼀下，移动到可以让两个阴影同时出现的位置，可以看到如下图，他们的交集部分就是最终显⽰内容的全部区域。
说了这么多，我们的朋友可能还是很迷糊对吧？没关系，让我们把下⾯的“Show content”选项给勾上，然后再看看整个软件的显⽰效果
有没有发现右边的效果预览图出现了紫⾊的区域？没错，那个紫⾊表⽰的区域正是我们以后内容显⽰的区域，出现这样的效果，说明我们当前的⿊点，⿊线画得是正确的。
另外，有些朋友可能会问了，为什么右边会有三个效果图，表⽰什么意思？实际这3个效果表⽰的是三种情况：
1、上下拉伸，即⾼度被拉⾼了
2、左右拉伸，即宽度被拉长了
3、上下左右同时拉伸，⾼度和宽度同时都被拉长了
好了，下⾯我们正式开始画实例！⾸先，在软件左上⾓的菜单中，打开我们的原图(直接把原图⽂件拖放到软件界⾯中也是⼀样的)，打开后，记得勾上“Show content”
此时我们可以看到右边的效果图，三个图形全部是紫⾊，说明内容占满了整个图⽚。还记得我上⾯说过的画线规则吗？
1、⾸先将图⽚分成上，下，左，右4条边，这就跟我们⾁眼看到的是⼀样的
2、左边表⽰上下拉伸，即控制⾼度
3、右边表⽰确定内容显⽰的⾼度
4、上边表⽰左右拉伸，即控制宽度
5、下边表⽰确定内容显⽰的宽度
那么，我们先来确定我们的内容显⽰的宽度，也就是说，我们先来画底边(即下边)
此时我们可以从右边的效果图看出，现在内容的显⽰区域已经缩⼩了，也就是内容的宽度已经变了，紫⾊的区域不再是占满整张图⽚了。接下来我们来画右边的线，也就是确定内容的显⽰⾼度。
从效果图可以发现，⾼度也已经被缩⼩了，不过这⾥要注意⼀下，尽量上下的长度相同，也就是上下留空的位置相同，否则上⾯空很多或者下⾯空很多就不好看了，除⾮你本⾝就有这样的需求。
⽐如下⾯这个效果图，上⾯的空⽩区域很⼤，下⾯的很⼩，到时候显⽰的时候就是上⾯空了很多⾏
或者这个图，上⾯很⼩位置，下⾯很空，这样的话到时候⽂字就会贴着上边显⽰，⽽底下很空
所以我们在画下边线和右边线的时候尽量做到要左右、上下留出的空位相同，这样显⽰的效果才最完美。
画完右边后，细⼼的朋友可能会发现，右边的第1、3两个效果图的⾼度还是有问题，这2个图⽚的⾼度还是占满了整张图⽚，为什么呢？原因很简单，因为1、3两个效果图是⾼度被拉伸过的，⽽我们还没有定义上下拉伸的位置。下⾯我们来画左边的，左边的⽐较简单，因为我们不是定义区域，我们只是定义可以拉伸的位置，换句话说，我们只是画⼀个需要在左边的边上进⾏重复显⽰的内容，那么这个时候我们只要点⼀个⿊点就可以了，因为左边本来就是⼀条直线，那么重复显⽰的也是相同的内容，
只要重复⼀个点就已经⾜够。如下图：
这时候我们发现效果图全部都变了，变得很完美了，真的是这样吗？
很明显，这并不是最终的.9图，因为我们还没有画上边的线，那么有⼩朋友会问了，现在效果图已经跟我最开始的图⽚⼀模⼀样了啊，为什么还不⾏呢？原因很简单，因为我们现在还没有画出上边要拉伸的位置，换句话说，现在看效果图是ok了，但是实际⽤的时候，因为图⽚会进⾏左右拉伸，那么到时候可能显⽰就变形了。那么我们要怎么处理呢？当然是画上边的线啦！但是这⾥有⼀个地⽅要注意的，那就是因为我们这个原图，底部是⼀个⼩三⾓，⽽这个⼩三⾓是不能被拉伸的，⽽在⼩三⾓的左右两边都是可以拉伸的，那么下⾯我们先在上边线的左边画⼀个点，表⽰左边的部分拉伸，看看效果如何：
细⼼的朋友已经发现了，右边的效果图中，第2、3两个图由于进⾏了左右拉伸，所以它底下的⼩三⾓已经移位了，因为我们现在只定义了上边线的左边部分拉伸，所以左边⽆限延长，那么就导致左边长，右边短，也就变成了⼩三⾓跑向了右边了。
下⾯我们在右边也点⼀个点，注意，位置要跟左边的⼀样，否则⼩三⾓就会偏向其中⼀边。这⾥有个问题要说明⼀下哈，因为我们的原图本⾝设计的有点偏差，他这个⼩三⾓本⾝就是有点偏右显⽰的哈。好了，到这⾥我们已经完成了4条边的画点，画线。那么现在看到右边的效果图已经是正确的了，
⼩三⾓也恢复了居中显⽰了。android简单教程
最后，我们点击软件左上⾓菜单，保存.9⽂件，⾃动给我们的⽂件名加上.9。例如我输⼊⽂件名a，它⾃动会⾃动保存为a.9.png。在保存界⾯中我们也可以看到，这个⽂件的后缀格式必须是.png，那么也就说明了我上⾯的猜测是正确的！
把这个图⽚放到我们安卓项⽬的drawable⽬录，然后引⽤就可以看到我们最初的那个完美的效果图了。这⾥要注意⼀个地⽅哈，如果是使⽤Android Studio的朋友，切记，⼀定要把.9图⽚放到drawable⽬录下，如果你平时习惯了把图⽚放到mipmap⽬录的话，你就要特别注意：所有的.9图⽚都必须放到drawable⽬录下，否则，如果你放到mipmap⽬录的话，你是⽆法引⽤的，这点要特别注意。
为了测试我上⾯所教的⽅法是正确的，我特意做了⼀个最简单的长⽅形的图⽚
下⾯我们就拿这个图⽚来练习⼀下。⾸先我们先来看⼀下不处理成.9格式图⽚的效果是怎么样的
哇塞，这显⽰出来的效果也是让我惊呆了！下⾯我们再来看看处理过的图⽚效果是怎么样的
完美啊！简单处理⼀下效果差距如此的⼤~说明.9还是⾮常有⽤的⼀门知识。下⾯让我们来看看这张图是如何处理的
使⽤⼯具打开我处理好的图⽚，可以看到我在左边和上边只画了⼀个点，然后右边跟下边分别画了⼀条线
有朋友可能会问，为什么这⾥上边只画⼀个点的？前⾯不是左右要各画⼀个点的吗？能问出这样问题的⼩朋友，说明我这个教程你还没有完全看懂，也说明你没有认真的看我的教程。上⾯我说了，我们画两个点，是因为前⾯的图⽚中，我们底部有个⼩三⾓不能被拉伸，所以我们只能拉伸左右两边，因此要左右各画⼀个点表⽰重复显⽰的位置。⽽在这张图中，我们上，下两边都是直线，⾃然不需要注意这些问题了，因为我们整条上边线都是可以被拉伸的，下边线也是可以被拉伸的，那么只要画⼀个点就可以了。实际拉伸的效果就是这样
上边⼀个点，往左右两边不断的重复显⽰那个点。然后就变成了右边效果图中显⽰的效果了。实际上就是拉伸的时候，往左，右两边不断添加那个⿊点本⾝占的那个位置的内容。
android下.9图⽚制作的教程就到这⾥了，不知道朋友你看懂没有呢？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。