用layer-list自定义drawable图形

在日常开发中会碰到有些情况,背景图不算很复杂,但是用单纯的shape无法满足需求,特别是层叠的样式,其实不需要自定义控件,或者让UI切图.用layer-list创建一个drawable图形就可以了

1.layer-list的概念

其实就和新建drawable资源中的shape一样,都是root-element.其原理类似RelativeLayout,也就是一层层的叠加.这也就是图层的概念,每一个图层用item节点表示.

2.单一边线的样式

就像上面这个图形很简单,左右两边各一个Button,如果用单一的drawable中的shape绘制,就是左边背景是白色边线灰色背景左边两个圆角,右边背景是白色边线蓝色背景右边两个圆角,出来的实际效果是下图:

中间明显一条白线明显比较粗,这是因为左右两边作为背景的drawable图都有边线.这时候如果用layer-list,就可以将其中一侧(左边或右边)的背景定义为某一边无边线的样式:

实现起来也很简单,第一层item正常绘制,第二层绘制一个不带边框的同背景色的形状,如果某一边是无边界线,那么除了这个边,其它边都给一个偏移量(item节点里面的bottom等),偏移量取决于第一层的边线宽度

3.套环类样式

最典型的就是同心圆:

4.层叠样式

如果想定义一些类似扑克牌叠起来的,用layer-list也是很方便的:

画的比较丑,就是特意把层叠的间距突出了,以截图的整体方框看作背景的话,里面有三层带圆角的矩形,第一层是灰色,左右间距最大,第二层是红色,左右间距递减,距离top间距稍大,第三层是蓝色,左右无间距,上部间距最大.

5.总结

实际应用中,综合前几种形式,可以用在RadioButton的选中和未选中状态,比如模拟出TabLayout的滑动效果,自己根据UI的设计自行调整即可,可满足不太复杂的组合图形的需求