.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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,119评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,641评论 4 61
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,870评论 0 17
  • 感觉终于找到了一个树洞,可以尽情的吐槽啦!最近喜欢酸甜口,桔子吃的比较多,皮肤都有点发黄啦!忌口忌口啊! 感觉有个...
    通通达阅读 1,837评论 0 0
  • 捧一本书 在暖阳里沉醉 沁一壶茶 在余晖下独饮 等一个人 伴着风销声匿迹 空气吸干了所有的水汽 停在路边等你 你,...
    张dela阅读 1,396评论 0 0

友情链接更多精彩内容