.9图控制内容区域

前言

点9图示一种可伸缩的位图，如果你某个View用了点9图做background，Android会根据点9图的设置来自动为你调整、适应内容。点9图是标准的PNG格式图像，被一圈1像素宽的边缘包围，并且保存的时候扩展名一定要是“.9.png”，还要保存在“res/drawable/”目录。
以上的官方对点9图的介绍。

简单使用：

图4

图5

图4是一个比较常见点9图的使用，用这张点9图做控件背景，控件会根据左边点区域（图4的点1）和上边点区域（图4的点2）做纵向和横向的拉伸，拉伸后如图5的效果。这也是我们使用比较多的情况。
但接下来我要讲的不是点9图自动拉伸的使用，而是讲如何用点9图来控制内容显示区域。

问题

Button

相信很多人在开发过程中都有遇到过这样的问题，设计切了一张下面带阴影效果的Button背景图，如果直接拿来设置Background，当设置文本时用android:gravity="center"，你会发现文案会在背景偏下方的位置。如下图：

button

原因相信大家也知道，因为背景图下方有阴影，所以整张图（蓝色框区域）的center自然不是我们想要的（红色框）的center。此时你可能自己利用 android:padding属性来谩慢调整位置，或者让设计在上方加透明边切成对称的实现居中。

上面说的问题，其实也没有什么工作量，几行代码可以搞定。那看看下面这个问题

图1

图2

图3

产品要求设计出如图1，图2的自定义控件，里面的内容支持图片数字拼接和文本。设计给的背景图如图3，内容只能显示在图3右边的框内并居中。
问题来了，此时再想让控件里的内容居中就比较麻烦了，首先控件背景图是不规则的，显示内容的区域偏右， android:gravity="center"肯定不行，另外文本的行数支持一行或两行，数字拼接后的的图片大小还不知道，不能通过 android:padding写死，怎样才能让控件的内容一直处在右边区域的中心呢？
其实点9图能很好地解决这种不对称背景控制内容位置的问题。

点9图控制内容区域

.9图介绍.png

如图9，大家都知道点1和点2的作用，但是很多人却忽略了右边点区域（点3）和下边点区域（点4）的作用，它们其实可以控制纵向和横向的显示区域。

上面问题中提到的自定义控件的问题，用背景图设置成点9图如下

图6

如图6，点3和点4控制了纵向和横向显示的区域，此时它们横纵相交的区域5就是内容区域。如果用这张点9图做控件背景，系统只会在区域5绘制控件内容。
因此我们可以按照需求控制内容显示区域后，再设置android:gravity="center"，这样无论里面的内容怎么变化，一行或两行，系统绘制时都会放在内容区域的中心，那个复杂的位置问题就这样轻松解决了。
同理，问题的button文案居中问题也可以用这个方法轻松解决。

图7

10.png

点9图能很好的解决这种不对称背景的控制内容的问题。

END