现在我们正在做一个简单的聊天功能,那必然我们会对每一句的聊天内容设计一个聊天气泡作为背景,设计稿如下:
基于设计稿,很自然的我们会想到直接问UX要.9图,但是我们公司由UX部门不再同一个办公楼,本想让UX提供,沟通下来换来的是UX说已经提供了可以下载。但找来找去只发现设计稿提供了气泡的Tail。本来.9应该拿过来就可以用,但目前只提供Tail,不过也可以通过自己画的方式实现,接下来就是想到用android的layer-list机制,对资源tail和shape进行叠加绘制,一样能达到效果:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="6dp">
<shape android:shape="rectangle">
<solid android:color="@color/primary" />
<corners android:radius="@dimen/shape_chat_radius" />
</shape>
</item>
<item
android:drawable="@drawable/ic_bubble_right_tail"
android:left="@dimen/shape_chat_radius"
android:top="@dimen/shape_chat_radius" />
</layer-list>
一运行,效果图如下:
从上图中明显可以发现,Tail非常短,而且随着文字越多,Tail 越短,长文字几乎Tail直接不可见了,好家伙!
看起来像是Tail随着文字的长度被拉伸没了,于是又想到,资源Tail.svg应该保持原有宽高大小,然后给<item 标签设置了android:width 和android:height属性,但android studio编译器提示了,width和height只在API 23 之后才支持,这…难道这个小小东西我要通过java代码的方式自定义view来实现?我不想这么干,于是google搜索框里敲了关键字 “android layer-list item size”,
虽然没有找到能直接解决的方案,但有一片文章
https://stackoverflow.com/questions/10706853/android-how-to-change-item-width-and-height 第3个回答这段话给我了一点启示:
The above solution takes advantage of having a sized (with a transparent ) and an unsized one (with a ) that has android:gravity set to left|top|right|bottom for matching both parent’s dimensions. So, the real size of the will be determined by that of the unique sized in the same parent.
依旧是上面的代码,我给<item加上了android:gravity="end|right|bottom"完美,效果如下: