(2019.6.24)Android巧用点九图实现复杂布局

(转载公司内部论坛本人文章2019.6.24)

问题一

开发过程中经常会遇到过这样的问题,设计师切了一张下面带阴影效果的Button背景图(图1),如果直接拿来设置background,属性用android:gravity="center",你会发现文案会在背景偏下方的位置(图2)。因为Android并不知道这张背景图下方是有阴影的,所以整张图的center自然不是我们想要的的center。当然这个也不是什么大问题,你完全可以用属性android:padding来调整文案的位置,让它居中。
在这里插入图片描述
在这里插入图片描述

问题二

再看看另外一个复杂点的布局。如图3,两张券屏幕横向居中,券的背景切图如图4,但券里面内容却在左边并且不能超过虚线,内容整体垂直居中。
这个布局明显比上面那个复杂多了,并不能简单的通过android:padding来处理。因为不同机型屏幕的宽度是不一样的,所以每个券在不同手机上的宽度也是不一样的,关键的点在于券里面内容不能超过虚线,我们并不知道虚线在宽度哪个位置。
在这里插入图片描述
在这里插入图片描述

对于上面这个问题二,处理方法也有很多,比如可以在java代码中根据当前机型屏幕宽度计算出每个券的宽度,然后按比例算出左边内容区域的dp值,控制内容不超过虚线。这个方法可以处理,但是代码却不是十分友好,Android开发者还是喜欢布局的问题应该都由xml文件处理。
###用点击图控制内容显示区域
上面两个问题的关键点都在于控件的背景图并不是控件内容显示的区域,或者说控件背景图是不规则的,比如问题二中内容只能显示在左边固定区域。下面介绍这种使用点九图控制显示内容区域的方法,我个人觉得是所有解决上面两个问题里最简单的,并且是布局代码最为清晰的。
循例先简单介绍一下点九图。下面是点九图的官网介绍翻译:

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

大家平时使用点九图比较多的是用它来进行图片指定位置伸缩。如图5的点九图,图片可以沿水平或垂直方向任意伸缩而不变形。
在这里插入图片描述在这里插入图片描述在这里插入图片描述
图7是点九图每个区域所表示的意思,上面提到所谓的简单处理方法,其实就是点九图中可能被大家忽略的区域3和区域4的标识内容区域。上面的两个问题,虽然不是伸缩问题,但是我们完全可以把背景做成点九图来标识我们想要的控件内容区域。
上面的问题二,可以将背景做成点九图(图8),将水平内容区域控制在虚线左边,然后我们就可以愉快的使用LinearLayout进行简单的布局,而无需关心所谓的不同机型屏幕宽度的问题,因为控件内容只会显示在左边。是不是很简单!
在这里插入图片描述

同理,问题一中文案不居中问题,也可以使用点九图,让属性android:gravity="center"是我们想要的居中。
在这里插入图片描述

END

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值