前言
点9图示一种可伸缩的位图,如果你某个View用了点9图做background,Android会根据点9图的设置来自动为你调整、适应内容。点9图是标准的PNG格式图像,被一圈1像素宽的边缘包围,并且保存的时候扩展名一定要是“.9.png”,还要保存在“res/drawable/”目录。
以上的官方对点9图的介绍。
简单使用:
图4是一个比较常见点9图的使用,用这张点9图做控件背景,控件会根据左边点区域(图4的点1)和上边点区域(图4的点2)做纵向和横向的拉伸,拉伸后如图5的效果。这也是我们使用比较多的情况。
但接下来我要讲的不是点9图自动拉伸的使用,而是讲如何用点9图来控制内容显示区域。
问题
相信很多人在开发过程中都有遇到过这样的问题,设计切了一张下面带阴影效果的Button背景图,如果直接拿来设置Background,当设置文本时用android:gravity="center",你会发现文案会在背景偏下方的位置。如下图:
原因相信大家也知道,因为背景图下方有阴影,所以整张图(蓝色框区域)的center自然不是我们想要的(红色框)的center。此时你可能自己利用android:padding属性来谩慢调整位置,或者让设计在上方加透明边切成对称的实现居中。
上面说的问题,其实也没有什么工作量,几行代码可以搞定。那看看下面这个问题
产品要求设计出如图1,图2的自定义控件,里面的内容支持图片数字拼接和文本。设计给的背景图如图3,内容只能显示在图3右边的框内并居中。
问题来了,此时再想让控件里的内容居中就比较麻烦了,首先控件背景图是不规则的,显示内容的区域偏右,android:gravity="center"肯定不行,另外文本的行数支持一行或两行,数字拼接后的的图片大小还不知道,不能通过android:padding写死,怎样才能让控件的内容一直处在右边区域的中心呢?
其实点9图能很好地解决这种不对称背景控制内容位置的问题。
点9图控制内容区域
如图9,大家都知道点1和点2的作用,但是很多人却忽略了右边点区域(点3)和下边点区域(点4)的作用,它们其实可以控制纵向和横向的显示区域。
上面问题中提到的自定义控件的问题,用背景图设置成点9图如下
如图6,点3和点4控制了纵向和横向显示的区域,此时它们横纵相交的区域5就是内容区域。如果用这张点9图做控件背景,系统只会在区域5绘制控件内容。
因此我们可以按照需求控制内容显示区域后,再设置android:gravity="center",这样无论里面的内容怎么变化,一行或两行,系统绘制时都会放在内容区域的中心,那个复杂的位置问题就这样轻松解决了。
同理,问题的button文案居中问题也可以用这个方法轻松解决。
点9图能很好的解决这种不对称背景的控制内容的问题。
END