Android .9图

一、什么情况下可以用到点九图

先来看一个例子，这里是一个圆角矩形：

因为Android有太多的分辨率了，当圆角矩形控件在被拉伸放大的时候，圆角的部分就会出现模糊的情况。而点九切图就不同，它可以保证不管你上下还是左右拉伸，放大都可以保持原有的清晰度。

而且，你仔细比较一下，会发现：普通的拉伸效果，圆角部分也跟着变大了；点九下的效果圆角部分，原来是多大就还是原来的样子。

二、原理

点九，就是将图片横向和纵向随意进行拉伸，却可以保留像素的精细度、渐变质感和圆角的大小不发生变化，以实现多分辨率下的完美显示效果。

盖房子的你知道吧？你要盖一座房子，不对，是已经盖好了。但是现在你觉得小了点，想再宽一点，再长一点，你怎么办？

A.全部拆了重新盖；

B.我只拆四个角，然后延长，再把四个角按照原来的样子重新垒好。

你选哪个？当然是B了。

现在，你盖的房子更宽了，也更长了，四个角的大小变了吗？除了位置，大小还是原来的样子。你只不过是把中间的部分增加了而已。

（这样好理解了吗？）

那么，通过上面的例子，我们大体知道了：哪里是可以拉伸的，哪里是不需要拉伸的？

你可以把这个当做一个俯瞰下的房子。

（1）1.3.7.9这四个部分，是屋角，要保持原来的样子，所以是不拉伸的；

（2）5，这一部分是房子的里面，放东西和住人的，要随着长宽的变化而变化的，身不由己，没办法；

（3）2.4.6.8这四个部分，是四面墙，是可以拉伸的。前面说的就是这部分的变化。（它们的拉伸，就相当于是5这块被拉伸了。）

那具体我们可以总结为：圆角（不需要拉伸）、除了圆角之外的边（需要拉伸）。

三、怎样操作

我们以对话框举例说明：

首先，我们简化一下切图文件，“点九”图片拉伸1个像素与拉伸10个像素效果上是没有区别的，所以尽量缩小图片的尺寸。

在这里，我标注了每一部分是什么：

（1）1和2是横向和纵向拉伸的区域；

（2）3和4是内容在横向和纵向要显示的区域。

你可以看到，上下左右都有一个黑色的线段。

你要问了，那个对话框凸出来的那个角怎么办的呢？

首先，它跟圆角一样，是不能被拉伸的（要不就变形了）！这点你要记住了。你看到我画的线段2了吗？标线2的上端的开始，正好是那个角的下端。也就是说，我纵向拉伸的区域，是不包括那个角的。

你在看右边的4，为什么涵盖了三角呢？4是什么？是纵向显示的内容区域，也就是说，如果你在里面写一段话，纵向上扩展，向上我可以扩到三角的那个位置（当然，你也可以选择不可以，看你的排版，如果觉得好看的话！）。

你还需要注意：

（1）你的.9.png必须绘有拉伸区域的黑线；

（2）黑线1和3的高度必须是1px,2和4的宽度必须是1px.

（2）手绘的黑线拉伸区必须是#000000，透明度100%，并且图像四边不能出现半透明像素；

4.显示内容区域的标注有什么意义呢？

你可能会问：我拉伸四个边，只需要标注两个边就可以了呀，就是1和2，也就是上和左的位置，下和右不就同时拉伸了吗？我再标下和右（3和4）没有什么意义了呀？

上面我们也提到了这个，那再我给你举个例子：

在这里，你会看到，当你标注了内容显示的区域（下和右位置）的时候，即便做了拉伸，文字也会保持在这个区域内。而如果你没有标注内容显示区域的时候，就会使这样子：

错误的标注方式会让排版看起来很混乱。所以我们需要修正内容区域的线段位置和长度。

把横向的内容区域缩短到圆角以内，纵向的内容区域控制在输入框的高度以内，这样文字就可以正常显示了。